/* ==========================================================================
   Totema.de-Ink&Paper — design tokens (v1.0.0)
   The unified design system powering every totema.de SaaS application:
   warm copper accent and deep midnight ink on tactile paper surfaces.
   All values WCAG AA/AAA-verified (see docs/WCAG.md).
   Author: Slaveyko Kirilov Nikolov.
   ========================================================================== */

/* ── Typography assets (self-hosted, zero external deps, DSGVO-compliant) ── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/SourceSerif4-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/SourceSerif4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Native widgets (scrollbars, selects, date pickers, <dialog>) follow the theme.
     Without this a <dialog> keeps the UA's black text on our dark surface. */
  color-scheme: light;
  /* ── Brand palette: Warm copper — primary CTA and accent ─────────── */
  --brand-50:  #F8F1EA;
  --brand-100: #F0E3D5;
  --brand-200: #E2C7AA;
  --brand-300: #D3AB80;
  --brand-400: #C59055;
  --brand-500: #B8864E;
  --brand-600: #A07342;
  --brand-700: #8B6137;
  --brand-800: #75502D;
  --brand-900: #5F3F22;

  /* ── Ink palette: Deep midnight ink — headers, navbar, trust ── */
  --ink-500:  #1C2D42;
  --ink-600:  #172537;
  --ink-700:  #121D2C;

  /* ── Surface palette: Warm off-white paper tones — page backgrounds ─ */
  --surface-paper:  #FAF9F6;
  --surface-canvas: #F3F1ED;
  --paper-surface:  #FAF9F6;   /* alias of --surface-paper (brand.css) */
  --paper-canvas:   #F3F1ED;   /* alias of --surface-canvas (brand.css) */

  /* ── Text palette: Soft black + warm stone gray — text hierarchy ─── */
  --text-primary:     #1A1A1A;
  --text-secondary:   #6B6560;
  --text-muted:       #6B6560;
  --text-heading:     #1C2D42;
  --text-placeholder: #6B6560;
  --text-disabled:    #D3AB80;
  --text-on-ink:      #FAF9F6;
  --text-link:        #8B6137;
  /* Hover tone for links, pagination and other accent text. Theme-aware: the
     old `a:hover { color: var(--brand-800) }` was a light-only primitive and
     rendered at 2.5:1 on the dark theme. */
  --text-link-hover:  #75502D;

  /* ── Border palette: Warm-toned borders & dividers ──────────────── */
  --border-default:  #E8E4DD;
  --border-light:    #F0EDE8;
  --stroke-default:  #E8E4DD;
  --stroke-strong:   #8B6137;
  --stroke-hairline: #E8E4DD;
  --stroke-light:    #F0EDE8;

  /* ── Status palette: Functional, WCAG AA verified ────────────────── */
  --status-success: #2E7D32;
  --status-warning: #B45309;
  --status-error:   #B3261E;

  /* ── Semantic: surfaces ──────────────────────────────────────────── */
  --surface-page:    var(--surface-paper);
  --surface-card:    #FFFFFF;
  --surface-inset:   var(--surface-canvas);
  --surface-well:    var(--surface-canvas);
  --surface-overlay: rgba(18, 29, 44, 0.48);

  /* ── Semantic: solid (primary CTA — warm copper 700 AA-safe) ─────── */
  --solid-primary-bg:       var(--brand-700);
  --solid-primary-bg-hover: var(--brand-800);
  --solid-primary-text:     #FFFFFF;

  /* ── Semantic: elevation (soft midnight ink shadows) ─────────────── */
  --shadow-1: 0 1px 2px rgba(18, 29, 44, 0.06);
  --shadow-2: 0 2px 8px rgba(18, 29, 44, 0.08);
  --shadow-3: 0 4px 16px rgba(18, 29, 44, 0.12);

  /* ── Semantic: shape — refined, editorial ────────────────────────── */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* ── Focus — midnight ink ring, never removed ───────────────────── */
  --focus-ring:   var(--ink-500);
  --focus-width:  2px;
  --focus-offset: 2px;

  /* ── Typography — Inter primary, JetBrains Mono code ─────────────── */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
  /* Display voice — the editorial serif. Page titles, figures, empty states. */
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* ── Typography scale & metrics (from typography.json) ───────────── */
  --size-xs:      0.75rem;
  --size-sm:      0.875rem;
  --size-base:    1rem;
  --size-lg:      1.125rem;
  --size-xl:      1.25rem;
  --size-2xl:     1.5rem;
  --size-3xl:     1.875rem;
  --size-4xl:     2.25rem;
  --size-display: 3rem;

  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Spacing — 4px baseline grid ─────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ── Layout — prose measure & page gutter (spacing.json layout.*) ── */
  --layout-max-width-prose: 68ch;
  --layout-max-width-text:  42rem;
  --layout-gutter:          clamp(1rem, 4vw, 3rem);

  /* ── Motion — tactile, deliberate ────────────────────────────────── */
  --ease-paper: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-1: 150ms;
  --duration-2: 240ms;
}

/* ── Base defaults ───────────────────────────────────────────────────────── */
html {
  font-family: var(--font-primary);
  color: var(--text-primary);
  background: var(--surface-page);
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-heading);
}

/* The display voice. Page titles are the one place the system leaves sans-serif
   for the editorial serif — optical sizing is left to the variable font, and the
   tighter tracking keeps large type from looking loose. This is what makes the
   system read as printed rather than as another dashboard. */
h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: auto;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

a {
  color: var(--text-link);
}
/* :where() holds this at element specificity (0,0,0,1) so component classes keep
   control of their own colours. A bare `a:hover` (0,0,1,1) previously beat
   `.ip-btn` and painted link-styled buttons copper-on-copper (1:1 — invisible). */
a:where(:hover) {
  color: var(--text-link-hover);
}

hr {
  border: 0;
  border-top: 1px solid var(--border-default);
}

/* ── Focus visibility (WCAG 2.4.7) ──────────────────────────────────────── */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ── Motion preference (WCAG 2.3.3) ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ── Dark theme (deep midnight ink base) ──────────────────────────────── */
:root[data-theme='dark'] {
  color-scheme: dark;
  --surface-page:    #0F1722;
  --surface-card:    #172537;
  --surface-inset:   #1C2D42;
  --surface-overlay: rgba(15, 23, 34, 0.85);
  --surface-well:    #1C2D42;

  --text-primary:     #FAF9F6;
  --text-secondary:   #D3AB80;   /* copper-300 — 7.30:1 on card          */
  --text-muted:       #C59055;   /* copper-400 — 4.99:1 card / 5.53 page */
  --text-heading:     #FAF9F6;
  --text-placeholder: #C59055;   /* same as muted, as in the light theme */
  --text-disabled:    #5F3F22;   /* exempt: WCAG 1.4.3 inactive controls */
  --text-on-ink:      #0F1722;
  --text-link-hover:  #E2C7AA;   /* brighter than the resting link: 9.57:1 on card */

  /* Borders — each --border-* mirrors its --stroke-* counterpart in BOTH
     themes (1.27:1 light / 1.28:1 dark on card). Never darker than the surface. */
  --border-default:   #24374F;
  --border-light:     #1C2D42;
  --stroke-default:   #24374F;
  --stroke-strong:    #B8864E;   /* 4.84:1 — input boundaries (1.4.11)   */
  --stroke-hairline:  #24374F;
  --stroke-light:     #1C2D42;

  --solid-primary-bg:       #B8864E;
  --solid-primary-bg-hover: #C59055;
  --solid-primary-text:     #0F1722;
  --text-link:              #D3AB80;

  /* Status — lifted for AA on dark surfaces (was: light values, 2.37-3.08:1) */
  --status-success: #66BB6A;   /* 6.55:1 on card */
  --status-warning: #E0A03C;   /* 6.83:1 on card */
  --status-error:   #F87171;   /* 5.60:1 on card */

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.50);
  --shadow-3: 0 4px 16px rgba(0, 0, 0, 0.60);

  --focus-ring: #D3AB80;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --surface-page:    #0F1722;
    --surface-card:    #172537;
    --surface-inset:   #1C2D42;
    --surface-overlay: rgba(15, 23, 34, 0.85);
    --surface-well:    #1C2D42;

    --text-primary:     #FAF9F6;
    --text-secondary:   #D3AB80;   /* copper-300 — 7.30:1 on card          */
    --text-muted:       #C59055;   /* copper-400 — 4.99:1 card / 5.53 page */
    --text-heading:     #FAF9F6;
    --text-placeholder: #C59055;   /* same as muted, as in the light theme */
    --text-disabled:    #5F3F22;   /* exempt: WCAG 1.4.3 inactive controls */
    --text-on-ink:      #0F1722;
    --text-link-hover:  #E2C7AA;

    /* Borders — each --border-* mirrors its --stroke-* counterpart in BOTH
       themes (1.27:1 light / 1.28:1 dark on card). Never darker than the surface. */
    --border-default:   #24374F;
    --border-light:     #1C2D42;
    --stroke-default:   #24374F;
    --stroke-strong:    #B8864E;   /* 4.84:1 — input boundaries (1.4.11)   */
    --stroke-hairline:  #24374F;
    --stroke-light:     #1C2D42;

    --solid-primary-bg:       #B8864E;
    --solid-primary-bg-hover: #C59055;
    --solid-primary-text:     #0F1722;
    --text-link:              #D3AB80;

    /* Status — lifted for AA on dark surfaces (was: light values, 2.37-3.08:1) */
    --status-success: #66BB6A;   /* 6.55:1 on card */
    --status-warning: #E0A03C;   /* 6.83:1 on card */
    --status-error:   #F87171;   /* 5.60:1 on card */

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.50);
    --shadow-3: 0 4px 16px rgba(0, 0, 0, 0.60);

    --focus-ring: #D3AB80;
  }
}