/* ─────────────────────────────────────────────────────────────
   Transcribrr — Design Tokens
   Single source of truth. Mirror these values in Flutter's
   ThemeData + a small `tokens.dart` constants file.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Color · Light (default) · "Tramontana" — cool nordic pastel ── */
  --paper:        #F3F6F8;   /* app background — cool off-white */
  --surface:      #FCFEFF;   /* cards, sheets */
  --surface-sunk: #E9EDF0;   /* subtle wells, search field */
  --edge:         #DBE0E4;   /* hairline dividers */
  --edge-strong:  #C8CFD4;

  --ink:          #202730;   /* primary text — cool near-black */
  --ink-2:        #414853;   /* secondary text */
  --ink-3:        #6C727B;   /* tertiary text, metadata */
  --ink-4:        #9A9FA6;   /* placeholder, disabled */
  --ink-5:        #BDC1C7;   /* faint, dividers-as-text */

  /* Brand — Italian tricolore (red·white·green) + Dutch orange.
     Red is the signature accent, used sparingly. White = paper.
     --accent is kept as the primary alias so the whole site inherits red. */
  --accent:       #D66157;   /* soft poppy red — PRIMARY */
  --accent-ink:   #FFFFFF;
  --accent-soft:  #FFE6E2;   /* red tint for backgrounds */
  --accent-edge:  #FDC9C2;
  --red:          #D66157;
  --red-soft:     #FFE6E2;
  --red-edge:     #FDC9C2;
  --green:        #6CB089;   /* sage — secondary */
  --green-soft:   #DFF6E8;
  --orange:       #E3A165;   /* apricot — secondary (NL nod) */
  --orange-soft:  #FFEBD5;

  /* Semantic */
  --ok:           #58A57B;
  --warn:         #E4AC59;
  --danger:       #D24D45;
  --danger-soft:  #FFE6E2;

  /* Speaker palette — flag-led, harmonious */
  --spk-1:        #D66157;   /* red (accent) */
  --spk-2:        #6CB089;   /* sage green */
  --spk-3:        #E3A165;   /* apricot */
  --spk-4:        #4F7EAE;   /* dusk blue */
  --spk-5:        #8A68AE;   /* plum */
  --spk-6:        #4E939A;   /* slate teal */

  /* ── Type ─────────────────────────────────────────────────── */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-ui:      "Geist", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Geist Mono", "SF Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Scale — mobile-first, M3 Expressive-leaning */
  --t-display-l:  44px / 1.02;   /* hero numerals, splash */
  --t-display-m:  34px / 1.05;
  --t-display-s:  28px / 1.08;
  --t-title-l:    22px / 1.18;   /* screen titles */
  --t-title-m:    18px / 1.22;
  --t-title-s:    16px / 1.25;   /* section headers */
  --t-body-l:     17px / 1.45;   /* transcript text — hero */
  --t-body:       15px / 1.45;
  --t-body-s:     13px / 1.4;
  --t-label:      13px / 1.2;    /* small labels */
  --t-mono-s:     12px / 1.2;    /* timestamps */
  --t-caption:    11px / 1.2;

  /* Weights */
  --w-reg: 400;
  --w-med: 500;
  --w-sem: 600;
  --w-bold: 700;

  /* ── Spacing — 4px base ──────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;

  /* Edge gutter (mobile) */
  --gutter: 20px;

  /* ── Radii — generous, expressive ─────────────────────────── */
  --r-1: 6px;     /* chips, tags */
  --r-2: 10px;    /* inputs */
  --r-3: 14px;    /* small cards */
  --r-4: 20px;    /* cards, sheets */
  --r-5: 28px;    /* large cards, modals */
  --r-6: 36px;    /* hero containers */
  --r-pill: 999px;

  /* ── Elevation ─────────────────────────────────────────────
     Soft, low-saturation. Never use harsh shadows on paper. */
  --shadow-1: 0 1px 2px rgba(24,31,42,0.05), 0 1px 0 rgba(24,31,42,0.02);
  --shadow-2: 0 2px 6px rgba(24,31,42,0.06), 0 8px 24px rgba(24,31,42,0.05);
  --shadow-3: 0 8px 28px rgba(24,31,42,0.10), 0 24px 60px rgba(24,31,42,0.07);
  --shadow-player: 0 -1px 0 rgba(24,31,42,0.06), 0 -10px 30px rgba(24,31,42,0.07);

  /* ── Motion ────────────────────────────────────────────────
     Expressive, spring-based. Use sparingly on signature moments. */
  --ease-standard: cubic-bezier(0.2, 0.0, 0, 1.0);
  --ease-emph:     cubic-bezier(0.3, 0.0, 0, 1.0);
  --ease-spring:   linear(
                     0, 0.045 4%, 0.18 9%, 0.39 14%, 0.65 20%,
                     0.94 27%, 1.045 32%, 1.07 37%, 1.05 43%,
                     1.015 51%, 0.995 60%, 1 100%);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-spring: 520ms;

  /* ── Hit targets ──────────────────────────────────────────── */
  --tap: 44px;
}

/* ── Dark theme · "Tramontana" ──────────────────────────────── */
[data-theme="dark"] {
  --paper:        #12161B;
  --surface:      #1C2127;
  --surface-sunk: #0B0F13;
  --edge:         #2B3137;
  --edge-strong:  #424850;

  --ink:          #EAEFF4;
  --ink-2:        #C6CBD1;
  --ink-3:        #8D9399;
  --ink-4:        #5E646A;
  --ink-5:        #43484E;

  --accent:       #ED756A;
  --accent-soft:  #4D2622;
  --accent-edge:  #733A35;
  --red:          #ED756A;
  --red-soft:     #4D2622;
  --red-edge:     #733A35;
  --green:        #78BC95;
  --green-soft:   #153524;
  --orange:       #F1AD71;
  --orange-soft:  #472C13;

  --ok:           #71BE93;
  --warn:         #F2B966;
  --danger:       #F17166;
  --danger-soft:  #4D2622;

  --spk-1:        #ED756A;
  --spk-2:        #78BC95;
  --spk-3:        #F1AD71;
  --spk-4:        #6190C1;
  --spk-5:        #9C7AC2;
  --spk-6:        #61A5AD;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-2: 0 2px 8px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.35);
  --shadow-3: 0 8px 28px rgba(0,0,0,0.55), 0 24px 60px rgba(0,0,0,0.45);
  --shadow-player: 0 -1px 0 rgba(255,255,255,0.04), 0 -10px 30px rgba(0,0,0,0.4);
}

/* ── Base resets, applied where you opt in ──────────────────── */
.tx-root {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss03", "cv11";
}
.tx-display { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; font-variation-settings: "opsz" 36; }
.tx-mono    { font-family: var(--font-mono); font-feature-settings: "tnum", "zero"; }

/* Useful utility surfaces */
.tx-card {
  background: var(--surface);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-1);
}
.tx-hairline { border-top: 1px solid var(--edge); }