/* Design tokens: the one source for the site, dashboard and chat iframe
   (research/UI-REDESIGN-V2.md §3). No other stylesheet declares a colour
   literal (TestCSSGuardrails); w-host.css mirrors a few on :host.
   Brand: indigo on warm white, five accent tints (sun, peach, mint, sky,
   lilac) for blocks, icon tiles and covers; each -deep partner is ≥4.5:1 on
   its tint. Text is deep indigo ink, never pure black. */

@layer reset, tokens, base, components, patterns, pages, utilities;

/* Self-hosted variable fonts (SIL OFL 1.1, licences beside the files).
   Fraunces carries only the wght axis in this subset. The fallbacks are
   metric-matched (measured in Chrome: Fraunces ascent .98 / descent .26 em,
   600 weight 0.938 × Georgia's width; Figtree .95 / .25 em, 400 weight the
   same width as Arial) so the swap does not shift the layout. */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin-wght.woff2?v=7f9d191d9993") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin-wght.woff2?v=4ba7d3d09669") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia");
  size-adjust: 93.8%; ascent-override: 104.4%; descent-override: 27.7%; line-gap-override: 0%;
}
@font-face {
  font-family: "Figtree Fallback";
  src: local("Arial"), local("Helvetica");
  size-adjust: 100%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%;
}

@layer tokens {
  :root {
    color-scheme: light dark;

    /* colour: surfaces and text */
    --background: #fbfaf8;
    --foreground: #1e1b4b;
    --card: #ffffff;
    --popover: #ffffff;
    --sunken: #f5f3ef;
    --muted: #f1f0f7;
    --muted-foreground: #4a4774;
    --subtle-foreground: #636091;
    --border: #e9e6f2;
    --input: #8d89ab;
    --ring: #4338ca;
    --primary: #4338ca;
    --primary-hover: #3730a3;
    --primary-foreground: #ffffff;
    --secondary: #eef0ff;
    --accent: #f1f0f7;
    --brand: #4338ca;
    --brand-ink: #1e1b4b;
    --brand-soft: #eef0ff;
    --on-brand: #ffffff;
    --destructive: #b91c1c;
    --destructive-foreground: #ffffff;

    /* accent tints (blocks, tiles, covers) and their deep partners (icons, numerals) */
    --sun: #ffc83d;   --sun-soft: #fff4d4;   --sun-deep: #7a4f00;
    --sun-solid: #ffc83d; --sun-ink: #1e1b4b;
    --peach: #ffd9c7; --peach-soft: #ffeee6; --peach-deep: #a83c17;
    --mint: #cff3e1;  --mint-soft: #e6f8ef;  --mint-deep: #0c6340;
    --sky: #d6ecff;   --sky-soft: #eaf4ff;   --sky-deep: #0a56a3;
    --lilac: #e7ddff; --lilac-soft: #f3eeff; --lilac-deep: #5531b5;
    --coral: #ff8f6b;
    --map-land: #f2efe9; /* OSM land colour: under map tiles while they load */

    /* dark brand band (footer, assistant promo) */
    --ink-band: #1e1b4b;
    --ink-band-fg: #f2f1fa;
    --ink-band-muted: #c4c1e6;
    --ink-band-line: rgb(255 255 255 / .14);

    /* cover palettes: bg + four shape fills, per palette */
    --pal0-bg: #ffeee6; --pal0-1: #ffc83d; --pal0-2: #ff8f6b; --pal0-3: #4338ca; --pal0-4: #ffd9c7;
    --pal1-bg: #e3f6ec; --pal1-1: #8fdcb6; --pal1-2: #bfe0ff; --pal1-3: #0c6340; --pal1-4: #ffc83d;
    --pal2-bg: #e4f0ff; --pal2-1: #9cc8f5; --pal2-2: #ddd0ff; --pal2-3: #4338ca; --pal2-4: #ff8f6b;
    --pal3-bg: #f1eaff; --pal3-1: #c4b0ff; --pal3-2: #ffc83d; --pal3-3: #1e1b4b; --pal3-4: #ffd9c7;

    /* status pairs: soft background + ink, solid + on-solid */
    --ok-soft: #e9f8ef;     --ok-ink: #166534;     --ok-solid: #15803d;   --ok-on-solid: #ffffff;
    --warn-soft: #fff4d6;   --warn-ink: #7c4a03;   --warn-solid: #f59e0b; --warn-on-solid: #1e1b4b;
    --bad-soft: #fdecec;    --bad-ink: #991b1b;    --bad-solid: #b91c1c;  --bad-on-solid: #ffffff;
    --info-soft: #eaf4ff;   --info-ink: #0a56a3;
    --neutral-soft: #f1f0f7; --neutral-ink: #3b3866;

    /* grade meter fills (graphics; always paired with a text label) */
    --g-top: #15803d;
    --g-good: #16a34a;
    --g-mid: #a3a0bd;
    --g-low: #d97706;
    --g-bad: #dc2626;
    --g-empty: #e4e2ee;
    --star: #b45309;

    /* type */
    --font-display: "Fraunces", "Fraunces Fallback", ui-serif, Georgia, serif;
    --font-sans: "Figtree", "Figtree Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --text-xs: .75rem;    --leading-xs: 1rem;
    --text-sm: .875rem;   --leading-sm: 1.25rem;
    --text-base: 1rem;    --leading-base: 1.55;
    --text-lg: 1.125rem;  --leading-lg: 1.75rem;
    --text-xl: 1.25rem;   --leading-xl: 1.75rem;
    --text-2xl: 1.5rem;   --leading-2xl: 2rem;
    --text-3xl: 1.875rem; --leading-3xl: 2.25rem;
    --text-4xl: 2.5rem;   --leading-4xl: 2.75rem;
    --text-5xl: 3rem;     --leading-5xl: 3.25rem;
    --text-hero: clamp(2.5rem, 6vw, 4.5rem);
    --text-h1: clamp(2.125rem, 4.6vw, 3.25rem);
    --text-h2: clamp(1.625rem, 3.2vw, 2.25rem);
    --text-stat: clamp(2rem, 5vw, 3.25rem);
    --text-card: 1.0625rem; --leading-card: 1.5rem; /* nursery name in a list: 17/24 */
    --text-label: .8125rem; --leading-label: 1.125rem; /* 13/18: badges, sub-labels */
    --measure: 65ch;

    /* spacing */
    --sp-0_5: .125rem; --sp-1: .25rem; --sp-1_5: .375rem; --sp-2: .5rem; --sp-3: .75rem;
    --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem;
    --sp-12: 3rem; --sp-16: 4rem; --sp-24: 6rem;
    --section-gap: var(--sp-12);

    /* sizes */
    --h-control: 44px;
    --h-control-sm: 36px;
    --h-control-lg: 52px;
    --h-header: 64px;
    --h-tabs: 48px;
    --container: 76rem;
    --gutter: 1rem;
    --rail: 16rem;
    --sidebar: 23rem;

    /* radius: controls 12, cards 20, blocks 28, pills for buttons/chips/search */
    --radius: .75rem;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-full: 9999px;

    /* shadows: two soft indigo-tinted levels, for floating things only */
    --shadow-xs: 0 1px 2px rgb(30 27 75 / .06);
    --shadow-md: 0 1px 2px rgb(30 27 75 / .06), 0 8px 24px rgb(30 27 75 / .08);
    --shadow-lg: 0 2px 4px rgb(30 27 75 / .06), 0 20px 48px -8px rgb(30 27 75 / .20);
    --shadow-up: 0 -8px 24px -12px rgb(30 27 75 / .22);

    /* motion */
    --dur-fast: 150ms;
    --dur-med: 220ms;
    --dur-slow: 350ms;
    --ease-out: cubic-bezier(0.24, 1, 0.4, 1);
    --ease-in: cubic-bezier(0.3, 0, 0.6, 0.6);
  }

  @media (min-width: 640px) { :root { --gutter: 1.5rem; } }
  @media (min-width: 768px) { :root { --section-gap: var(--sp-16); } }
  @media (min-width: 1024px) { :root { --gutter: 2rem; } }

  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
    --background: #0f0e1a; --foreground: #f2f1fa; --card: #1a1830; --popover: #1f1d38; --sunken: #141324; --muted: #26243f;
    --muted-foreground: #bcb9dc; --subtle-foreground: #9e9bc2; --border: rgb(255 255 255 / .10); --input: #77739c; --ring: #a19cff;
    --primary: #8b85ff; --primary-hover: #a19cff; --primary-foreground: #0f0e1a; --secondary: #26243f; --accent: #26243f;
    --brand: #8b85ff; --brand-ink: #f2f1fa; --brand-soft: #24224a; --on-brand: #0f0e1a; --destructive: #f87171;
    --destructive-foreground: #0f0e1a; --sun: rgb(255 200 61 / .18);   --sun-soft: #221d1b;   --sun-deep: #ffd36b;
    --peach: rgb(255 175 140 / .18); --peach-soft: #241a24; --peach-deep: #ffb59a;
    --mint: rgb(110 220 165 / .16); --mint-soft: #142321;  --mint-deep: #86e3b6;
    --sky: rgb(120 180 255 / .18);  --sky-soft: #141e33;   --sky-deep: #9ccbff;
    --lilac: rgb(170 150 255 / .2); --lilac-soft: #1d1938; --lilac-deep: #c9b8ff; --coral: #e0805f; --ink-band: #17152b;
    --ink-band-fg: #f2f1fa; --ink-band-muted: #bcb9dc; --ink-band-line: rgb(255 255 255 / .10);
    --pal0-bg: #2a1e2c; --pal0-1: #d9a335; --pal0-2: #cf6f52; --pal0-3: #8b85ff; --pal0-4: #4a2f3b;
    --pal1-bg: #142826; --pal1-1: #3f9a75; --pal1-2: #2b4a6b; --pal1-3: #8fe3bc; --pal1-4: #c9a23a;
    --pal2-bg: #172238; --pal2-1: #3c6fa8; --pal2-2: #4b3f86; --pal2-3: #aaa5ff; --pal2-4: #c2725a;
    --pal3-bg: #221b3c; --pal3-1: #6b58b8; --pal3-2: #c9a23a; --pal3-3: #e7e4ff; --pal3-4: #4d3a59;
    --ok-soft: #0f2a1d;   --ok-ink: #86efac; --warn-soft: #2b2010; --warn-ink: #fcd34d; --bad-soft: #2f1219;  --bad-ink: #fca5a5;
    --info-soft: #132037; --info-ink: #9ccbff; --neutral-soft: #26243f; --neutral-ink: #e4e2f5; --g-mid: #6e6a92; --g-empty: #39365a;
    --star: #fbbf24; --shadow-xs: 0 0 0 0 transparent; --shadow-md: 0 0 0 1px var(--border), 0 8px 24px rgb(0 0 0 / .35);
    --shadow-lg: 0 0 0 1px var(--border), 0 20px 48px -8px rgb(0 0 0 / .55); --shadow-up: 0 -1px 0 0 var(--border);
    }
  }

  :root[data-theme="dark"] {
    --background: #0f0e1a; --foreground: #f2f1fa; --card: #1a1830; --popover: #1f1d38; --sunken: #141324; --muted: #26243f;
    --muted-foreground: #bcb9dc; --subtle-foreground: #9e9bc2; --border: rgb(255 255 255 / .10); --input: #77739c; --ring: #a19cff;
    --primary: #8b85ff; --primary-hover: #a19cff; --primary-foreground: #0f0e1a; --secondary: #26243f; --accent: #26243f;
    --brand: #8b85ff; --brand-ink: #f2f1fa; --brand-soft: #24224a; --on-brand: #0f0e1a; --destructive: #f87171;
    --destructive-foreground: #0f0e1a; --sun: rgb(255 200 61 / .18);   --sun-soft: #221d1b;   --sun-deep: #ffd36b;
    --peach: rgb(255 175 140 / .18); --peach-soft: #241a24; --peach-deep: #ffb59a;
    --mint: rgb(110 220 165 / .16); --mint-soft: #142321;  --mint-deep: #86e3b6;
    --sky: rgb(120 180 255 / .18);  --sky-soft: #141e33;   --sky-deep: #9ccbff;
    --lilac: rgb(170 150 255 / .2); --lilac-soft: #1d1938; --lilac-deep: #c9b8ff; --coral: #e0805f; --ink-band: #17152b;
    --ink-band-fg: #f2f1fa; --ink-band-muted: #bcb9dc; --ink-band-line: rgb(255 255 255 / .10);
    --pal0-bg: #2a1e2c; --pal0-1: #d9a335; --pal0-2: #cf6f52; --pal0-3: #8b85ff; --pal0-4: #4a2f3b;
    --pal1-bg: #142826; --pal1-1: #3f9a75; --pal1-2: #2b4a6b; --pal1-3: #8fe3bc; --pal1-4: #c9a23a;
    --pal2-bg: #172238; --pal2-1: #3c6fa8; --pal2-2: #4b3f86; --pal2-3: #aaa5ff; --pal2-4: #c2725a;
    --pal3-bg: #221b3c; --pal3-1: #6b58b8; --pal3-2: #c9a23a; --pal3-3: #e7e4ff; --pal3-4: #4d3a59;
    --ok-soft: #0f2a1d;   --ok-ink: #86efac; --warn-soft: #2b2010; --warn-ink: #fcd34d; --bad-soft: #2f1219;  --bad-ink: #fca5a5;
    --info-soft: #132037; --info-ink: #9ccbff; --neutral-soft: #26243f; --neutral-ink: #e4e2f5; --g-mid: #6e6a92; --g-empty: #39365a;
    --star: #fbbf24; --shadow-xs: 0 0 0 0 transparent; --shadow-md: 0 0 0 1px var(--border), 0 8px 24px rgb(0 0 0 / .35);
    --shadow-lg: 0 0 0 1px var(--border), 0 20px 48px -8px rgb(0 0 0 / .55); --shadow-up: 0 -1px 0 0 var(--border);
  }
}
/* honeypot field: off-screen for people, filled by bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }