/* Design tokens — the single place to change the look.
 *
 * Palette / type / shape below come from the Google Stitch export
 * ("Serene Path" theme — docs/design.md §6 pass 2). This is the ONLY file that
 * carries raw values; components reference these variables, never literals.
 *
 * Contrast: Stitch's own semantic hues (success/warning/danger) are calm but do
 * NOT clear WCAG AA as text on light surfaces. They stay as-is for fills, icons
 * and large marks; the darker `-ink` variants are for text. Ratios recorded in
 * docs/accessibility.md.
 */

:root {
  color-scheme: light;

  /* Palette — light */
  --color-bg: #f7f9f9;
  --color-surface: #ffffff;
  --color-surface-sunken: #eeedf2; /* inset wells: sentence bar, card image area */
  --color-text: #2d3436;
  --color-text-muted: #636e72;

  --color-primary: #3a5d8b;
  --color-primary-contrast: #ffffff;
  --color-primary-soft: #d4e3ff; /* selected/press ring, not a text colour */

  --color-secondary: #3e6658;
  --color-secondary-soft: #c0ecda; /* active tab / toggle-on wash */

  --color-success: #7fb069;
  --color-success-ink: #4a7a33; /* success text — 5.09:1 on white */
  --color-warning: #e6a23c;
  --color-warning-ink: #8a5a00; /* warning text — 5.93:1 on white */
  --color-danger: #d66853;
  --color-danger-ink: #a63a25; /* danger text (caregiver only) — 6.45:1 on white */

  --color-focus: #4a90e2;
  --color-border: #dcdfe6; /* hairline dividers / card outlines (decorative) */
  --color-border-strong: #737780; /* input outlines — needs >= 3:1 */

  /* AAC part-of-speech colour coding (Modified Fitzgerald Key, softened to
     clear WCAG AA as a border/text against --color-surface — see
     docs/accessibility.md). Applied to a card's border + image tint in
     frontend/js/modules/aac/board.js when the card has a part_of_speech;
     falls back to the card's category colour otherwise. */
  --pos-pronoun: #9a7b00; /* yellow — אני, אתה */
  --pos-verb: #2f7d32; /* green — רוצה, לאכול */
  --pos-adjective: #2563a5; /* blue — גדול, חם */
  --pos-noun: #b25a12; /* orange — כדור, אמא */
  --pos-social: #a8407a; /* pink — שלום, תודה */
  --pos-question: #7345c4; /* purple — מה, איפה */
  --pos-negation: #b3261e; /* red — לא, מספיק */
  --pos-little: #5a6470; /* grey — על, עם */
  --pos-adverb: #7a5230; /* brown — עכשיו, שוב */

  /* Spacing scale — unchanged (Stitch echoed it exactly) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* Radii — corrected against the actual Stitch export (docs/design/stitch-export/),
     not the placeholder guess. Its Tailwind config resolves rounded-lg to 8px and
     rounded-xl to 12px (the dominant radius, 114 uses across 14 screens); 16/24px
     show up on cards/tiles less consistently. --radius-xl covers the biggest
     User-Mode tiles/modals. */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Type */
  --font-sans: "Rubik", "Assistant", "Heebo", system-ui, -apple-system, "Segoe UI",
    Arial, sans-serif;
  --text-sm: 0.9rem;
  --text-base: 1.125rem;
  --text-lg: 1.4rem;
  --text-xl: 1.9rem;
  --text-2xl: 2.6rem;
  --font-weight-heading: 500; /* Stitch sets 500 on every heading, not 700 */

  /* User Mode: minimum interactive target */
  --touch-min: 60px;
  /* Caregiver / org screens: an adult on a phone or tablet still needs a
     finger-sized target (WCAG 2.5.5's 44px), just not the child's 60px. */
  --touch-min-caregiver: 44px;

  /* Device safe areas (notch, home indicator, rounded corners) — index.html's
     viewport-fit=cover lets the page draw under them, so anything pinned to
     a screen edge adds the matching inset. 0px on a device without one. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  /* Height of the on-screen keyboard over the page (js/keyboard.js sets it
     from visualViewport), so fixed bottom UI can sit above it. 0px when the
     browser already shrinks the page for the keyboard, or there is none. */
  --kb-inset: 0px;

  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.16);
}

/* Dark — a genuine dark theme. Values derived from the Material-3 tokens Stitch
   emitted (inverse-surface, inverse-primary, on-primary-fixed…), kept calm. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #131518;
    --color-surface: #1e2126;
    --color-surface-sunken: #0e1013;
    --color-text: #e8e9ec;
    --color-text-muted: #b4b8c0;

    --color-primary: #a6c8fd;
    --color-primary-contrast: #001c3a;
    --color-primary-soft: #234875;

    --color-secondary: #a5d0be;
    --color-secondary-soft: #264e41;

    /* semantic hues already clear 7:1 on dark surfaces, so ink == base */
    --color-success: #8fcb79;
    --color-success-ink: #8fcb79;
    --color-warning: #efbf70;
    --color-warning-ink: #efbf70;
    --color-danger: #f0968a;
    --color-danger-ink: #f0968a;

    --color-focus: #8fc0ff;
    --color-border: #3a3f47;
    --color-border-strong: #8c929e;

    /* Lightened for 4.5:1+ against the dark --color-surface. */
    --pos-pronoun: #e0c34d;
    --pos-verb: #8fcb79;
    --pos-adjective: #8fc0ff;
    --pos-noun: #f0b27a;
    --pos-social: #e6a0c4;
    --pos-question: #c6a8f0;
    --pos-negation: #f0968a;
    --pos-little: #b4b8c0;
    --pos-adverb: #d0a983;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration: 0.001ms;
  }
}