/*
 * Shared design tokens and base rules for every page of mybabylog.net —
 * the marketing landing (/) and the legal documents (/legal/**).
 *
 * Every colour value below is copied VERBATIM from
 * `docs/guidelines/my-baby-log-brandbook.html`'s `<style id="tokens">`
 * block: the `:root` light/neutral values, the `:root[data-identity="boy"]`
 * and `[data-identity="girl"]` identity palettes, and the
 * `:root[data-theme="dark"]` overrides. The brandbook is this project's
 * design source of truth (CLAUDE.md) — nothing here invents a value it
 * does not define, and nothing here is "adjusted to taste" for the web.
 *
 * Two orthogonal axes, exactly as the brandbook models them:
 *   [data-theme]    = light | dark      — paper and ink
 *   [data-identity] = neutral | boy | girl — the whole accent ramp AND the
 *                     neutral ramp, because an identity is a whole palette,
 *                     not an accent swap.
 *
 * The visitor-facing switch on the site exposes four modes (Claro, Niño,
 * Niña, Oscuro) that map onto those two axes; see `site.js`.
 */

/* ========================================================================
   LIGHT · NEUTRAL (the default — no attribute needed on <html>)
   ===================================================================== */
:root {
  color-scheme: light;

  /* ---- Identity accent — neutral ("Campo" olive, hue 105→134) -------- */
  --accent-50:  oklch(96.5% 0.014 105);
  --accent-100: oklch(93% 0.025 108);
  --accent-200: oklch(88% 0.038 112);
  --accent-300: oklch(82% 0.050 116);
  --accent-400: oklch(74.7% 0.060 118);  /* #A9B388 laurel green */
  --accent-500: oklch(64% 0.062 126);
  --accent-600: oklch(53.7% 0.061 134);  /* #5F6F52 dark olive green */
  --accent-700: oklch(45% 0.055 134);
  --accent-800: oklch(37% 0.045 134);
  --accent-900: oklch(29% 0.035 134);
  --accent-grad: radial-gradient(circle at 30% 25%, var(--accent-400), var(--accent-700));
  --accent-shadow: oklch(45% 0.055 134 / 0.35);

  /* ---- Domain semantic colours (never vary by identity or theme) ----- */
  --sleep-soft:  oklch(93% 0.05 200);  --sleep-light: oklch(78% 0.13 200);
  --sleep-base:  oklch(65% 0.14 200);  --sleep-dark:  oklch(52% 0.14 200);
  --sleep-ink:   oklch(38% 0.12 200);
  --sleep-grad:  radial-gradient(circle at 30% 25%, var(--sleep-light), var(--sleep-dark));

  --feeding-soft:  oklch(94% 0.04 40); --feeding-light: oklch(80% 0.14 40);
  --feeding-base:  oklch(66% 0.15 40); --feeding-dark:  oklch(52% 0.15 40);
  --feeding-ink:   oklch(40% 0.13 40);
  --feeding-grad:  radial-gradient(circle at 30% 25%, var(--feeding-light), var(--feeding-dark));

  --diaper-soft:  oklch(95% 0.05 90);  --diaper-light: oklch(88% 0.13 90);
  --diaper-base:  oklch(77% 0.14 88);  --diaper-dark:  oklch(66% 0.14 85);
  --diaper-ink:   oklch(42% 0.10 80);
  --diaper-grad:  radial-gradient(circle at 30% 25%, var(--diaper-light), var(--diaper-dark));

  --achieve-soft:  oklch(96% 0.06 85); --achieve-light: oklch(90% 0.10 90);
  --achieve-base:  oklch(80% 0.14 90); --achieve-dark:  oklch(60% 0.16 40);
  --achieve-ink:   oklch(30% 0.10 60);
  --achieve-grad:  radial-gradient(circle at 30% 25%, var(--achieve-light), var(--achieve-dark));

  --memory-soft:  oklch(94% 0.04 315); --memory-light: oklch(83% 0.10 320);
  --memory-base:  oklch(70% 0.12 310); --memory-dark:  oklch(58% 0.13 300);
  --memory-ink:   oklch(42% 0.12 305);
  --memory-grad:  radial-gradient(circle at 30% 25%, var(--memory-light), var(--memory-dark));

  --medical-soft:  oklch(93% 0.05 165); --medical-light: oklch(80% 0.09 165);
  --medical-base:  oklch(66% 0.10 165); --medical-dark:  oklch(55% 0.10 165);
  --medical-ink:   oklch(40% 0.09 165);
  --medical-grad:  radial-gradient(circle at 30% 25%, var(--medical-soft), var(--medical-dark));

  --supplies-soft:  oklch(94% 0.04 280); --supplies-light: oklch(82% 0.09 280);
  --supplies-base:  oklch(68% 0.11 280); --supplies-dark:  oklch(55% 0.12 280);
  --supplies-ink:   oklch(40% 0.10 280);
  --supplies-grad:  radial-gradient(circle at 30% 25%, var(--supplies-light), var(--supplies-dark));

  --growth-soft:  oklch(93% 0.04 215); --growth-light: oklch(78% 0.12 215);
  --growth-base:  oklch(64% 0.14 215); --growth-dark:  oklch(50% 0.15 215);
  --growth-ink:   oklch(37% 0.12 215);
  --growth-grad:  radial-gradient(circle at 30% 25%, var(--growth-light), var(--growth-dark));

  /* ---- Feedback ramps (only the steps this site actually uses) ------- */
  --success-100: oklch(94% 0.05 145); --success-600: oklch(55% 0.14 145);
  --success-800: oklch(38% 0.10 145);
  --info-100:    oklch(95% 0.03 260); --info-600:    oklch(56% 0.15 260);
  --info-800:    oklch(39% 0.12 260);

  /* ---- Neutral ramp (identity-dependent: each identity restates it) -- */
  --neutral-0:   oklch(99.4% 0.012 100);  /* card surface — warm white #FFFDF4 */
  --neutral-50:  oklch(98% 0.028 103);    /* page ground — cornsilk #FEFAE0 */
  --neutral-100: oklch(94.2% 0.045 92);   /* raised — lemon meringue #F9EBC7 */
  --neutral-200: oklch(89% 0.040 90);
  --neutral-300: oklch(83% 0.045 85);
  --neutral-400: oklch(74% 0.050 78);
  --neutral-500: oklch(64% 0.055 72);     /* camel #B99470 */
  --neutral-600: oklch(48% 0.030 95);
  --neutral-700: oklch(40% 0.030 110);
  --neutral-800: oklch(33% 0.030 120);
  --neutral-900: oklch(28% 0.030 133);    /* ink — dark olive #2F3A28 */

  /* ---- Semantic surface / text (light values) ------------------------ */
  --bg:             var(--neutral-50);
  --surface:        var(--neutral-0);
  --surface-2:      var(--neutral-100);
  --surface-sunken: oklch(95.5% 0.040 95);
  --surface-inverse: oklch(28% 0.030 133);
  --border:         var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --text:           var(--neutral-900);
  --text-2:         var(--neutral-700);
  --text-3:         var(--neutral-600);
  --text-inverse:   var(--neutral-0);
  --text-on-accent: oklch(100% 0 0);
  --accent-fill:     var(--accent-700);
  --accent-fill-ink: var(--text-on-accent);
  --scrim:          oklch(28% 0.030 133 / 0.45);

  /* ---- Typography (OS-native stack, § 2: no bundled typeface) -------- */
  --font-display: -apple-system, BlinkMacSystemFont, Roboto, 'Segoe UI', system-ui, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, Roboto, 'Segoe UI', system-ui, sans-serif;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;

  /* ---- Spacing (4px base grid) --------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;  --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --sp-20: 80px;

  /* ---- Radius --------------------------------------------------------- */
  --r-xs: 6px;  --r-sm: 10px; --r-md: 14px; --r-lg: 16px;
  --r-xl: 20px; --r-2xl: 28px; --r-full: 999px;

  /* ---- Border width ---------------------------------------------------- */
  --bw-hairline: 1px; --bw-thin: 1.5px; --bw-thick: 2px; --bw-focus: 2.5px;

  /* ---- Elevation ------------------------------------------------------- */
  --elev-1: 0 1px 2px oklch(40% 0.02 95 / 0.06);
  --elev-2: 0 3px 8px oklch(40% 0.02 95 / 0.06);
  --elev-3: 0 4px 12px oklch(40% 0.02 95 / 0.08);
  --elev-4: 0 8px 20px oklch(40% 0.02 95 / 0.12);
  --elev-5: 0 16px 40px oklch(40% 0.02 95 / 0.16);

  /* ---- Motion ---------------------------------------------------------- */
  --dur-fast: 150ms;  --dur-base: 200ms;  --dur-slow: 250ms;
  --dur-slower: 400ms; --dur-celebrate: 600ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Control metrics (floors, never fixed heights — § 38) ----------- */
  --ctl-h-sm: 36px; --ctl-h-md: 48px; --ctl-h-lg: 56px; --ctl-h-touch: 44px;
}

/* ========================================================================
   IDENTITY: BOY — a whole palette, not an accent swap
   ===================================================================== */
:root[data-identity="boy"] {
  --accent-50:  oklch(97.5% 0.008 235); --accent-100: oklch(94% 0.020 236);
  --accent-200: oklch(89% 0.032 237);   --accent-300: oklch(83% 0.040 237);
  --accent-400: oklch(73% 0.055 241);   --accent-500: oklch(64% 0.068 243);
  --accent-600: oklch(56% 0.075 244);   --accent-700: oklch(45% 0.080 250);
  --accent-800: oklch(35% 0.070 254);   --accent-900: oklch(24% 0.050 257);
  --accent-shadow: oklch(45% 0.080 250 / 0.35);

  --neutral-0:   oklch(100% 0 0);
  --neutral-50:  oklch(98.2% 0.005 230);  /* page ground — #F6FAFD */
  --neutral-100: oklch(96% 0.008 235);
  --neutral-200: oklch(91% 0.014 235);
  --neutral-300: oklch(86% 0.018 237);
  --neutral-400: oklch(74% 0.022 240);
  --neutral-500: oklch(62% 0.025 243);
  --neutral-600: oklch(50% 0.030 248);
  --neutral-700: oklch(40% 0.035 252);
  --neutral-800: oklch(30% 0.040 255);
  --neutral-900: oklch(20% 0.045 257);    /* ink — #0A1931 */

  --surface-sunken:  oklch(96.5% 0.008 233);
  --surface-inverse: oklch(20% 0.045 257);
  --scrim:           oklch(20% 0.045 257 / 0.45);
}

/* ========================================================================
   IDENTITY: GIRL — quietest paper of the three, saturated rose ramp
   ===================================================================== */
:root[data-identity="girl"] {
  --accent-50:  oklch(97% 0.023 345); --accent-100: oklch(93% 0.058 345);
  --accent-200: oklch(88% 0.104 345); --accent-300: oklch(84% 0.138 345);
  --accent-400: oklch(80% 0.161 345); --accent-500: oklch(70% 0.173 345);
  --accent-600: oklch(62% 0.184 345); --accent-700: oklch(52% 0.173 345);
  --accent-800: oklch(43% 0.150 345); --accent-900: oklch(33% 0.115 345);
  --accent-shadow: oklch(52% 0.173 345 / 0.35);

  --neutral-0:   oklch(100% 0 0);
  --neutral-50:  oklch(97% 0.005 350);
  --neutral-100: oklch(94.5% 0.006 350);
  --neutral-200: oklch(88% 0.007 350);
  --neutral-300: oklch(82% 0.008 350);
  --neutral-400: oklch(70% 0.008 350);
  --neutral-500: oklch(58% 0.008 350);
  --neutral-600: oklch(48% 0.007 350);
  --neutral-700: oklch(38% 0.008 350);
  --neutral-800: oklch(28% 0.009 350);
  --neutral-900: oklch(18% 0.009 350);

  --surface-sunken:  oklch(95.5% 0.006 350);
  --surface-inverse: oklch(18% 0.009 350);
  --scrim:           oklch(18% 0.009 350 / 0.45);
}

/* ========================================================================
   THEME: DARK — olive ink, not a generic gray. Deliberately does NOT touch
   --accent-*, so the identity survives the theme switch.
   ===================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --neutral-0:   oklch(22% 0.015 130);
  --neutral-50:  oklch(9% 0.008 130);
  --neutral-100: oklch(29% 0.016 130);
  --neutral-200: oklch(40% 0.018 130);
  --neutral-300: oklch(51% 0.018 128);
  --neutral-400: oklch(58% 0.016 126);
  --neutral-500: oklch(64% 0.015 118);
  --neutral-600: oklch(70% 0.014 100);
  --neutral-700: oklch(75% 0.015 95);
  --neutral-800: oklch(82% 0.015 93);
  --neutral-900: oklch(89% 0.015 92);

  --bg:            oklch(9% 0.008 130);
  --surface:       oklch(22% 0.015 130);
  --surface-2:     oklch(29% 0.016 130);
  --surface-sunken: oklch(9% 0.008 130);
  --surface-inverse: oklch(89% 0.015 92);
  --border:        oklch(40% 0.018 130);
  --border-strong: oklch(51% 0.018 128);
  --text:          oklch(89% 0.015 92);
  --text-2:        oklch(75% 0.015 95);
  --text-3:        oklch(70% 0.014 100);
  --text-inverse:  oklch(9% 0.008 130);
  --scrim:         oklch(4% 0.006 130 / 0.70);

  /* Lighter fill + dark ink in dark mode: the accent-700 fill is only
     2.48:1 on the dark ground, under WCAG 1.4.11's 3:1 for UI components. */
  --accent-fill:     var(--accent-500);
  --accent-fill-ink: var(--text-inverse);

  /* Dark-mode shadows are always neutral, never colour-tinted */
  --elev-1: 0 1px 2px oklch(8% 0.015 130 / 0.30);
  --elev-2: 0 3px 8px oklch(8% 0.015 130 / 0.32);
  --elev-3: 0 4px 12px oklch(8% 0.015 130 / 0.36);
  --elev-4: 0 8px 20px oklch(8% 0.015 130 / 0.44);
  --elev-5: 0 16px 40px oklch(8% 0.015 130 / 0.52);

  /* Domain soft fills need lower lightness on dark to stay readable */
  --sleep-soft:    oklch(34% 0.06 200);  --sleep-ink:    oklch(85% 0.09 200);
  --feeding-soft:  oklch(34% 0.06 40);   --feeding-ink:  oklch(86% 0.09 40);
  --diaper-soft:   oklch(35% 0.06 90);   --diaper-ink:   oklch(88% 0.09 90);
  --achieve-soft:  oklch(36% 0.07 80);   --achieve-ink:  oklch(90% 0.09 85);
  --memory-soft:   oklch(34% 0.06 310);  --memory-ink:   oklch(86% 0.08 315);
  --medical-soft:  oklch(33% 0.05 165);  --medical-ink:  oklch(85% 0.07 165);
  --supplies-soft: oklch(34% 0.05 280);  --supplies-ink: oklch(86% 0.07 280);
  --growth-soft:   oklch(34% 0.06 215);  --growth-ink:   oklch(86% 0.08 215);

  --success-100: oklch(30% 0.06 145); --success-800: oklch(79% 0.10 145);
  --info-100:    oklch(30% 0.06 260); --info-800:    oklch(79% 0.12 260);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* A keyboard user must always see where they are — the brandbook's focus
   width, in the identity accent so it moves with the theme. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: var(--bw-focus) solid var(--accent-fill);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================================================
   LANGUAGE SWITCH — every page carries both languages in the markup; this
   only picks which one is shown. Each page's own <noscript> rule reveals
   both again when the switch cannot run, rather than hiding one for good.
   ===================================================================== */
:root[data-lang="es"] .lang-en,
:root[data-lang="en"] .lang-es { display: none; }

/* ========================================================================
   SHARED CHROME — the switch controls in every page's masthead
   ===================================================================== */
.switch-group {
  display: flex;
  gap: var(--sp-1);
  padding: 3px;
  background: var(--surface-2);
  border: var(--bw-hairline) solid var(--border);
  border-radius: var(--r-full);
}

.switch-group button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font: inherit;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  padding: 4px 14px;
  border-radius: var(--r-full);
  cursor: pointer;
  min-height: 32px;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}

.switch-group button:hover { color: var(--text); }

.switch-group button[aria-pressed="true"] {
  background: var(--accent-fill);
  color: var(--accent-fill-ink);
}

/* The theme switch's buttons carry a colour dot so the four modes are not
   distinguishable by their label alone — the pressed state is a colour,
   and colour must never be the only carrier of meaning (§ a11y). */
.theme-switch button {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding-left: 10px;
}

.theme-switch .dot {
  width: 12px;
  height: 12px;
  border-radius: var(--r-full);
  border: var(--bw-hairline) solid oklch(50% 0 0 / 0.25);
  flex: 0 0 auto;
}

.theme-switch .dot-light  { background: linear-gradient(135deg, #A9B388, #5F6F52); }
.theme-switch .dot-boy    { background: linear-gradient(135deg, #89ADC8, #305880); }
.theme-switch .dot-girl   { background: linear-gradient(135deg, #FF90D5, #A9337F); }
.theme-switch .dot-dark   { background: linear-gradient(135deg, #4A5240, #12170F); }

/* Visually hidden, still announced. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
