/* =============================================================================
   optics.tokens.css  —  Design Language v2 (Optics) physics tokens + shadcn bridge
   Source of record: _plans/1-active/design-step-change/mockups/13-design-language-v2-optics.html §09
   Sprint 1, step 4 (design step-change program). Pinned via the semantic bridge in
   each consuming app's globals.css by design-system.contract.test.ts.

   SCOPE: web-app only this sprint. Do NOT import into apps/website or apps/seo-app
   (marketing adopts the field at the Sprint-5 gate).

   THEME MAPPING — the sheet is written dark-default (`:root` = dark, `:root[data-theme="light"]`
   = light parity). web-app themes the other way round: darkMode:['class'], `:root` is the LIGHT
   default and `.dark` is the override (next-themes attribute="class"). So the SELECTORS are
   remapped while VALUES stay verbatim from §09:
     · sheet dark  `:root`                  ->  web-app `.dark`   (physics that vary by theme)
     · sheet light `:root[data-theme=light]`->  web-app `:root`   (default = light parity)
     · theme-constant tokens (marks, radii, motion, pane-blur) live once on `:root`.

   The physics tokens carry ALL colour/elevation; the semantic shadcn bridge points the app's
   `--background/--card/--muted/--border/--foreground/--muted-foreground` at them. The same bridge
   is re-stated in web-app/globals.css so it is explicit at the app's theme layer and pinned by the
   drift contract; the two are identical (both resolve to the physics tokens), so cascade order is
   immaterial.
   ============================================================================= */

:root {
    /* ---- theme-constant: content marks (the product's four picker colours, verbatim;
            green = legacy display only, never offered — Law 4) ---- */
    --hl-pink: rgb(255, 0, 95);
    --hl-pink-light: rgba(255, 0, 95, .2);
    --hl-orange: rgb(242, 153, 74);
    --hl-orange-light: rgba(242, 153, 74, .5);
    --hl-yellow: rgb(242, 201, 76);
    --hl-yellow-light: rgba(242, 201, 76, .5);
    --hl-blue: rgb(78, 167, 252);
    --hl-blue-light: rgba(78, 167, 252, .3);
    --hl-green: rgb(76, 183, 130);
    --hl-green-light: rgba(76, 183, 130, .5);

    /* ---- theme-constant: shape (pill is a call-site rounded-full, not a token) ---- */
    --r: 14px;
    --r-sm: 9px;

    /* ---- theme-constant: material blur (z9/z10 glass ONLY — resting panes are flat paint) ---- */
    --pane-blur: 16px;

    /* ---- theme-constant: motion ---- */
    --ease-lens: cubic-bezier(.2, .7, .2, 1);
    --t-press: 140ms;
    --t-hover: 200ms;
    --t-depart: 350ms;
    --t-focus: 450ms;
    --t-arrive: 500ms;

    /* ---- LIGHT physics (web-app default theme) — §09 light parity block:
            paper planes, graphite hairlines, shadow carries depth, marks unchanged ---- */
    /* --bg-0 nudged 2 steps lighter (#F6F7F9 → #F8F9FB): the page/backdrop ground read a touch too
       grey against the white panes in light mode (owner review 2026-09-04). Pinned in
       design-system.contract.test.ts. */
    --bg-0: #F8F9FB;
    --bg-1: #FFFFFF;
    --bg-2: #EEF0F3;
    --bg-3: #E2E5EA;
    --ink: #14161A;
    --ink-2: #3F444C;
    --ink-3: #5B616C;
    --ink-4: #8A909B;
    --hair: rgba(10, 12, 16, .10);
    --edge: rgba(10, 12, 16, .18);
    --edge-soft: rgba(10, 12, 16, .12);
    --edge-faint: rgba(10, 12, 16, .05);
    --pane: linear-gradient(154deg, #FFFFFF, #FBFCFD 42%, #F9FAFB);
    --shadow: 0 1px 0 #FFF inset, 0 18px 44px -22px rgba(20, 26, 38, .28), 0 4px 14px -8px rgba(20, 26, 38, .14);
    --shadow-fwd: 0 1px 0 #FFF inset, 0 26px 60px -24px rgba(20, 26, 38, .38), 0 8px 22px -12px rgba(20, 26, 38, .20);

    /* ---- semantic shadcn bridge — the 6 vars §09 bridges, pointed at the physics above.
            Theme-independent: the physics flip per theme, these follow. Re-stated (identically)
            in globals.css where the drift contract pins them. ---- */
    --background: var(--bg-0);
    --card: var(--bg-1);
    --muted: var(--bg-2);
    --border: var(--hair);
    --foreground: var(--ink);
    --muted-foreground: var(--ink-3);
}

.dark {
    /* ---- DARK physics (web-app .dark) — §09 canonical dark block. The field darkens to
            #08090B; resting surfaces sit on #0C0D0F. ---- */
    --bg-0: #08090B;
    --bg-1: #0C0D0F;
    --bg-2: #121315;
    --bg-3: #1F2024;
    --ink: #F4F5F7;
    --ink-2: #B7BBC2;
    --ink-3: #7E838C;
    --ink-4: #565A61;
    --hair: rgba(255, 255, 255, .09);
    --edge: rgba(255, 255, 255, .34);
    --edge-soft: rgba(255, 255, 255, .14);
    --edge-faint: rgba(255, 255, 255, .06);
    --pane: linear-gradient(154deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .022) 42%, rgba(255, 255, 255, .01));
    --shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 22px 60px -24px rgba(0, 0, 0, .85), 0 6px 22px -14px rgba(0, 0, 0, .7);
    --shadow-fwd: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 34px 78px -26px rgba(0, 0, 0, .92), 0 10px 30px -16px rgba(0, 0, 0, .78);
}