/*
 * Writing Assistant · design tokens            (docs/09-VISUAL-SPEC.md §2)
 *
 * This file is loaded FIRST. Its first statement fixes the cascade order for every stylesheet of the tool:
 *   reset < tokens < base < components < utilities
 * Nothing outside @layer is shipped. `!important` appears only in utilities.css ([hidden], .wa-vh, responsive visibility).
 *
 * Family: the SoundLabs / PromptShare dark tokens (surfaces, teal accent, radii, elevation, motion, focus) are
 * copied, not imported, so the tool can be lifted as one folder. The writing app adds:
 *   - a reading face (Literata) and a page type scale that is independent of the chrome scale
 *   - a second theme, Paper, as a swap of the colour tokens only (no component knows which theme it is in)
 *   - diff, selection, stream and find-match tints
 *
 * Rules for every author:
 *   - No raw colour, size, radius, shadow, duration or z-index outside this file.
 *   - 4px grid. 1px hairlines and 1–2px optical nudges inside controls are the only exceptions.
 *   - No bordered box inside a bordered box: group with space and a 1px --border divider.
 *   - Teal = primary / yours / AI-live. Green/red = inserted/removed text ONLY. Amber = attention. Nothing else is coloured.
 *   - One filled (primary) button per surface. The harness counts them.
 */
@layer reset, tokens, base, components, utilities;

@layer tokens {
  :root,
  [data-theme="dark"] {
    /* ---- Surfaces (5) ---- */
    --canvas: #0A1219;          /* the writing page: the calmest, darkest plane, so text is the brightest thing */
    --surface-1: #0D1821;       /* rail, assistant panel, top bar */
    --surface-2: #132230;       /* controls at rest, cards, dialogs, selection bar */
    --surface-3: #1A2C3B;       /* hover, pressed, active menu row, chips on surface-2 */
    --scrim: rgba(2, 6, 10, .72);
    --backdrop: rgba(2, 6, 10, .72);  /* modal dialogs */

    /* ---- Lines (3) ---- */
    --border: #1E2F3C;          /* hairline dividers (decorative) */
    --border-strong: #2B4051;   /* control outline at rest (the control is also identified by label + fill) */
    --border-control: #5B7487;  /* 3:1 non-text: inputs on focus-within, checkboxes, the goal ring track */

    /* ---- Text (4) ---- */
    --text: #E8EFF5;            /* page ink and UI labels; deliberately not #FFF (glare on dark) */
    --text-2: #B4C4D1;          /* secondary copy, quotes, rail titles */
    --text-3: #8FA2B2;          /* meta, placeholders, hints, focus-mode inactive paragraphs; ≥4.5:1 on every surface */
    --text-disabled: #5A6D7C;   /* disabled labels only (exempt from 1.4.3 by definition) */

    /* ---- Accent (4) ---- */
    --accent: #5EEAD4;
    --accent-hover: #2DD4BF;
    --accent-tint: rgba(94, 234, 212, .12);
    --on-accent: #04211D;

    /* ---- Writing decorations (6) ---- */
    --sel: rgba(94, 234, 212, .22);        /* persistent selection while a bar/menu has focus */
    --ins: #86EFAC;                        /* inserted words */
    --ins-tint: rgba(134, 239, 172, .14);
    --del: #FCA5A5;                        /* removed words (also: danger text) */
    --del-tint: rgba(252, 165, 165, .10);
    --mark: rgba(252, 211, 77, .28);       /* find match; the current match adds a 2px --warning outline */

    /* ---- Status (3) ---- */
    --warning: #FCD34D;
    --warning-tint: rgba(252, 211, 77, .12);
    --success: #86EFAC;

    --shadow-rgb: 0, 0, 0;
    color-scheme: dark;
  }

  [data-theme="paper"] {
    --canvas: #FBFAF6;          /* warm paper, not white: lower glare for long sessions */
    --surface-1: #F4F2EC;
    --surface-2: #FFFFFF;
    --surface-3: #EAE7DF;
    --scrim: rgba(36, 40, 48, .24);   /* sheets/menus: lighter + cooler (critic r1 polish 4) */
    --backdrop: rgba(24, 26, 31, .52);  /* modal dialogs: strong enough to quiet the dark site nav too (critic r2 polish 7) */

    --border: #E3DFD5;
    --border-strong: #D0CABD;
    --border-control: #8A8375;

    --text: #1F1D1A;
    --text-2: #45413A;
    --text-3: #625D54;
    --text-disabled: #A39D92;

    --accent: #0E6A63;
    --accent-hover: #0B5852;
    --accent-tint: rgba(14, 106, 99, .09);
    --on-accent: #FFFFFF;

    --sel: rgba(14, 106, 99, .16);
    --ins: #166534;
    --ins-tint: rgba(22, 163, 74, .12);
    --del: #B42318;
    --del-tint: rgba(220, 38, 38, .08);
    --mark: rgba(234, 179, 8, .30);

    --warning: #8A4B0C;
    --warning-tint: rgba(234, 179, 8, .16);
    --success: #166534;

    --shadow-rgb: 60, 50, 30;
    color-scheme: light;
  }

  :root {
    /* ---- Families ---- */
    --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* Literata (SIL OFL, Google Fonts): designed for long-form screen reading (Google Play Books); variable optical size
       so 19px body and 40px titles each get the right cut. */
    --font-serif: "Literata", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --font-page: var(--font-serif);   /* switched by [data-page-font] in Settings */

    /* ---- Chrome type scale (7) ---- */
    --fs-hero: 2.75rem;    --lh-hero: 3.25rem;     /* 44/52  landing H2 hero only */
    --fs-head: 2rem;       --lh-head: 2.5rem;      /* 32/40  landing section heads */
    --fs-display: 1.375rem;--lh-display: 1.75rem;  /* 22/28  dialog titles, empty-state title */
    --fs-title: 1rem;      --lh-title: 1.5rem;     /* 16/24  panel titles, card titles */
    --fs-body: .875rem;    --lh-body: 1.25rem;     /* 14/20  buttons, inputs, chat, rows */
    --fs-label: .8125rem;  --lh-label: 1.25rem;    /* 13/20  menus, selection bar, rail rows, help */
    --fs-meta: .75rem;     --lh-meta: 1rem;        /* 12/16  meta, counts, kbd, captions */
    --fs-input: var(--fs-body);                    /* 16px on touch (iOS zoom), set below */

    /* ---- Page type scale (the writing surface; set per viewport + per user font size) ---- */
    --page-fs: 1.1875rem;         /* 19px */
    --page-lh: 1.7;               /* ≈32px */
    --page-h1: 2.5rem;            /* document title 40px */
    --page-h2: 1.5rem;            /* 24px */
    --page-h3: 1.1875rem;         /* same size as body, set bold: hierarchy by weight, not size */
    --page-gap: .85em;            /* ONE paragraph rhythm for typed and AI-inserted text alike (05 §1.3) */

    --fs-lede: 1.0625rem;  --lh-lede: 1.75rem;     /* 17/28  landing lede, demo page */
    --fs-read-sm: .9375rem;                        /* 15px   serif snippets inside UI: drafts, proofread rows */
    --fw-heavy: 800;              /* landing display heads only */
    --fw-regular: 500;            /* Manrope reads thin on dark at 400 */
    --fw-medium: 600;
    --fw-bold: 700;
    --fw-page: 400;
    --fw-page-bold: 650;
    --ls-caps: .06em;
    --ls-tight: -.011em;
    --ls-display: -.02em;

    /* ---- Spacing (4px grid) ---- */
    --sp-px: 1px; --sp-half: 2px;
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
    --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

    /* ---- Radii (4 + pill) ---- */
    --r-sm: 6px;     /* chips, kbd, menu rows, small buttons */
    --r-md: 10px;    /* buttons, inputs, menus, bars */
    --r-lg: 14px;    /* cards, dialogs, popover cards */
    --r-xl: 20px;    /* sheets (top corners) */
    --r-pill: 999px;

    /* ---- Elevation (3) ---- */
    --e-1: 0 1px 2px rgba(var(--shadow-rgb), .28);
    --e-2: 0 8px 24px rgba(var(--shadow-rgb), .32), 0 1px 3px rgba(var(--shadow-rgb), .2);
    --e-3: 0 24px 64px rgba(var(--shadow-rgb), .42);

    /* ---- Motion ---- */
    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --t-fast: 120ms;   /* hover, press, focus */
    --t-med: 200ms;    /* bars, menus, toasts, diff accept fade */
    --t-slow: 320ms;   /* dialogs, sheets, rail/panel collapse */
    --t-caret: 1.05s;  /* streaming caret blink */

    /* ---- Layout ---- */
    --topbar-h: 52px;
    --status-h: 40px;                  /* solid status band under the page */
    --fade-h: 48px;                    /* text fade above it, ends at full canvas on the band's top edge */
    --peek-h: 184px;                   /* assistant sheet peek (< 1024) while a change waits in the document */
    --dock-bottom: 0px;                /* what the docked review bar must clear (the peek sheet) */
    --rail-w: 264px;
    --panel-w: 380px;
    --page-pad-x: var(--sp-12);        /* page gutter inside the main column */
    --page-pad-top: var(--sp-16);
    /* The reading measure. In `ch` of the page face, tuned so a full line holds 64–70 real characters
       (a Literata "0" is wider than the average glyph+space: 55ch ≈ 66 characters). check `measure` asserts 60–75. */
    --measure: 55ch;
    --measure-ui: 44ch;
    --chromebar-w: calc(var(--measure) + var(--sp-12));   /* find bar, banners: the page column + 24px each side (in page ch) */                /* panel copy, empty states, toasts */
    --dialog-w: 560px;
    --dialog-w-lg: 880px;
    --selbar-h: 40px;
    --ctl-sm: 28px;
    --ctl-md: 32px;
    --ctl-lg: 40px;
    --target: 44px;                    /* touch */
    --gutter: 16px;                    /* phone side gutter */
    --nav-h: 0px;                      /* site nav above the app (guest page only); set from measurement by JS */
    --stroke: 1.6;

    /* ---- Theme preview swatches (Settings → Appearance must show BOTH themes whatever the current one is) ---- */
    --pv-dark-bg: #0A1219;   --pv-dark-line: #B4C4D1;  --pv-dark-border: #1E2F3C;
    --pv-paper-bg: #FBFAF6;  --pv-paper-line: #45413A; --pv-paper-border: #E3DFD5;

    /* ---- Focus ---- */
    --focus-w: 2px;

    /* ---- z-index scale (in-page layers only; dialogs are native <dialog> in the top layer and need none).
       The shared site nav is sticky at 50: every app layer that can meet it stays below it. ---- */
    --z-base: 0;
    --z-page-float: 10;   /* the scroller's edge fade, per-change popover: float over page text */
    --z-bar: 20;          /* review bar (above the edge fade, round 4), selection bar, slash menu, variants picker */
    --z-sticky: 30;       /* top bar, find bar, banners */
    --z-popover: 40;      /* menus opened from the chrome (export, tone, goal) */
    --z-scrim: 41;        /* scrim under the phone/tablet doc drawer and assistant sheet */
    --z-sheet: 42;        /* doc drawer (<1024) and assistant bottom sheet (<1024) */
    --z-dock: 43;         /* docked review bar / variants sheet on phones: above a peeking assistant sheet */
    --z-toast: 45;        /* toasts, below the site nav's 50 */
  }

  /* Laptop: slightly smaller page type, tighter gutters so the 1024 layout keeps 60+ characters per line */
  @media (max-width: 1279.98px) {
    :root { --page-fs: 1.125rem; --page-h1: 2.25rem; --panel-w: 360px; --page-pad-x: var(--sp-10); --rail-w: 248px; }
  }
  @media (max-width: 1023.98px) {
    :root { --page-pad-top: var(--sp-12); --page-pad-x: var(--sp-12); }
  }
  /* Phone */
  @media (max-width: 767.98px) {
    :root {
      --page-fs: 1.0625rem;     /* 17px */
      --page-lh: 1.65;
      --page-h1: 1.875rem;      /* 30px */
      --page-h2: 1.3125rem;
      --page-h3: 1.0625rem;
      --page-pad-x: var(--sp-5);
      --page-pad-top: var(--sp-8);
      --fs-input: 1rem;
      --fs-hero: 2rem; --lh-hero: 2.5rem;
      --fs-head: 1.625rem; --lh-head: 2rem;
      --topbar-h: 56px;
    }
  }

  /* User font size (Settings → Appearance). Multiplies the page scale only; chrome never scales with it. */
  [data-page-size="s"] { --page-scale: .9; }
  [data-page-size="m"] { --page-scale: 1; }
  [data-page-size="l"] { --page-scale: 1.12; }

  [data-page-font="serif"] { --font-page: var(--font-serif); }
  [data-page-font="sans"]  { --font-page: var(--font-ui); --fw-page: 500; --fw-page-bold: 700; }
  [data-page-font="mono"]  { --font-page: var(--font-mono); --fw-page: 400; --fw-page-bold: 600; }

  @media (prefers-reduced-motion: reduce) {
    :root { --t-fast: 1ms; --t-med: 1ms; --t-slow: 1ms; --t-caret: 0s; }
  }
}