/* OllyOlly design tokens: the one source of truth for colors, type, spacing, radius, elevation and
   motion in the portal, games, chess and modules (docs/DESIGN.md).

   How it works
   - Day theme is the default. Evening theme follows the phone's dark setting, and can be forced with
     <html data-theme="dark"> (evening) or <html data-theme="light"> (day).
   - Age skins: <html data-skin="little | kid | teen | grown">. Same layout and tokens, different feel
     (tile size, radius, accent strength, fonts, density, motion). ui.js applySkin(user) sets it.
   - Every rule here uses :where(), so it has zero specificity: any page stylesheet that sets the same
     custom property on :root wins. That lets the games and chess pages load this file today without
     changing their look.
   - Loaded from /v/<build>/portal/ui/tokens.css (fonts live at /v/<build>/fonts/). */

@font-face { font-family: "Bricolage Grotesque"; src: url(../../fonts/display.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(../../fonts/body.woff2) format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Caveat"; src: url(../../fonts/hand.woff2) format("woff2"); font-weight: 700; font-display: swap; }

/* ---------------------------------------------------------------------------------------------
   Day theme (default) plus everything that does not change with the theme
   --------------------------------------------------------------------------------------------- */
:where(:root) {
  color-scheme: light;

  /* surfaces and ink */
  --bg: #F4F7F2;               /* day page */
  --surface: #FFFFFF;          /* cards, rows */
  --surface-raised: #FFFFFF;   /* sheets, menus, toasts (with --shadow-3) */
  --surface-sunken: #EAF0E7;   /* segmented tracks, chips, quiet buttons */
  --ink: #1C2233;
  --ink-muted: #586074;
  --ink-faint: #646C80;         /* [a11y] darker so small print (times, credits) reads at 4.5:1 */
  --line: #D8E0D4;
  --line-strong: #B7C2B2;
  --scrim: rgba(10, 15, 31, 0.55);

  /* brand: evening blue for bars and the sky, lamplight amber for action */
  --brand: #243152;
  --brand-2: #1A2442;
  --on-brand: #F3F1EA;
  --on-brand-muted: #B9C0D6;
  --accent: #F2A93B;
  --accent-ink: #3A2600;       /* text and icons on --accent */
  --accent-soft: #FFF0D4;      /* quiet amber fill */
  --accent-text: #9A5A06;      /* amber-colored text that is readable on --surface */

  /* status */
  --success: #3F9661;
  --success-soft: #E1F1E6;
  --success-text: #2E6E47;     /* [a11y] green, amber, blue and red text on the page or their soft fills (4.5:1) */
  --warning: #B7790A;
  --warning-soft: #FFF0D4;
  --warning-text: #8A5A00;
  --danger: #D9534F;           /* careful red */
  --danger-text: #B8322E;
  --danger-soft: #FBE3E2;
  --info: #2F86C4;
  --info-soft: #DDEDF8;
  --info-text: #1B65A0;
  --danger-strong: #B8322E;    /* [a11y] white text on red (buttons, count badges) */
  --firefly: #F5B23C;          /* fireflies on light pages; the sky always uses warm yellow */
  --firefly-glow: rgba(242, 169, 59, 0.55);

  /* focus ring: two tones so it shows on white, on the sage page and on the evening-blue bars */
  --focus: #1F5FD6;
  --focus-inner: #FFFFFF;

  /* age band hues (catalog bands 3-5, 6-8, 9-10, 11-13, 14-17) */
  --age-1: #E0654F;
  --age-2: #2F86C4;
  --age-3: #3F9661;
  --age-4: #7B5DBE;
  --age-5: #2B9A94;

  /* safety levels (server/monitor.js LEVELS) */
  --lvl-off: #9AA1B2;
  --lvl-log: #6F86A8;
  --lvl-nudge: #C98A12;
  --lvl-notify: #2F86C4;
  --lvl-block: #D0632C;
  --lvl-urgent: #C8363A;

  /* tile hues (soft backgrounds are mixed from these with --tile-tint) */
  --hue-0: #2F86C4;
  --hue-1: #F2A93B;
  --hue-2: #3F9661;
  --hue-3: #7B5DBE;
  --hue-4: #E0654F;
  --hue-5: #2B9A94;

  /* type */
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-hand: "Caveat", "Bradley Hand", "Comic Sans MS", cursive;   /* one line per screen at most */
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
  --text-xs: 13px;
  --text-sm: 15px;
  --text-md: 17px;   /* body */
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 44px;
  --weight-body: 500;
  --weight-strong: 700;
  --weight-display: 800;
  --leading: 1.5;
  --leading-tight: 1.12;

  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* radius */
  --radius-sm: 8px;     /* inputs, chips */
  --radius-md: 14px;    /* buttons, rows */
  --radius-lg: 20px;    /* cards, sheets */
  --radius-full: 999px; /* pills */

  /* elevation */
  --shadow-1: 0 1px 2px rgba(28, 34, 51, 0.08), 0 1px 1px rgba(28, 34, 51, 0.04);
  --shadow-2: 0 10px 28px -16px rgba(28, 34, 51, 0.45);
  --shadow-3: 0 24px 60px -20px rgba(10, 15, 31, 0.55);
  --glow-accent: 0 10px 30px -12px rgba(242, 169, 59, 0.8);

  /* motion */
  --dur-fast: 120ms;
  --dur-med: 200ms;
  --dur-slow: 360ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);
  --ease-play: cubic-bezier(0.34, 1.56, 0.64, 1);  /* bouncy; skins tone it down */

  /* layout */
  --tap: 44px;              /* smallest tap target */
  --content-max: 860px;
  --appbar-h: 56px;
  --tabbar-h: 64px;
  --rail-w: 96px;

  /* skin knobs (the "kid" skin values are the defaults) */
  --tile-min: 150px;        /* grid column minimum for default tiles */
  --tile-h: 128px;
  --tile-radius: 20px;
  --tile-icon: 56px;
  --tile-tint: 26%;         /* how strong the tile hue is */
  --tile-tint-scale: 1;     /* the evening theme lowers it so tiles do not turn muddy */
  --tile-label: var(--text-md);
  --row-pad: 12px;          /* list row vertical padding */
  --press-scale: 0.96;
  --press-ease: var(--ease-play);
  --sky-faces: 0;           /* 1 = sun and moon with faces (read by sky.js) */
  --sky-fireflies: 7;       /* how many fireflies the night sky shows (read by sky.js) */
  --sky-strength: 1;        /* 0..1, how colorful the sky is */
  --font-greeting: var(--font-hand);  /* the one handwritten line; teen and grown get plain text */

  /* ---- legacy names still used by public/style.css and the modules; same values ---- */
  --surface-2: var(--surface-sunken);
  --muted: var(--ink-muted);
  --dusk: var(--brand);
  --dusk-2: var(--brand-2);
  --dusk-ink: var(--on-brand);
  --dusk-muted: var(--on-brand-muted);
  --amber: var(--accent);
  --amber-ink: var(--accent-ink);
  --amber-soft: var(--accent-soft);
  --good: #3F9661;
  --bad: #C8363A;
  --age1: var(--age-1);
  --age2: var(--age-2);
  --age3: var(--age-3);
  --age4: var(--age-4);
  --age5: var(--age-5);
  --shadow: 0 18px 40px -22px rgba(28, 34, 51, 0.45);
  --display: var(--font-display);
  --body: var(--font-body);
  --hand: var(--font-hand);
  --kid: var(--accent);
}

/* ---------------------------------------------------------------------------------------------
   Evening theme: the phone's dark setting (unless data-theme="light"), or data-theme="dark".
   The two blocks are identical on purpose.
   --------------------------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) {
    color-scheme: dark;
    --bg: #12172A;             /* night page */
    --surface: #1A2137;
    --surface-raised: #222B47;
    --surface-sunken: #212A44;
    --ink: #EDEFF5;
    --ink-muted: #A6AEC4;
    --ink-faint: #8C95B0;
    --line: #2C3654;
    --line-strong: #3E4A6E;
    --scrim: rgba(3, 6, 15, 0.7);
    --brand: #0E1428;
    --brand-2: #0A0F1F;
    --on-brand: #F3F1EA;
    --on-brand-muted: #B9C0D6;
    --accent: #F5B34C;
    --accent-ink: #2E1E00;
    --accent-soft: #3A2C12;
    --accent-text: #F5B34C;
    --success: #5DB57E;
    --success-soft: #1D3528;
    --success-text: #5DB57E;
    --warning: #E0AE4A;
    --warning-soft: #3A2C12;
    --warning-text: #E0AE4A;
    --danger: #E86A66;
    --danger-text: #F08A86;
    --danger-soft: #3D1E24;
    --info: #5AA8E0;
    --info-soft: #1B2F48;
    --info-text: #5AA8E0;
    --danger-strong: #B8322E;
    --firefly: #FFE29A;
    --tile-tint-scale: 0.62;
    --firefly-glow: rgba(255, 214, 110, 0.6);
    --focus: #8AB4FF;
    --focus-inner: #0A0F1F;
    --age-1: #F07E69;
    --age-2: #5AA8E0;
    --age-3: #5DB57E;
    --age-4: #9C82DB;
    --age-5: #4CC2BA;
    --lvl-off: #6E768B;
    --lvl-log: #7F97BA;
    --lvl-nudge: #D9A23A;
    --lvl-notify: #5AA8E0;
    --lvl-block: #E07A45;
    --lvl-urgent: #E0565A;
    --hue-0: #5AA8E0;
    --hue-1: #F5B34C;
    --hue-2: #5DB57E;
    --hue-3: #9C82DB;
    --hue-4: #F07E69;
    --hue-5: #4CC2BA;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 12px 30px -16px rgba(0, 0, 0, 0.8);
    --shadow-3: 0 24px 60px -18px rgba(0, 0, 0, 0.85);
    --glow-accent: 0 10px 30px -12px rgba(245, 179, 76, 0.55);
    --good: #5DB57E;
    --bad: #E0565A;
    --shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.8);
  }
}
:where(:root[data-theme="dark"]) {
  color-scheme: dark;
  --bg: #12172A;
  --surface: #1A2137;
  --surface-raised: #222B47;
  --surface-sunken: #212A44;
  --ink: #EDEFF5;
  --ink-muted: #A6AEC4;
  --ink-faint: #8C95B0;
  --line: #2C3654;
  --line-strong: #3E4A6E;
  --scrim: rgba(3, 6, 15, 0.7);
  --brand: #0E1428;
  --brand-2: #0A0F1F;
  --on-brand: #F3F1EA;
  --on-brand-muted: #B9C0D6;
  --accent: #F5B34C;
  --accent-ink: #2E1E00;
  --accent-soft: #3A2C12;
  --accent-text: #F5B34C;
  --success: #5DB57E;
  --success-soft: #1D3528;
  --success-text: #5DB57E;
  --warning: #E0AE4A;
  --warning-soft: #3A2C12;
  --warning-text: #E0AE4A;
  --danger: #E86A66;
  --danger-text: #F08A86;
  --danger-soft: #3D1E24;
  --info: #5AA8E0;
  --info-soft: #1B2F48;
  --info-text: #5AA8E0;
  --danger-strong: #B8322E;
  --firefly: #FFE29A;
  --tile-tint-scale: 0.62;
  --firefly-glow: rgba(255, 214, 110, 0.6);
  --focus: #8AB4FF;
  --focus-inner: #0A0F1F;
  --age-1: #F07E69;
  --age-2: #5AA8E0;
  --age-3: #5DB57E;
  --age-4: #9C82DB;
  --age-5: #4CC2BA;
  --lvl-off: #6E768B;
  --lvl-log: #7F97BA;
  --lvl-nudge: #D9A23A;
  --lvl-notify: #5AA8E0;
  --lvl-block: #E07A45;
  --lvl-urgent: #E0565A;
  --hue-0: #5AA8E0;
  --hue-1: #F5B34C;
  --hue-2: #5DB57E;
  --hue-3: #9C82DB;
  --hue-4: #F07E69;
  --hue-5: #4CC2BA;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 12px 30px -16px rgba(0, 0, 0, 0.8);
  --shadow-3: 0 24px 60px -18px rgba(0, 0, 0, 0.85);
  --glow-accent: 0 10px 30px -12px rgba(245, 179, 76, 0.55);
  --good: #5DB57E;
  --bad: #E0565A;
  --shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.8);
}

/* ---------------------------------------------------------------------------------------------
   Age skins
   --------------------------------------------------------------------------------------------- */

/* Little ones (3 to 7): biggest tiles, rounder, strongest color, bouncy, faces on the sun and moon. */
:where(:root[data-skin="little"]) {
  --tap: 56px;
  --text-md: 19px;
  --text-lg: 22px;
  --tile-min: 160px;
  --tile-h: 168px;
  --tile-radius: 28px;
  --tile-icon: 84px;
  --tile-tint: 36%;
  --tile-label: 20px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --row-pad: 16px;
  --press-scale: 0.92;
  --press-ease: var(--ease-play);
  --sky-faces: 1;
  --sky-fireflies: 12;
  --sky-strength: 1;
  --font-greeting: var(--font-hand);
}

/* Kids (8 to 12): the defaults above. Bright tiles with icons, sky and fireflies. */
:where(:root[data-skin="kid"]) {
  --sky-faces: 0;
  --sky-fireflies: 7;
}

/* Teens (13 to 17): compact tiles or rows, muted accents, no handwriting, subtle sky. */
:where(:root[data-skin="teen"]) {
  --tile-min: 130px;
  --tile-h: 96px;
  --tile-radius: 16px;
  --tile-icon: 40px;
  --tile-tint: 14%;
  --tile-label: var(--text-sm);
  --row-pad: 11px;
  --press-scale: 0.98;
  --press-ease: var(--ease-out);
  --ease-play: var(--ease-out);
  --sky-faces: 0;
  --sky-fireflies: 3;
  --sky-strength: 0.7;
  --font-hand: var(--font-body);
  --font-greeting: var(--font-display);
}

/* Grown-ups: calm list rows, dense but clear, sky only in the app bar. */
:where(:root[data-skin="grown"]) {
  --tile-min: 140px;
  --tile-h: 88px;
  --tile-radius: 14px;
  --tile-icon: 36px;
  --tile-tint: 10%;
  --tile-label: var(--text-sm);
  --row-pad: 10px;
  --press-scale: 0.99;
  --press-ease: var(--ease-out);
  --ease-play: var(--ease-out);
  --sky-faces: 0;
  --sky-fireflies: 2;
  --sky-strength: 0.6;
  --font-hand: var(--font-body);
  --font-greeting: var(--font-display);
}

/* Reduced motion: from the phone setting, or <html data-motion="reduce">. */
@media (prefers-reduced-motion: reduce) {
  :where(:root) {
    --dur-fast: 1ms;
    --dur-med: 1ms;
    --dur-slow: 1ms;
    --press-scale: 1;
  }
}
:where(:root[data-motion="reduce"]) {
  --dur-fast: 1ms;
  --dur-med: 1ms;
  --dur-slow: 1ms;
  --press-scale: 1;
}

/* [landscape] A phone turned on its side (wide and short): a slimmer app bar, and the bottom tab bar
   becomes a slim rail on the left (components.css), so screens keep their height. */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --appbar-h: 44px; --tabbar-h: 0px; --rail-w: 76px; }
}