/* ==========================================================================
   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;

  /* 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: #0E0B1A;
  --wash1: rgba(124, 92, 255, .16);
  --wash2: rgba(242, 196, 174, .10);
  --dots: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.1px);
  --card: #221C3A;
  --surf: rgba(255, 255, 255, .045);
  --surf2: rgba(255, 255, 255, .06);
  --line: rgba(255, 255, 255, .09);
  --line2: rgba(255, 255, 255, .06);
  --line3: rgba(255, 255, 255, .14);
  --ghost: rgba(255, 255, 255, .12);

  --ink: #F3F0FF;
  --ink2: #E6E1FB;
  --muted: #B9B1D6;
  --muted2: #9A93BA;

  --pur: #9B7BFF;
  --purInk: #CDBBFF;
  --lav: rgba(124, 92, 255, .22);
  --lav2: rgba(124, 92, 255, .13);

  --peachBg: rgba(242, 196, 174, .16);
  --peachInk: #F2C4AE;
  --goodBg: rgba(47, 191, 113, .17);
  --goodInk: #6FE0A6;
  --green: #2FBF71;
  --warnBg: rgba(242, 189, 69, .18);
  --warnInk: #F3C071;
  --amber: #F2BD45;
  --badBg: rgba(242, 85, 90, .20);
  --badInk: #FF9E93;
  --red: #F2555A;
  --plainBg: rgba(255, 255, 255, .07);
  --plainInk: #B9B1D6;
  --wellLine: rgba(255, 255, 255, .34);

  --panel: linear-gradient(150deg, rgba(124, 92, 255, .20) 0%, rgba(255, 255, 255, .045) 46%, rgba(242, 196, 174, .10) 100%);
  --panelLine: rgba(255, 255, 255, .11);

  --glass: rgba(34, 28, 58, .74);
  --glassLine: rgba(255, 255, 255, .13);

  --shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 18px 38px -26px rgba(0, 0, 0, .85);
  --shadowUp: 0 2px 6px rgba(0, 0, 0, .35), 0 22px 46px -24px rgba(109, 77, 242, .55);
  --shadowCurtain: 0 40px 90px -30px rgba(4, 1, 14, .80);
  --scrim: rgba(0, 0, 0, .60);
}

/* 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: #0E0B1A;
    --wash1: rgba(124, 92, 255, .16);
    --wash2: rgba(242, 196, 174, .10);
    --dots: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.1px);
    --card: #221C3A;
    --surf: rgba(255, 255, 255, .045);
    --surf2: rgba(255, 255, 255, .06);
    --line: rgba(255, 255, 255, .09);
    --line2: rgba(255, 255, 255, .06);
    --line3: rgba(255, 255, 255, .14);
    --ghost: rgba(255, 255, 255, .12);
    --ink: #F3F0FF;
    --ink2: #E6E1FB;
    --muted: #B9B1D6;
    --muted2: #9A93BA;
    --pur: #9B7BFF;
    --purInk: #CDBBFF;
    --lav: rgba(124, 92, 255, .22);
    --lav2: rgba(124, 92, 255, .13);
    --peachBg: rgba(242, 196, 174, .16);
    --peachInk: #F2C4AE;
    --goodBg: rgba(47, 191, 113, .17);
    --goodInk: #6FE0A6;
    --green: #2FBF71;
    --warnBg: rgba(242, 189, 69, .18);
    --warnInk: #F3C071;
    --amber: #F2BD45;
    --badBg: rgba(242, 85, 90, .20);
    --badInk: #FF9E93;
    --red: #F2555A;
    --plainBg: rgba(255, 255, 255, .07);
    --plainInk: #B9B1D6;
    --wellLine: rgba(255, 255, 255, .34);
    --panel: linear-gradient(150deg, rgba(124, 92, 255, .20) 0%, rgba(255, 255, 255, .045) 46%, rgba(242, 196, 174, .10) 100%);
    --panelLine: rgba(255, 255, 255, .11);
    --glass: rgba(34, 28, 58, .74);
    --glassLine: rgba(255, 255, 255, .13);
    --shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 18px 38px -26px rgba(0, 0, 0, .85);
    --shadowUp: 0 2px 6px rgba(0, 0, 0, .35), 0 22px 46px -24px rgba(109, 77, 242, .55);
    --shadowCurtain: 0 40px 90px -30px rgba(4, 1, 14, .80);
    --scrim: rgba(0, 0, 0, .60);
  }
}