/* SPDX-License-Identifier: MIT — tokens v4 (16-drive-design §8, DESIGN.md): the drive's neutral look
   (shadcn new-york, neutral base) under the names the site, the anonymous widget and the older app pages
   already read, so they match the drive (web/shared/ui/tokens.css) without growing the widget's bytes.
   Violet means Tari, nothing else. Lime (17-brand.md v2, Tari's green) is the action colour: your side of
   hidebox, spent once per view (the Open your drive fill and the home's fields). System faces here; Geist comes with home.css, pages.css
   and the drive.
   The --ghost-* names stay for the pages that still draw the old figure until they are restyled.
   Consumers use only these names; the block marked "compat" keeps the names older stylesheets read. */
:root {
  color-scheme: light dark;
  --night: #13183A; --night-raised: #1C2250; --night-sunken: #0C1030; --moon: #EEF0FF; --moon-dim: #AEB4DC;
  --ceiling: #F4F5FC; --ceiling-raised: #FCFCFF; --ceiling-sunken: #E7E9F6; --ink: #151A3B; --ink-dim: #474D7C;
  --phosphor: #DDFADF; --phosphor-deep: #BDEFC3; --tari: #7008E7; --on-tari: #FFFFFF;
  /* light (the default when the OS is light): neutral 50 to 950 */
  --bg: #FFFFFF; --bg-raised: #FFFFFF; --bg-sunken: #F5F5F5;
  --fg: #0A0A0A; --fg-2: #666666;
  --line: rgb(10 10 10 / .42);   /* control borders, 3:1 or more */
  --hair: #E5E5E5;               /* decorative separators only */
  --focus: #0A0A0A;
  --act: #171717; --on-act: #FAFAFA; --act-hover: #333333;
  --mark: #F5F5F5; --on-mark: #171717;
  --pay: var(--tari); --on-pay: #FFFFFF; --pay-text: #7008E7; --tari-text: var(--pay-text);
  --ok: #E6F4EE; --on-ok: #0A0A0A; --ok-text: #00704F;
  --exit: #C70010; --on-exit: #FFFFFF; --exit-text: #C70010;
  --ghost-fill: #FDFDFF; --ghost-line: var(--ink); --ghost-eye: var(--ink);
  --blush: #FF9EB9; --prop: #FFF6D6; --sand: #E2B13C; --glow: none;
  --ghost-shadow: rgb(21 26 59 / .16);
  --scrim: rgb(0 0 0 / .5);
  --shadow: 0 1px 2px rgb(0 0 0 / .05), 0 12px 28px -14px rgb(0 0 0 / .2);
  --shadow-lg: 0 1px 2px rgb(0 0 0 / .05), 0 24px 48px -24px rgb(0 0 0 / .28);
  /* site v2/v3 (17-brand.md §9): the second section surface, the ruler on its seams, and the lime ramp
     (Tari's green, #BCFE00, as the action fill). Primitives by hue (--lime-*); components read only the
     --brand-* roles. Green text never sits on a light surface: light pages write it in lime-800. */
  --bg-alt: #FAFAFA; --tick: rgb(10 10 10 / .16);
  --lime-50: #F4FFE6; --lime-100: #E8FDCA; --lime-200: #D2F896; --lime-400: #BCFE00; --lime-500: #B1EC20;
  --lime-600: #6A9708; --lime-700: #59800B; --lime-800: #43600E; --lime-900: #39510E;
  --lime-d-fx: #92C124; --lime-d-line: #384A15; --lime-d-tile: #26330E; --lime-d-soft: #161D0B;
  --brand-solid: var(--lime-400); --brand-solid-hover: var(--lime-500); --on-brand: #0A0A0A;
  --brand-edge: var(--lime-700); --brand-text: var(--lime-800); --brand-subtle: var(--lime-50);
  --brand-border: var(--lime-200); --brand-tile: var(--lime-100); --brand-field: var(--lime-600);
  --brand-px: var(--lime-600); --px-alpha: .5;   /* the closing's pixel field (site v3) */
  --field-alpha: .30; --field-quiet: .40;   /* lines 30 %, times .40 under words = 12 % */
}
:root[data-theme="dark"] {                   /* dark, chosen with the switch */
  --bg: #0A0A0A; --bg-raised: #171717; --bg-sunken: #1C1C1C;
  --fg: #FAFAFA; --fg-2: #A3A3A3;
  --line: rgb(250 250 250 / .4); --hair: rgb(255 255 255 / .1); --focus: #FAFAFA;
  --act: #E5E5E5; --on-act: #171717; --act-hover: #D4D4D4;
  --mark: #262626; --on-mark: #FAFAFA;
  --pay-text: #A684FF; --ok: #062A1F; --on-ok: #FAFAFA; --ok-text: #00D492;
  --exit: #FF6467; --on-exit: #0A0A0A; --exit-text: #FF6467;
  --ghost-fill: var(--phosphor); --ghost-line: var(--phosphor-deep); --ghost-eye: var(--night);
  --blush: #FF8FB0; --prop: #FFF3C4;
  --glow: drop-shadow(0 0 22px rgb(189 239 195 / .38)); --ghost-shadow: rgb(189 239 195 / .18);
  --scrim: rgb(0 0 0 / .7);
  --shadow: 0 0 0 1px var(--hair), 0 16px 32px -18px rgb(0 0 0 / .7);
  --shadow-lg: 0 0 0 1px var(--hair), 0 28px 56px -24px rgb(0 0 0 / .8);
  --bg-alt: #111111; --tick: rgb(255 255 255 / .18);
  --brand-edge: transparent; --brand-text: var(--lime-400); --brand-subtle: var(--lime-d-soft);
  --brand-border: var(--lime-d-line); --brand-tile: var(--lime-d-tile); --brand-field: var(--lime-d-fx); --brand-px: var(--lime-d-fx); --px-alpha: .6;
}
@media (prefers-color-scheme: dark) {        /* dark: follow the OS until the switch is pressed */
  :root:not([data-theme="light"]) {
    --bg: #0A0A0A; --bg-raised: #171717; --bg-sunken: #1C1C1C;
    --fg: #FAFAFA; --fg-2: #A3A3A3;
    --line: rgb(250 250 250 / .4); --hair: rgb(255 255 255 / .1); --focus: #FAFAFA;
    --act: #E5E5E5; --on-act: #171717; --act-hover: #D4D4D4;
    --mark: #262626; --on-mark: #FAFAFA;
    --pay-text: #A684FF; --ok: #062A1F; --on-ok: #FAFAFA; --ok-text: #00D492;
    --exit: #FF6467; --on-exit: #0A0A0A; --exit-text: #FF6467;
    --ghost-fill: var(--phosphor); --ghost-line: var(--phosphor-deep); --ghost-eye: var(--night);
    --blush: #FF8FB0; --prop: #FFF3C4;
    --glow: drop-shadow(0 0 22px rgb(189 239 195 / .38)); --ghost-shadow: rgb(189 239 195 / .18);
    --scrim: rgb(0 0 0 / .7);
    --shadow: 0 0 0 1px var(--hair), 0 16px 32px -18px rgb(0 0 0 / .7);
    --shadow-lg: 0 0 0 1px var(--hair), 0 28px 56px -24px rgb(0 0 0 / .8);
    --bg-alt: #111111; --tick: rgb(255 255 255 / .18);
    --brand-edge: transparent; --brand-text: var(--lime-400); --brand-subtle: var(--lime-d-soft);
    --brand-border: var(--lime-d-line); --brand-tile: var(--lime-d-tile); --brand-field: var(--lime-d-fx); --brand-px: var(--lime-d-fx); --px-alpha: .6;
  }
}
@media (prefers-contrast: more) { :root { --line: var(--fg); --hair: color-mix(in srgb, var(--fg) 40%, transparent); } }
/* increased contrast for the brand (17-brand.md §9): the fill keeps its 16:1 label, an ink edge outlines it
   on light pages and light-page brand text darkens; the dark blocks outrank this :root and need nothing */
@media (prefers-contrast: more) { :root { --brand-edge: var(--fg); --brand-text: var(--lime-900); --field-alpha: .15; } }

:root {
  /* system faces only: the platform sans (Geist is the drive's, and loads only there) */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-code: ui-monospace, "SF Mono", Menlo, Consolas, "Noto Sans Mono", monospace;
  --t-hero: 650 clamp(36px, 5vw, 56px)/1.05 var(--font);     /* letter-spacing: -.02em */
  --t-h2: 650 clamp(24px, 2.6vw, 30px)/1.2 var(--font);       /* -.015em */
  --t-h3: 600 18px/1.35 var(--font);
  --t-say: 400 clamp(17px, 1.6vw, 19px)/1.55 var(--font);
  --t-body: 400 16px/1.6 var(--font);
  --t-ui: 500 15px/1.2 var(--font);
  --t-small: 400 14px/1.5 var(--font);
  --t-code: 400 14px/1.5 var(--font-code);

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter: 16px; --content: 1088px; --read: 66ch; --tap: 44px; --grid: 48px; --sec-pad: var(--s-8);
  --r-panel: 14px; --r-input: 8px; --r-btn: 10px; --r-pill: 999px;
  --z-header: 10; --z-catch: 40; --z-sheet: 50; --z-modal: 100; --z-toast: 200;

  --dur-1: 120ms;    /* press, hover */
  --dur-2: 200ms;    /* state change, fade */
  --dur-3: 340ms;    /* reveal; the ghost's poses */
  --dur-wow: 940ms;  /* flight 380 + gulp 240 (of 320) + unroll 320 */
  --dur-exit: 240ms; /* a secret leaving: exits are faster than entrances */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.55, 0, .75, .1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.3, 1.3, .6, 1); /* the ghost's hands and mittens only: the one overshoot curve */

  /* compat: only the holding page (deploy/holding) still reads these names; the app and the site use the ones above */
  --font-script: var(--font); --font-ui: var(--font);
  --t-display: var(--t-hero);
  --t-zone-2: var(--t-say);
  --t-direction: 500 17px/1.5 var(--font);
  --t-scene: 650 15px/1.4 var(--font);
  --t-cue: 500 14px/1.3 var(--font);
  --t-caption: 500 14px/1.45 var(--font);
  --t-data: 400 14px/1.45 var(--font-code);
  --content-max: var(--content); --zone-max: 720px; --cols: 4;
  --section-pad: clamp(64px, 10svh, 128px);
  --radius: var(--r-input); --radius-dot: 50%;
  --shadow-float: var(--shadow);
  --tari-purple: var(--tari);
  --stage: var(--night); --stage-raised: var(--night-raised); --stage-sunken: var(--night-sunken);
  --stage-fg: var(--moon); --stage-fg-2: var(--moon-dim);
  --lamp: var(--phosphor); --lamp-off: var(--night-sunken); --lamp-glow: rgb(221 250 223 / .55);
  --locker-side: var(--night-sunken); --locker-top: var(--night-raised); --locker-bottom: #080B22;
}
@media (min-width: 640px)  { :root { --gutter: 28px; --cols: 8; } }
@media (min-width: 1024px) { :root { --sec-pad: var(--s-9); } }
@media (min-width: 1280px) { :root { --gutter: 40px; } }