@layer base, legacy;

/* Samana's World design tokens.
   Load first. Components use the semantic tokens (--color-*, --text-*, --space-*);
   primitives (--teal-700 …) are for defining roles, not for direct use in components.
   See DESIGN_SYSTEM.md for usage rules. */

/* ---------- Fonts (self-hosted, SIL Open Font License; see assets/fonts/OFL-*.txt) ---------- */
@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/fraunces-var-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Andika';
  src: url('assets/fonts/andika-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Andika';
  src: url('assets/fonts/andika-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Naskh Arabic';
  src: url('assets/fonts/noto-naskh-arabic-var-arabic.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF;
}

:root {
  /* ---------- Colour primitives ---------- */
  /* Warm paper → ink neutrals */
  --paper-50: #fdfaf4;
  --paper-100: #f8f3ea;
  --paper-200: #efe6d6;
  --paper-300: #e2d6c1;
  --paper-400: #c9b99e;
  --ink-500: #8a8073;   /* decoration and disabled only: below 4.5:1 on paper */
  --ink-600: #635a50;   /* secondary text, 6:1 on paper-100 */
  --ink-800: #3b352f;
  --ink-900: #26221f;   /* primary text, 14:1 on paper-100 */

  /* Teal — brand, primary actions */
  --teal-50: #eef5f3;
  --teal-100: #d9e9e5;
  --teal-200: #b5d3cc;
  --teal-300: #8fbcb4;
  --teal-500: #3f7d74;
  --teal-700: #2e625d;
  --teal-800: #244e4a;
  --teal-900: #1a3a37;

  /* Honey — warmth, rewards, "try again" (never red for a child's mistake) */
  --honey-50: #fdf7ec;
  --honey-100: #fbefd8;
  --honey-200: #f6dfb3;
  --honey-300: #f0cd8a;
  --honey-500: #e2a94f;
  --honey-700: #9a6620;
  --honey-800: #7a4f15;

  /* Coral — gentle attention, Samana's accents */
  --coral-100: #fbe6e1;
  --coral-300: #f0b3a8;
  --coral-500: #d9786c;
  --coral-700: #a24f45;

  /* Leaf — correct answers */
  --leaf-100: #e3f0de;
  --leaf-300: #a9cf9e;
  --leaf-600: #3d7a4a;
  --leaf-800: #2a5634;

  /* Night — the story room */
  --night-800: #233042;
  --night-900: #1b2433;

  /* ---------- Semantic colour roles ---------- */
  --color-bg: var(--paper-100);
  --color-surface: var(--paper-50);
  --color-surface-sunken: var(--paper-200);
  --color-border: var(--paper-300);
  --color-border-strong: var(--paper-400);
  --color-text: var(--ink-900);
  --color-text-muted: var(--ink-600);
  --color-text-on-dark: var(--paper-50);

  --color-primary: var(--teal-700);
  --color-primary-hover: var(--teal-800);
  --color-primary-edge: var(--teal-900);
  --color-on-primary: var(--paper-50);
  --color-primary-soft: var(--teal-50);

  --color-accent: var(--honey-500);
  --color-accent-soft: var(--honey-100);
  --color-accent-edge: var(--honey-700);
  --color-on-accent: var(--ink-900);

  --color-correct-bg: var(--leaf-100);
  --color-correct-border: var(--leaf-600);
  --color-correct-text: var(--leaf-800);
  --color-retry-bg: var(--honey-50);
  --color-retry-border: var(--honey-500);
  --color-retry-text: var(--honey-800);

  --color-focus: #1f5fbf;          /* distinct from brand colours on light and dark surfaces */
  --color-focus-halo: var(--paper-50);

  /* ---------- Typography ---------- */
  --font-display: 'Fraunces', 'Noto Naskh Arabic', Georgia, serif;
  --font-text: 'Andika', 'Noto Naskh Arabic', 'Segoe UI', system-ui, sans-serif;
  --font-arabic: 'Noto Naskh Arabic', 'Andika', serif;

  --text-xs: 0.8125rem;   /* 13 — grown-up fine print only */
  --text-sm: 0.9375rem;   /* 15 — captions, meta */
  --text-md: 1.0625rem;   /* 17 — controls and body */
  --text-lg: 1.25rem;     /* 20 — child-facing labels, reading 6–8 */
  --text-xl: 1.5rem;      /* 24 — reading 3–5, card titles */
  --text-2xl: 1.875rem;   /* 30 — section headings */
  --text-3xl: 2.375rem;   /* 38 — screen headings */
  --text-4xl: 3rem;       /* 48 — hero */

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-body: 1.5;
  --leading-read: 1.6;

  --weight-regular: 400;
  --weight-bold: 700;
  --weight-display: 560;
  --tracking-display: -0.015em;
  --tracking-eyebrow: 0.09em;

  /* ---------- Space (4 px grid) ---------- */
  --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;
  --gutter: clamp(16px, 4vw, 40px);
  --content-max: 1080px;

  /* ---------- Shape ---------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --border-hair: 1px;
  --edge: 4px;              /* tactile bottom edge on pressable surfaces */

  /* ---------- Elevation (warm-tinted, never grey) ---------- */
  --shadow-1: 0 1px 2px rgb(38 34 31 / 0.06), 0 1px 1px rgb(38 34 31 / 0.04);
  --shadow-2: 0 2px 4px rgb(38 34 31 / 0.05), 0 8px 20px rgb(38 34 31 / 0.08);
  --shadow-3: 0 4px 10px rgb(38 34 31 / 0.06), 0 20px 44px rgb(38 34 31 / 0.13);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-press: 110ms;
  --dur-state: 200ms;
  --dur-enter: 340ms;
  --dur-scene: 560ms;

  /* ---------- Touch and layers ---------- */
  --tap-min: 48px;          /* every control */
  --tap-child: 64px;        /* primary child actions and answers */
  --z-scene: 1;
  --z-ui: 10;
  --z-screen: 30;
  --z-dialog: 60;
  --z-toast: 80;

  /* Legacy names used by existing stylesheets, remapped onto the system */
  --spring: var(--ease-spring);
}

/* Higher specificity than the legacy :root blocks so the remap wins regardless of load order. */
:root:root {
  --ui: var(--font-text);
  --read: var(--font-text);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press: 1ms;
    --dur-state: 1ms;
    --dur-enter: 1ms;
    --dur-scene: 1ms;
    --ease-spring: linear;
  }
}
body.reduced {
  --dur-press: 1ms;
  --dur-state: 1ms;
  --dur-enter: 1ms;
  --dur-scene: 1ms;
  --ease-spring: linear;
}

/* ---------- Base (lowest layer: legacy and components override it) ---------- */
@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body {
    font-family: var(--font-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-optical-sizing: auto;
  }
  ::selection {
    background: var(--honey-200);
    color: var(--ink-900);
  }
  /* One focus ring everywhere; zero specificity so components can refine it. */
  :where(button, a, select, input, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px var(--color-focus-halo);
  }
  :where([lang="ar"], [dir="rtl"]) {
    --font-text: 'Noto Naskh Arabic', 'Andika', 'Segoe UI', sans-serif;
    --leading-body: 1.75;
    --leading-read: 1.9;
  }

  /* Display type helper */
  .ds-display {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-variation-settings: 'SOFT' 100;
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-tight);
  }
  .ds-eyebrow {
    font: var(--weight-bold) var(--text-xs) / 1.2 var(--font-text);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-muted);
  }
}

/* ---------- Samana's World logo (samana-logo.js) ---------- */
.samana-logo {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.samana-logo .lg-ears,
.samana-logo .lg-planet {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  body:not(.reduced) .samana-logo .lg-ears {
    animation: logo-ears 1.1s var(--ease-spring) 0.35s both;
  }
  body:not(.reduced) .samana-logo .lg-planet {
    animation: logo-planet 3.2s ease-in-out 0.6s infinite;
  }
  body:not(.reduced) .samana-logo:hover .lg-ears {
    animation: logo-ears 0.9s var(--ease-spring) both;
  }
}
@keyframes logo-ears {
  0% { transform: rotate(0); }
  25% { transform: rotate(-9deg); }
  55% { transform: rotate(7deg); }
  80% { transform: rotate(-3deg); }
  100% { transform: rotate(0); }
}
@keyframes logo-planet {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-3px) rotate(-6deg); }
}