/* ==========================================================================
   Mimi & Sasa Story House — foundations
   Tokens, reset, typography. See DESIGN.md for the reasoning behind each value.
   ========================================================================== */

@font-face {
  font-family: 'Baloo 2';
  src: url('../fonts/baloo2-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* --------------------------------------------------------------- tokens -- */
:root {
  /* Bedtime is the signature theme; Daytime overrides below. */
  --bg: oklch(0.185 0.045 288);
  --bg-deep: oklch(0.135 0.04 288);
  --surface: oklch(0.255 0.048 288);
  --surface-2: oklch(0.315 0.052 288);
  --edge: oklch(0.4 0.045 288);
  --ink: oklch(0.965 0.014 90);
  --ink-soft: oklch(0.815 0.028 288);
  --ink-faint: oklch(0.68 0.032 288);
  --lamp: oklch(0.855 0.155 88); /* fills, glows, dots, rules */
  --lamp-text: oklch(0.855 0.155 88); /* the accent when it is type */
  --lamp-ink: oklch(0.22 0.06 288); /* text placed on --lamp */
  --ember: oklch(0.755 0.155 52);

  --sky-top: oklch(0.215 0.055 292);
  --sky-bottom: oklch(0.3 0.07 300);
  --hill-far: oklch(0.17 0.05 290);
  --hill-near: oklch(0.125 0.045 288);
  --star: oklch(0.95 0.06 95);
  --moon: oklch(0.93 0.07 95);
  --glow: 0.55; /* lantern bloom strength */
  --shadow-hue: 288;
  --shadow-a: 0.5;

  /* Series accents. Each is paired with a name in the UI, never colour alone. */
  --a-violet: oklch(0.72 0.13 300);
  --a-sky: oklch(0.76 0.11 235);
  --a-amber: oklch(0.76 0.13 65);
  --a-meadow: oklch(0.76 0.14 150);
  --a-lavender: oklch(0.76 0.1 315);
  --a-corn: oklch(0.74 0.12 265);
  --a-grass: oklch(0.78 0.15 135);
  --a-rose: oklch(0.75 0.13 15);
  --a-teal: oklch(0.76 0.11 195);
  --a-plum: oklch(0.72 0.12 340);
  --a-ember: oklch(0.75 0.15 50);

  /* Type ------------------------------------------------------------------ */
  --font-display: 'Baloo 2', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --font-body: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino,
    'Book Antiqua', 'Times New Roman', serif;

  --t-xs: 0.78rem;
  --t-sm: 0.875rem;
  --t-base: clamp(1rem, 0.97rem + 0.14vw, 1.075rem);
  --t-md: clamp(1.15rem, 1.09rem + 0.28vw, 1.35rem);
  --t-lg: clamp(1.45rem, 1.32rem + 0.62vw, 1.85rem);
  --t-xl: clamp(1.85rem, 1.6rem + 1.2vw, 2.55rem);
  --t-2xl: clamp(2.3rem, 1.85rem + 2.1vw, 3.5rem);
  --t-hero: clamp(2.6rem, 1.9rem + 3.2vw, 4.4rem);
  --lh-body: 1.62;

  /* Space ----------------------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: clamp(3rem, 2rem + 4vw, 5.5rem);
  --s-9: clamp(4rem, 2.5rem + 6vw, 8rem);

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 3rem);
  --measure: 68ch;
  --max: 1320px;

  /* Motion ---------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 160ms;
  --mid: 300ms;
  --slow: 620ms;

  /* Depth ----------------------------------------------------------------- */
  --z-raised: 10;
  --z-sticky: 100;
  --z-tabbar: 200;
  --z-popover: 300;
  --z-scrim: 400;
  --z-dialog: 500;

  --lift-1: 0 1px 2px oklch(0.1 0.03 var(--shadow-hue) / calc(var(--shadow-a) * 0.5)),
    0 4px 14px oklch(0.1 0.03 var(--shadow-hue) / calc(var(--shadow-a) * 0.5));
  --lift-2: 0 2px 4px oklch(0.1 0.03 var(--shadow-hue) / calc(var(--shadow-a) * 0.55)),
    0 14px 36px oklch(0.1 0.03 var(--shadow-hue) / calc(var(--shadow-a) * 0.7));
}

/* Daytime: same hue axis, lightness moves. Deliberately periwinkle, not cream. */
:root[data-theme='day'] {
  --bg: oklch(0.925 0.032 268);
  --bg-deep: oklch(0.875 0.045 268);
  --surface: oklch(0.98 0.012 268);
  --surface-2: oklch(0.945 0.022 268);
  --edge: oklch(0.845 0.038 268);
  --ink: oklch(0.275 0.055 288);
  --ink-soft: oklch(0.435 0.048 288);
  --ink-faint: oklch(0.472 0.045 288);
  /* On a light surface the lamp has to carry two jobs: accent text, and the
     fill behind --lamp-ink. A mid amber clears 4.5:1 in both directions, where
     the night theme's bright gold cleared neither. */
  --lamp: oklch(0.545 0.152 56);
  /* Darker again for type: the fill value only just clears 4.5:1 against the
     surface, and fails against the lighter sky and footer bands. */
  --lamp-text: oklch(0.415 0.125 50);
  --lamp-ink: oklch(0.995 0.008 90);
  --ember: oklch(0.6 0.17 38);

  --sky-top: oklch(0.9 0.05 258);
  --sky-bottom: oklch(0.955 0.045 90);
  --hill-far: oklch(0.86 0.07 155);
  --hill-near: oklch(0.79 0.11 152);
  --star: oklch(0.98 0.04 95);
  --moon: oklch(0.88 0.14 85);
  --glow: 0.22;
  --shadow-hue: 268;
  --shadow-a: 0.16;

  --a-violet: oklch(0.52 0.16 300);
  --a-sky: oklch(0.53 0.14 235);
  --a-amber: oklch(0.56 0.13 60);
  --a-meadow: oklch(0.52 0.14 150);
  --a-lavender: oklch(0.52 0.14 315);
  --a-corn: oklch(0.5 0.16 265);
  --a-grass: oklch(0.52 0.15 135);
  --a-rose: oklch(0.53 0.17 15);
  --a-teal: oklch(0.51 0.11 195);
  --a-plum: oklch(0.5 0.15 340);
  --a-ember: oklch(0.55 0.16 45);
}

/* ---------------------------------------------------------------- reset -- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color var(--slow) var(--ease), color var(--slow) var(--ease);
}

/* Light type on dark reads lighter; give it more room to breathe. */
:root:not([data-theme='day']) body {
  --lh-body: 1.68;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration-color: oklch(from var(--lamp) l c h / 0.45);
  text-underline-offset: 0.18em;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

:focus-visible {
  outline: 3px solid var(--lamp);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection {
  background: var(--lamp);
  color: var(--lamp-ink);
}

/* ------------------------------------------------------------ utilities -- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-narrow {
  max-width: 60rem;
}

.prose p + p {
  margin-top: 1em;
}

.prose {
  max-width: var(--measure);
  color: var(--ink-soft);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: var(--z-dialog);
  padding: 0.7rem 1.1rem;
  background: var(--lamp);
  color: var(--lamp-ink);
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: var(--r-sm);
  transform: translateY(-160%);
  transition: transform var(--fast) var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* Paper grain. One fixed layer, never repainted, never intercepts a click. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
  }
}