/* Heritage Kids design tokens. The single source of every visual value.
   The build copies this file byte for byte into the app (src/styles/tokens.css).
   Light on :root and [data-theme="light"]; dark on [data-theme="dark"] and on the
   system dark preference when no theme is chosen. Neutrals are warm (clay and cream);
   the one accent is adire indigo. Three mascots: Lúlú (Yoruba), Bụmbụ (Igbo) and Dhinu (Hindi).
   Each world is an adventure journey of places, each with a local character (our own art). */

:root, [data-theme="light"] {
  /* Neutral ramp, warm */
  --color-bg: #fbf6ee;
  --color-surface: #fffcf7;
  --color-surface-raised: #fffefb;
  --color-surface-sunken: #f3ebdf;
  --color-border: #e6dccc;
  --color-border-strong: #8c7a63;
  --color-text: #2a2118;
  --color-text-muted: #66584a;
  --color-text-disabled: #a39684;
  --color-overlay: #2a2118;

  /* Accent: adire indigo */
  --color-accent: #33429e;
  --color-accent-hover: #283584;
  --color-accent-text: #fffcf7;
  --color-accent-soft: #e8eaf7;
  --color-accent-soft-text: #283584;
  --color-focus: #33429e;

  /* Status */
  --color-success: #2b6a3d;
  --color-success-soft: #e2f0e5;
  --color-warning: #85570a;
  --color-warning-soft: #f9ecd2;
  --color-danger: #b3261e;
  --color-danger-hover: #951f19;
  --color-danger-text: #fffcf7;
  --color-danger-soft: #fbe6e2;
  --color-info: #155e66;
  --color-info-soft: #def0f0;

  /* Lúlú the talking drum, and picture-card art */
  --color-mascot-wood: #b9733a;
  --color-mascot-wood-shade: #94592a;
  --color-mascot-skin: #f4e2c1;
  --color-mascot-cord: #5e3719;
  --color-mascot-ink: #2a2118;
  --color-mascot-cheek: #e9967c;
  --color-art-warm: #e88a3c;
  --color-art-cool: #8fb2dd;
  --color-art-leaf: #7aa85a;
  --color-art-cream: #fff4dc;

  /* Dhinu the little tabla (Hindi world) */
  --color-dhinu-wood: #9a4f32;
  --color-dhinu-shade: #763a24;
  --color-dhinu-skin: #f1e4c8;
  --color-dhinu-syahi: #2a2118;
  --color-dhinu-strap: #4a2c1d;
  --color-dhinu-marigold: #e9a23b;

  /* Bụmbụ the little udu clay-pot drum (Igbo world) */
  --color-bumbu-clay: #bf5b3f;
  --color-bumbu-shade: #8e3f2a;
  --color-bumbu-skin: #f6e3cc;
  --color-bumbu-mouth: #3b2117;
  --color-bumbu-uli: #fbf1e2;
  --color-bumbu-omu: #8aa23f;

  /* Stars: earned per conversation, never taken away */
  --color-star: #a8640a;

  /* Days in a row (Update 4): the drum-ring icon and chip. Earned only; a missed day never shows a loss */
  --color-run: #8f5420;
  --color-run-soft: #f6e7d3;

  /* Map plots (Update 5): one plot fills per finished talk, 24 per world. Earned only */
  --color-plot-path: #efe5d6;
  --color-plot-empty: #8a7458;

  /* Adventure journey (Update 6): the path of places, the next stop, the stickers and the local characters */
  --color-place-glow: #f5d37a;
  --color-sticker-edge: #fffefb;
  --color-person-skin: #a86c43;
  --color-person-shade: #84502e;
  --color-person-hair: #2a2118;
  --color-person-grey: #d8d0c4;

  /* Type */
  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Bricolage Grotesque", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-deva: "Baloo 2", "Noto Sans Devanagari", ui-sans-serif, system-ui, sans-serif;
  --font-igbo: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-deva: 1.45;
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Space, 4 px base */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Sizes */
  --size-icon-sm: 16px;
  --size-icon: 20px;
  --size-icon-lg: 28px;
  --size-control-sm: 36px;
  --size-control: 44px;
  --size-control-lg: 52px;
  --size-touch: 44px;
  --size-touch-child: 64px;
  --size-talk: 168px;
  --size-avatar: 40px;
  --size-avatar-lg: 56px;
  --size-mascot-sm: 56px;
  --size-mascot: 132px;
  --size-mascot-lg: 196px;
  --size-run-icon: 28px;
  --size-step-dot: 8px;
  --size-today-face: 64px;
  --size-place: 64px;
  --size-place-next: 76px;
  --size-pin: 40px;
  --size-sticker: 88px;
  --size-person: 168px;

  /* Shape: one radius family */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;
  --border-hairline: 1px;
  --border-strong: 2px;
  --border-focus: 2px;

  /* Elevation: warm-tinted, soft and layered */
  --shadow-sm: 0 0 0 1px #2a21180a, 0 1px 2px #2a21180f;
  --shadow-md: 0 0 0 1px #2a21180a, 0 2px 6px #2a21180d, 0 6px 16px #2a218014;
  --shadow-lg: 0 0 0 1px #2a21180a, 0 8px 24px #2a218017, 0 24px 48px #2a21181a;
  --shadow-talk: 0 0 0 6px #33429e1f, 0 10px 30px #33429e38;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-reveal: 800ms;
  --duration-scene: 12000ms;
  --duration-dance: 1200ms;
  --duration-coach: 1600ms;
  --duration-plot-fill: 900ms;
  /* Adventure journey (Update 6): the trip to a place, the sticker that lands, the glow of the next stop */
  --duration-travel: 2400ms;
  --duration-sticker: 700ms;
  --duration-glow: 2000ms;
  /* Tap to talk (Update 5): on-device silence detection stops the clip; a hard stop at 30 s */
  --duration-silence: 1500ms;
  --duration-talk-max: 30000ms;
  --motion-press-scale: 0.96;
  --motion-rise: 20px;
  --motion-stagger: 70ms;
  --motion-shake: 6px;

  /* Layers and layout */
  --z-base: 0;
  --z-sticky: 10;
  --z-overlay: 40;
  --z-toast: 50;
  --z-coach: 45;
  --layout-max: 1200px;
  --layout-prose: 68ch;
  --layout-narrow: 440px;
  --layout-form: 560px;
  --layout-nav-height: 64px;
  --layout-tabbar-height: 64px;
  --layout-gutter: 16px;
  --layout-gutter-wide: 32px;

  /* Platform conventions: iOS (Human Interface Guidelines) and Android (Material 3).
     One brand system; only the bars, sheets, dialogs and app icons differ. */
  --layout-ios-navbar-height: 44px;
  --layout-ios-tabbar-height: 49px;
  --layout-m3-topbar-height: 64px;
  --layout-m3-navbar-height: 80px;
  --text-ios-large-title: 2.125rem;
  --text-ios-body: 1.0625rem;
  --text-ios-caption: 0.625rem;
  --text-m3-title: 1.375rem;
  --radius-ios-sheet: 14px;
  --radius-ios-alert: 14px;
  --radius-m3-sheet: 28px;
  --radius-m3-dialog: 28px;
  --radius-app-icon: 22.5%;
  --size-m3-icon-button: 48px;
  --size-m3-indicator: 64px;
  --size-app-icon: 60px;
  --size-app-icon-lg: 120px;
  --size-launch-icon: 128px;
}

/* Safe areas (the notch or Dynamic Island, the punch-hole camera, the home indicator and
   the gesture bar). Declared on every themed root, so a themed subtree reads its own values.
   The app reads env() (the page sets viewport-fit=cover). --ds-safe-* is set only by the
   design viewer to draw the iPhone and Pixel frames; the build never sets it. */
:root, [data-theme] {
  --layout-safe-top: max(env(safe-area-inset-top, 0px), var(--ds-safe-top, 0px));
  --layout-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--ds-safe-bottom, 0px));
}

[data-theme="dark"] {
  --color-bg: #17130f;
  --color-surface: #201b16;
  --color-surface-raised: #2a241e;
  --color-surface-sunken: #120f0c;
  --color-border: #3a322a;
  --color-border-strong: #85776a;
  --color-text: #f3ebdf;
  --color-text-muted: #bcae9c;
  --color-text-disabled: #73685b;
  --color-overlay: #0b0907;
  --color-accent: #9ba6e6;
  --color-accent-hover: #b3bcee;
  --color-accent-text: #17130f;
  --color-accent-soft: #262b49;
  --color-accent-soft-text: #c6ccf4;
  --color-focus: #9ba6e6;
  --color-success: #84c695;
  --color-success-soft: #1b3122;
  --color-warning: #e3b562;
  --color-warning-soft: #3a2c13;
  --color-danger: #f08f84;
  --color-danger-hover: #f5aaa1;
  --color-danger-text: #17130f;
  --color-danger-soft: #3d1e1a;
  --color-info: #76c6cc;
  --color-info-soft: #14302f;
  --color-mascot-wood: #c7844c;
  --color-mascot-wood-shade: #9c6233;
  --color-mascot-skin: #ead3aa;
  --color-mascot-cord: #3c2311;
  --color-mascot-ink: #2a2118;
  --color-mascot-cheek: #dc8a72;
  --color-art-warm: #e0904f;
  --color-art-cool: #7f9fca;
  --color-art-leaf: #6f9a51;
  --color-art-cream: #3a3226;
  --color-dhinu-wood: #b06444;
  --color-dhinu-shade: #874a30;
  --color-dhinu-skin: #e6d5b1;
  --color-dhinu-syahi: #2a2118;
  --color-dhinu-strap: #3a2216;
  --color-dhinu-marigold: #d9973a;
  --color-bumbu-clay: #cd6e50;
  --color-bumbu-shade: #9b4a33;
  --color-bumbu-skin: #ead6b8;
  --color-bumbu-mouth: #2a1710;
  --color-bumbu-uli: #f3e6d2;
  --color-bumbu-omu: #7f9638;
  --color-star: #e9b44c;
  --color-run: #e3a565;
  --color-run-soft: #33261a;
  --color-plot-path: #2c251f;
  --color-plot-empty: #8c7d6c;
  --color-place-glow: #5c4718;
  --color-sticker-edge: #efe6d8;
  --color-person-skin: #b0714a;
  --color-person-shade: #8a5634;
  --color-person-hair: #1f1913;
  --color-person-grey: #cfc6b8;
  --shadow-sm: 0 0 0 1px #f3ebdf0d;
  --shadow-md: 0 0 0 1px #f3ebdf12, 0 4px 12px #00000040;
  --shadow-lg: 0 0 0 1px #f3ebdf14, 0 12px 32px #00000059;
  --shadow-talk: 0 0 0 6px #9ba6e624, 0 10px 30px #00000059;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #17130f;
    --color-surface: #201b16;
    --color-surface-raised: #2a241e;
    --color-surface-sunken: #120f0c;
    --color-border: #3a322a;
    --color-border-strong: #85776a;
    --color-text: #f3ebdf;
    --color-text-muted: #bcae9c;
    --color-text-disabled: #73685b;
    --color-overlay: #0b0907;
    --color-accent: #9ba6e6;
    --color-accent-hover: #b3bcee;
    --color-accent-text: #17130f;
    --color-accent-soft: #262b49;
    --color-accent-soft-text: #c6ccf4;
    --color-focus: #9ba6e6;
    --color-success: #84c695;
    --color-success-soft: #1b3122;
    --color-warning: #e3b562;
    --color-warning-soft: #3a2c13;
    --color-danger: #f08f84;
    --color-danger-hover: #f5aaa1;
    --color-danger-text: #17130f;
    --color-danger-soft: #3d1e1a;
    --color-info: #76c6cc;
    --color-info-soft: #14302f;
    --color-mascot-wood: #c7844c;
    --color-mascot-wood-shade: #9c6233;
    --color-mascot-skin: #ead3aa;
    --color-mascot-cord: #3c2311;
    --color-mascot-ink: #2a2118;
    --color-mascot-cheek: #dc8a72;
    --color-art-warm: #e0904f;
    --color-art-cool: #7f9fca;
    --color-art-leaf: #6f9a51;
    --color-art-cream: #3a3226;
    --color-dhinu-wood: #b06444;
    --color-dhinu-shade: #874a30;
    --color-dhinu-skin: #e6d5b1;
    --color-dhinu-syahi: #2a2118;
    --color-dhinu-strap: #3a2216;
    --color-dhinu-marigold: #d9973a;
    --color-bumbu-clay: #cd6e50;
    --color-bumbu-shade: #9b4a33;
    --color-bumbu-skin: #ead6b8;
    --color-bumbu-mouth: #2a1710;
    --color-bumbu-uli: #f3e6d2;
    --color-bumbu-omu: #7f9638;
    --color-star: #e9b44c;
    --color-run: #e3a565;
    --color-run-soft: #33261a;
    --color-plot-path: #2c251f;
    --color-plot-empty: #8c7d6c;
    --color-place-glow: #5c4718;
    --color-sticker-edge: #efe6d8;
    --color-person-skin: #b0714a;
    --color-person-shade: #8a5634;
    --color-person-hair: #1f1913;
    --color-person-grey: #cfc6b8;
    --shadow-sm: 0 0 0 1px #f3ebdf0d;
    --shadow-md: 0 0 0 1px #f3ebdf12, 0 4px 12px #00000040;
    --shadow-lg: 0 0 0 1px #f3ebdf14, 0 12px 32px #00000059;
    --shadow-talk: 0 0 0 6px #9ba6e624, 0 10px 30px #00000059;
  }
}