/* =========================================================
   babapic — Design Tokens
   Single source of truth for color, type, spacing, shape.
   Every component/page should reference these variables —
   no hardcoded hex values outside this file.
   ========================================================= */

:root {
  /* ---- Color: surfaces (warm-leaning sky blue, tonal layering) ----
     Decision: a soft, desaturated, warm-leaning light blue canvas —
     not stark white, not dark — with warm near-white surfaces
     floating slightly lighter on top for cards/nav/footer, and a
     deeper blue for alternating sections. Contrast-checked below. */
  --color-bg: #e9f2f5;            /* page background — pale warm sky blue */
  --color-bg-raised: #dcebef;     /* alternating sections (stats, steps) */
  --color-surface: #fbfdfc;       /* cards, nav, footer — warm near-white */
  --color-surface-2: #f1f7f7;     /* hover / nested surface */
  --color-surface-3: #e3eeec;     /* active / pressed surface */
  --color-border: #d2e2e2;        /* default hairline border */
  --color-border-strong: #b7cdcd; /* emphasized border */

  /* ---- Color: text (contrast-checked against every surface it's used on:
     --color-bg, --color-bg-raised, --color-surface, --color-ad-bg) ---- */
  --color-text: #3d4c52;          /* body text — 7.8:1 on bg */
  --color-text-heading: #16262b;  /* headings — 14.1:1 on bg */
  --color-text-muted: #556669;    /* secondary / helper text — 4.9:1+ on all surfaces */
  --color-text-faint: #546a6d;    /* placeholders, disabled — 4.7:1+ on all surfaces */

  /* ---- Color: the ONE accent (deep spruce teal) ----
     Decision: analogous to the blue background rather than a
     clashing warm pop — reads as one considered tonal system, not
     "blue bg + random CTA color." Carries every CTA, link, active
     state, and display numeral — never a large fill. */
  --color-accent: #1f5c56;
  --color-accent-hover: #184740;
  --color-accent-active: #123531;
  --color-accent-muted: rgba(31, 92, 86, 0.1);      /* subtle bg tint */
  --color-accent-border: rgba(31, 92, 86, 0.32);    /* subtle border tint */

  /* ---- Color: semantic (minimal use, kept distinct from accent) ---- */
  --color-success: #3d7a4a;
  --color-danger: #b23b3b;
  --color-warning: #a9762a;

  /* ---- Color: ad slot marking (clearly-labeled, low-key) ---- */
  --color-ad-bg: #f1f7f7;
  --color-ad-border: #d2e2e2;
  --color-ad-label: #5c6c70;      /* meets 4.5:1 on --color-ad-bg */

  /* ---- Typography ----
     Decision: a single characterful display serif (self-hosted,
     same-origin — see base.css @font-face) reserved strictly for
     true headline scale: H1s and big display numerals. Everything
     else — nav, buttons, H2/H3, FAQ, cards — stays in the existing
     system sans, so the serif reads as a deliberate accent instead
     of a wash applied to every heading. */
  --font-serif: "Libre Caslon Display", ui-serif, "New York",
    "Iowan Old Style", Cambria, Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
    Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    monospace;

  --fs-h1: clamp(2.25rem, 1.85rem + 2vw, 3.75rem);
  --fs-h2: clamp(1.6rem, 1.4rem + 0.9vw, 2.25rem);
  --fs-h3: 1.25rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.75rem;

  --lh-tight: 1.15;
  --lh-heading: 1.3;
  --lh-body: 1.6;

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

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */

  /* ---- Layout ---- */
  --container-max: 1200px;
  --nav-height: 68px;

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* ---- Shadow / glow (understated — hairlines over glows) ---- */
  --shadow-sm: 0 1px 2px rgba(22, 38, 43, 0.06);
  --shadow-md: 0 6px 20px rgba(22, 38, 43, 0.08);
  --shadow-lg: 0 16px 40px rgba(22, 38, 43, 0.12);
  --glow-accent: 0 0 0 1px var(--color-accent-border);
  --glow-accent-strong: 0 0 0 1px var(--color-accent);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --dur-drift: 30s;        /* ambient hero/tool-hero background motion */

  /* ---- Z-index scale ---- */
  --z-nav: 100;
  --z-dropdown: 110;
  --z-overlay: 200;
}