/* ==========================================================================
   EVAL · tokens.css — the one source of color, type, radius, shadow, motion.
   Owner: engine agent. Feature files use var(--x) only; no ad-hoc hex codes.
   Light is :root. Dark is html[data-theme="dark"]. "auto" is resolved to an
   explicit attribute by EVAL.theme at boot; the media block below covers the
   moment before JS runs (and the case where JS never does).
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- type families ---- */
  --font-head: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- type scale (nothing below 12px ships; the battery fails under 11) ---- */
  --fs-d1: 34px;   /* hero figure inside a curtain          */
  --fs-d2: 26px;   /* big figure in a tile                  */
  --fs-d3: 22px;   /* summary-card headline figure          */
  --fs-h1: 22px;   /* page / curtain title                  */
  --fs-h2: 16px;   /* card title                            */
  --fs-h3: 14.5px; /* row title                             */
  --fs-body: 14px; /* assistant prose                       */
  --fs-row: 13.5px;/* row body, chips                       */
  --fs-label: 13px;/* card eyebrow label, nav               */
  --fs-sub: 12.5px;/* secondary value next to a figure      */
  --fs-pill: 12px; /* pills, tier labels, tags — the floor  */
  --fs-hero: 48px; /* the one figure a whole card is for    */

  --lh-tight: 1.1;
  --lh-body: 1.6;
  --ls-tight: -0.6px;
  --ls-head: -0.3px;

  /* ---- canvas + surfaces ---- */
  --canvas: #FBFAFD;
  --wash1: #F4EFFF;
  --wash2: #FFF3EA;
  --dots: none;
  --card: #FFFFFF;
  --surf: #FBFAFE;
  --surf2: #F7F5FC;
  --line: #ECE9F5;
  --line2: #F4F1FA;
  --line3: #E4DEF6;
  --ghost: #E9E5F3;

  /* ---- ink ---- */
  --ink: #15121F;
  --ink2: #2E2942;
  --muted: #6E6A80;
  --muted2: #8B8799;

  /* ---- brand ---- */
  --pur: #6B4EE6;
  --purInk: #5B3FD4;
  --lav: #EFEAFF;
  --lav2: #F6F3FF;
  --grad: linear-gradient(145deg, #6D4DF2, #9B7BFF);
  --gradR: linear-gradient(90deg, #6D4DF2, #9B7BFF);
  --glow: 0 6px 16px -6px rgba(107, 78, 230, .65);
  /* ink that sits ON the purple gradient (pill.solid, btn-primary, avatar, band,
     the active nav pill): the same in both themes, so no file needs a raw #fff */
  --onGrad: #FFFFFF;

  /* ---- warmth + status ---- */
  --peach: #F2C4AE;
  --peachBg: #FFF1E8;
  --peachInk: #A9631F;
  --goodBg: #E8F5EE;
  --goodInk: #15784E;
  --green: #1E9A66;
  --warnBg: #FDF3E4;
  --warnInk: #A9711A;
  --amber: #D98E1E;
  --badBg: #FDEDEB;
  --badInk: #C13A2E;
  --red: #E5483B;
  --plainBg: #F3F1F8;
  --plainInk: #6E6A80;

  /* ---- deal folder colours (Settings > Store > Deal folders) ----
     one hue per name; a deal row / chip / tile sets --dc to one of these and the
     tint is mixed from it, so a store's colours are four names, never four files */
  --dc-green: #1E9A66; --dc-mint: #1FAF9A; --dc-teal: #0E96B4; --dc-blue: #2F7CF6;
  --dc-indigo: #4F5BD5; --dc-purple: #6D4DF2; --dc-pink: #E2489C; --dc-red: #E5483B;
  --dc-orange: #FF9A3D; --dc-amber: #B24E00; --dc-yellow: #D0A000; --dc-brown: #8B5E3C; --dc-gray: #7A7890;

  /* the ring of an empty well — today only the done box, the one control a GM
     touches every morning. --line3 is a hairline meant for edges BETWEEN things
     and measured 1.2:1 against the card it sat on, which read as an avatar slot
     rather than as something to tap. This is the same family hue at 3:1, the
     floor a non-text control needs to be found at arm's length. */
  --wellLine: #9086C4;

  /* ---- panel (the assistant surface) ---- */
  --panel: linear-gradient(150deg, #EFE7FF 0%, #FBF8FF 44%, #FFF0E4 100%);
  --panelLine: #E2D8F8;

  /* ---- glass (phone nav pill) ---- */
  --glass: rgba(255, 255, 255, .80);
  --glassLine: rgba(21, 18, 31, .08);

  /* ---- depth ---- */
  --shadow: 0 1px 2px rgba(21, 18, 31, .05), 0 14px 30px -22px rgba(21, 18, 31, .35);
  --shadowUp: 0 2px 4px rgba(21, 18, 31, .06), 0 18px 40px -24px rgba(107, 78, 230, .40);
  --shadowCurtain: 0 40px 90px -30px rgba(10, 4, 30, .45);
  --scrim: rgba(22, 17, 43, .45);

  /* ---- radius ---- */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 16px;
  --r: 20px;
  --r-lg: 24px;
  --r-xl: 26px;
  --r-mark: 13px;  /* the app mark's squircle (.gmark, .mark) */
  --r-pill: 999px;

  /* ---- geometry ---- */
  --band-h: 40px;
  --curtain-w: 672px;
  --topbar-h: 48px;
  --gap: 12px;
  --gutter: 16px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);

  /* ---- motion (INTERACTION-LAWS §3: one easing for everything) ---- */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-rise: cubic-bezier(.2, .9, .24, 1.04); /* the 4px overshoot on a curtain rise */
  --dur-page: 180ms;
  --dur-pop: 220ms;
  --dur-popOut: 160ms;
  --dur-curtain: 360ms;
  --dur-curtainOut: 280ms;
  --dur-theme: 240ms;
  --dur-count: 900ms;
  --dur-liftDown: 60ms;
  --dur-liftUp: 180ms;
  --dur-pill: 200ms;
  --dur-enter: 320ms;
}

/* ==========================================================================
   DARK — a token swap, nothing moves (INTERACTION-LAWS §7)
   ========================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;

  --canvas: #131219;
  --wash1: rgba(124, 92, 255, .18);
  --wash2: rgba(242, 196, 174, .10);
  --dots: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.1px);
  --card: #262538;
  --surf: #2F2E45;
  --surf2: #393853;
  --line: rgba(255, 255, 255, .11);
  --line2: rgba(255, 255, 255, .055);
  --line3: rgba(255, 255, 255, .15);
  --ghost: rgba(255, 255, 255, .14);

  --ink: #EEEBF7;
  --ink2: #DBD7EA;
  --muted: #A29DB8;
  --muted2: #7B7692;

  --pur: #B39DFF;
  --purInk: #D9CCFF;
  --lav: rgba(155, 123, 255, .26);
  --lav2: rgba(155, 123, 255, .15);

  --peachBg: rgba(242, 196, 174, .20);
  --peachInk: #F6CDB8;
  --goodBg: rgba(47, 191, 113, .22);
  --goodInk: #84EABB;
  --green: #3DD68C;
  --warnBg: rgba(242, 189, 69, .22);
  --warnInk: #F7CF80;
  --amber: #F2BD45;
  --badBg: rgba(242, 85, 90, .24);
  --badInk: #FFA69E;
  --red: #FF6B66;
  --plainBg: rgba(255, 255, 255, .09);
  --plainInk: #C9C5DA;

  --dc-green: #3ACB8A; --dc-mint: #3FD3BE; --dc-teal: #3DBEDB; --dc-blue: #6AA3FF;
  --dc-indigo: #8B93F5; --dc-purple: #A78BFA; --dc-pink: #FF7AC0; --dc-red: #FF7A70;
  --dc-orange: #FFB067; --dc-amber: #E8781E; --dc-yellow: #F2CC4A; --dc-brown: #C99A78; --dc-gray: #A9A6BF;
  --wellLine: rgba(255, 255, 255, .34);

  --panel: linear-gradient(150deg, rgba(124, 92, 255, .30) 0%, rgba(255, 255, 255, .04) 48%, rgba(242, 196, 174, .16) 100%);
  --panelLine: rgba(255, 255, 255, .13);

  --glass: rgba(29, 28, 39, .80);
  --glassLine: rgba(255, 255, 255, .13);

  --shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .35), 0 18px 38px -26px rgba(0, 0, 0, .9);
  --shadowUp: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 6px rgba(0, 0, 0, .35), 0 22px 46px -24px rgba(109, 77, 242, .5);
  --shadowCurtain: 0 40px 90px -30px rgba(4, 1, 14, .80);
  --scrim: rgba(6, 4, 14, .64);
}

/* Before EVAL.theme resolves "auto" (and if JS never runs), follow the system.
   This block is the dark block above, value for value. Change one, change both:
   a value that lives in only one of them shows up as a theme that flickers on
   boot, or a palette that is right until JS fails. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]), html[data-theme="auto"] {
    color-scheme: dark;
    --canvas: #131219;
    --wash1: rgba(124, 92, 255, .18);
    --wash2: rgba(242, 196, 174, .10);
    --dots: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.1px);
    --card: #262538;
    --surf: #2F2E45;
    --surf2: #393853;
    --line: rgba(255, 255, 255, .11);
    --line2: rgba(255, 255, 255, .055);
    --line3: rgba(255, 255, 255, .15);
    --ghost: rgba(255, 255, 255, .14);
    --ink: #EEEBF7;
    --ink2: #DBD7EA;
    --muted: #A29DB8;
    --muted2: #7B7692;
    --pur: #B39DFF;
    --purInk: #D9CCFF;
    --lav: rgba(155, 123, 255, .26);
    --lav2: rgba(155, 123, 255, .15);
    --peachBg: rgba(242, 196, 174, .20);
    --peachInk: #F6CDB8;
    --goodBg: rgba(47, 191, 113, .22);
    --goodInk: #84EABB;
    --green: #3DD68C;
    --warnBg: rgba(242, 189, 69, .22);
    --warnInk: #F7CF80;
    --amber: #F2BD45;
    --badBg: rgba(242, 85, 90, .24);
    --badInk: #FFA69E;
    --red: #FF6B66;
    --plainBg: rgba(255, 255, 255, .09);
    --plainInk: #C9C5DA;
    --dc-green: #3ACB8A; --dc-mint: #3FD3BE; --dc-teal: #3DBEDB; --dc-blue: #6AA3FF;
    --dc-indigo: #8B93F5; --dc-purple: #A78BFA; --dc-pink: #FF7AC0; --dc-red: #FF7A70;
    --dc-orange: #FFB067; --dc-amber: #E8781E; --dc-yellow: #F2CC4A; --dc-brown: #C99A78; --dc-gray: #A9A6BF;
    --wellLine: rgba(255, 255, 255, .34);
    --panel: linear-gradient(150deg, rgba(124, 92, 255, .30) 0%, rgba(255, 255, 255, .04) 48%, rgba(242, 196, 174, .16) 100%);
    --panelLine: rgba(255, 255, 255, .13);
    --glass: rgba(29, 28, 39, .80);
    --glassLine: rgba(255, 255, 255, .13);
    --shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .35), 0 18px 38px -26px rgba(0, 0, 0, .9);
    --shadowUp: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 6px rgba(0, 0, 0, .35), 0 22px 46px -24px rgba(109, 77, 242, .5);
    --shadowCurtain: 0 40px 90px -30px rgba(4, 1, 14, .80);
    --scrim: rgba(6, 4, 14, .64);
  }
}

/* ---- the dark treatment's own colours (css/dark.css reads these; light never does) ---- */
:root {
  --dusk1: #241C48; --dusk2: #181430; --dusk3: #2B1F30;
  --washV: rgba(139, 105, 255, .50); --washV2: rgba(139, 105, 255, .14); --washP: rgba(246, 168, 140, .24); --washP2: rgba(242, 176, 150, .10); --vignette: rgba(6, 4, 14, .55);
  --star: rgba(255, 255, 255, .62); --star2: rgba(214, 200, 255, .48); --ray: rgba(255, 255, 255, .22); --ray2: rgba(214, 200, 255, .16);
  --cardV: rgba(155, 123, 255, .26); --cardW: rgba(255, 255, 255, .04); --cardP: rgba(242, 196, 174, .09);
  --lineD: rgba(255, 255, 255, .11); --lineD2: rgba(255, 255, 255, .20); --edgeD: rgba(255, 255, 255, .10);
  --liftD: rgba(255, 255, 255, .11); --liftD2: rgba(255, 255, 255, .085); --liftD3: rgba(255, 255, 255, .06);
  --panBg: #1F1A34; --pan1: #2B2352; --pan2: #221D3C; --pan3: #3A2A33;
  --panV: rgba(139, 105, 255, .55); --panP: rgba(242, 176, 150, .34);
  --glowD: rgba(139, 105, 255, .75); --glassCard: #1C1A2B;
  --sheen: rgba(255, 255, 255, .15); --sheen2: rgba(255, 255, 255, .05); --edgeD2: rgba(255, 255, 255, .26);
}