/* Design tokens - game-for-kids. Owner: ui-designer (L5). Freeze item 4 (PLAN 3.1): names are a contract (additive only,
 * renames need an ADR); values may be tuned with a note in docs/ui-spec.md, which also lists every contrast ratio.
 * Light look only: night is --daylight on .stage; HUD, tray and dialogs never dim. No component selectors here.
 * Dynamic values via style.setProperty (CSP-safe): --daylight, --look-x/-y, --tint, palette keys, --hold-progress. */

/* Registered so they can transition. */
@property --daylight {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --look-x {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --look-y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --hold-progress {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root {
  color-scheme: light only;

  /* 1. UI colour roles (child areas) */
  --c-paper: #fff7e8;        /* Start/Home/tray backing; ink on it 14.0:1 */
  --c-paper-2: #ffeccc;      /* sunken areas, tray gutter */
  --c-ink: #2a2438;          /* text and strongest outline; 14.0:1 on paper */
  --c-ink-2: #5a5068;        /* secondary text; 7.1:1 on paper */
  --c-line: #3a2f4a;         /* icon + button outline; >= 6.2:1 on every face/backing below */
  --c-face: #ffffff;         /* HUD / tray tile face; line on it 12.5:1 */
  --c-play: #ffb627;         /* Start play button (sun); line on it 7.1:1 */
  --c-ring: #c2410c;         /* hold progress ring; 5.2:1 on --c-ring-track */
  --c-ring-track: #ffffff;   /* ring track (always under the progress) */
  --c-glow: #ffd84d;         /* sweep-back glow, zone glow, tray twinkle */
  --c-basket: #f3c98b;       /* care-item round backing; line on it 8.0:1 */
  --c-basket-line: #8a5a2b;  /* basket weave/edge (decor); 3.8:1 on basket */
  --c-bubble: #ffffff;       /* thought bubbles */
  --c-heart: #e5484d;        /* friendship hearts (outlined with --c-line) */
  --c-scrim: rgb(42 36 56 / 0.45); /* behind gate/settings/rotate hint */

  /* Home background */
  --c-home-top: #cfeefe;
  --c-home-bottom: #e9f8d6;

  /* Theme button backings: one per theme id (ADR 0010 D1), fixed so children learn positions by picture AND colour. */
  --c-theme-farm: #f7c873;
  --c-theme-animals: #f2a65a;
  --c-theme-cars: #8ec5ff;
  --c-theme-parcels: #c9a27e;
  --c-theme-city: #b7b3e6;
  --c-theme-village: #f4a7a0;
  --c-theme-nature: #9fd98a;
  --c-theme-abc: #ffe066;
  --c-theme-shapes: #f6a6d6;

  /* 2. Grown-ups colour roles (gate, settings) - text >= 4.5:1 */
  --c-adult-bg: #f6f4f9;     /* page */
  --c-adult-surface: #ffffff;/* cards, rows */
  --c-adult-ink: #1f1b2b;    /* body text; 15.4:1 on bg */
  --c-adult-muted: #4f4862;  /* hints; 7.9:1 on bg, 8.6:1 on surface */
  --c-adult-border: #8a8399; /* control borders (non-text, 3.6:1 on surface) */
  --c-adult-accent: #3d5bd9; /* selected segment, slider, primary button; white text 5.7:1 */
  --c-adult-on-accent: #ffffff;
  --c-adult-danger: #b42318; /* reset buttons (outline + text); 6.6:1 on surface */

  /* 3. Scene palette keys (frozen names). Defaults here; each theme */
  --sky: #bfe6ff;
  --sky-far: #e4f4ff;        /* horizon band */
  --ground: #9fd36b;
  --ground-far: #c4e59a;     /* hills / far field */
  --water: #6cc4f0;
  --road: #8e8a99;
  --rail: #7a5a3a;
  --accent: #ffb627;         /* sparkle + zone-glow colour per theme (SPEC 7) */
  --night-sky: #2a3a6b;      /* sky colour blended in as --daylight drops */
  --night-tint: #4a5aa8;     /* multiply tint over the stage at night */
  --night-tint-max: 0.7;     /* tint opacity at --daylight-min; scales linearly to 0 at 1 */
  --window-light: #ffd27a;   /* warm window/lamp light at night */

  /* Per-instance recolour (ADR 0002): art parts with class "tint" use fill: var(--tint). */
  --tint: #e2412f;

  /* Day/night (SPEC 3.15, ADR 0009): 1 day, 0.85 morning, 0.7 evening, 0.45 night; never below --daylight-min (SPEC 8). */
  --daylight: 1;
  --daylight-min: 0.4;

  /* Look-at (ARCH §5.2): unitless -1..1, written per entity at AI tick rate. */
  --look-x: 0;
  --look-y: 0;
  --look-eye-max: 3px;       /* pupil travel in art units */
  --look-head-max: 6deg;     /* head turn */

  /* 4. z bands (ARCH §5.6 zFor); .stage is its own stacking context */
  /* inside .stage */
  --z-backdrop: 0;
  --z-zones: 100;
  --z-entities: 1000;        /* entity z = 1000 + round(v * 500): 1000..1500 */
  --z-entities-span: 500;
  --z-held: 2000;            /* a held entity is always on top */
  --z-fx: 2500;              /* particles canvas above every entity */
  /* inside .app, above .stage */
  --z-stage: 0;
  --z-bubbles: 3000;
  --z-hud: 4000;             /* Home/Clear holds, tray, care group, gear */
  --z-hint: 4500;            /* rotate hint, first-run picture hints */
  --z-dialog: 5000;          /* gate/settings (also top layer via showModal) */

  /* 5. Spacing (4 px base) and sizes */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --target-min: 64px;        /* every child control (O5, D11) */
  --size-hold: 64px;         /* Home/Clear/gear face; layout.css may raise per band */
  --size-hold-icon: 36px;
  --ring-width: 6px;         /* progress ring stroke, outside the face */
  --ring-gap: 2px;           /* face edge to ring */
  --size-tray-item: 72px;    /* SPEC 3.1 minimum */
  --gap-tray: 12px;
  --gap-care-group: 24px;    /* visible gap before the care basket group */
  --size-tray-arrow: 64px;
  --size-play: 160px;        /* Start play button; layout may scale 128..200 */
  --size-theme-max: 300px;   /* Home theme button cap (H1: 220 left a small grid on tablets and desktops) */
  --gap-theme: 16px;
  --edge-keepout: 24px;      /* OS edge gestures (SPEC 8) */
  --size-bubble: 96px;       /* bubble width; icon slot ~42 px (S7b: 72 made the icon 31 px) */
  --size-heart: 28px;

  /* 6. Radii, outlines, shadows */
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 24px;          /* theme buttons, tray tiles' container */
  --radius-xl: 32px;         /* tray strip top corners, dialogs */
  --radius-tile: 20px;       /* tray tiles */
  --radius-round: 50%;
  --stroke-ui: 3px;          /* outline of child buttons and tiles */
  --stroke-adult: 2px;       /* grown-ups control borders */

  /* "Toy" look: chunky offset shadow, no blur halos (cheap to paint). */
  --shadow-toy: 0 4px 0 rgb(58 47 74 / 0.28);
  --shadow-toy-pressed: 0 1px 0 rgb(58 47 74 / 0.28);
  --shadow-toy-raised: 0 6px 0 rgb(58 47 74 / 0.28);   /* mouse hover lift */
  /* Glow halo (undo, asked, chosen): yellow alone is ~1.1:1 on sky/paper, the --c-ring edge 3.9 / 4.9:1. */
  --shadow-glow: 0 0 0 6px var(--c-glow), 0 0 0 8px var(--c-ring);
  --shadow-glow-big: 0 0 0 10px var(--c-glow), 0 0 0 12px var(--c-ring);
  --shadow-lift: drop-shadow(0 10px 6px rgb(58 47 74 / 0.25)); /* held entity (filter) */
  --shadow-dialog: 0 12px 32px rgb(42 36 56 / 0.25);

  /* 7. Focus ring (keyboard; both child HUD/tray and grown-ups UI). */
  --c-focus: #1f5fd6;
  --c-focus-halo: #ffffff;
  --focus-width: 4px;
  --focus-offset: 3px;

  /* 8. Type. System fonts only (CSP font-src 'self', no font files). */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --text-s: 16px;            /* minimum anywhere */
  --text-m: 18px;            /* body in settings, gate instruction */
  --text-l: 22px;            /* section titles, gate title */
  --text-xl: 28px;           /* settings page title, keypad digits */
  --leading-tight: 1.2;
  --leading-body: 1.45;
  --weight-body: 400;
  --weight-strong: 700;
  --measure: 40rem;          /* max width of grown-ups content */

  /* 9. Motion (durations from SPEC; easing names are a contract) */
  --dur-instant: 120ms;      /* press feedback, sound retrigger window */
  --dur-fast: 200ms;         /* nudge inside play area, hidden-page fade */
  --dur-base: 300ms;         /* spawn fall-and-bounce, UI state changes */
  --dur-leave: 400ms;        /* evicted entity shrink+fade */
  --dur-slow: 600ms;         /* layer glide, hold hint ring */
  --dur-theme-open: 700ms;   /* Home theme tap -> scene */
  --dur-hold: 800ms;         /* Home/Clear/Escape hold */
  --dur-clear: 900ms;        /* clear cascade */
  --dur-hearts: 1500ms;      /* heart row visible */
  --dur-daynight: 1500ms;    /* day/night crossfade (taps ignored meanwhile) */
  --dur-breathe: 3000ms;     /* Start button breathing cycle */
  --dur-pulse: 1000ms;       /* any glow pulse; never faster (<= 1 Hz, SPEC 8) */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --scale-press: 0.94;       /* HUD/tile press */
  --scale-lift: 1.1;         /* entity press lift (SPEC 3.1) */
  --scale-breathe: 1.06;     /* Start button breathe peak */
  --wiggle-angle: 8deg;      /* plain-tap hint on hold buttons */
}

/* Reduced motion (SPEC 8): no bouncy scaling, no breathing, no wiggle rotation; durations stay so crossfades still read. */
html[data-reduced-motion] {
  --ease-bounce: var(--ease-out);
  --scale-press: 1;
  --scale-lift: 1;
  --scale-breathe: 1;
  --wiggle-angle: 0deg;
}