/* _tokens.css — System scale tokens (spacing / type / shadow / radius aliases)
   Brand colours (--color-*) and the brand radius/shadow tokens already live in
   the theme root style.css — this file only adds the supporting scale that the
   component partials below are written against, plus a couple of semantic
   aliases so ported components (built against generic BEM names) resolve to
   the Childhood Matters palette without renaming every declaration.
   ============================================================================ */

:root {
    /* ── Semantic colour aliases ─────────────────────────────────────────── */
    --color-white:           #FFFFFF;
    --color-near-black:      var(--color-primary); /* navy stands in for near-black text */
    --color-secondary:       var(--color-accent);       /* eyebrows / labels use the accent */
    --color-secondary-dark:  var(--color-accent-dark);
    --color-secondary-light: var(--color-accent-light);
    --color-border-dark:     #C9BBA0;

    /* Fonts — the brand has one condensed heading face (no separate "display") */
    --font-display: var(--font-heading);

    /* ── Type scale ──────────────────────────────────────────────────────── */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-md:   1.125rem;
    --text-lg:   1.375rem;
    --text-xl:       1.5rem;
    --text-xl-plus:  1.75rem;
    --text-2xl:      1.875rem;
    --text-3xl:      2.25rem;
    --text-3xl-plus: 2.75rem;
    --text-4xl:      3rem;
    --text-4xl-plus: 3.25rem;
    --text-5xl:      3.75rem;
    --text-6xl:      4.5rem;

    --font-size-section-heading: clamp(var(--text-2xl), 4vw, var(--text-4xl-plus));
    --font-size-44:              clamp(var(--text-2xl), 3.2vw, var(--text-3xl-plus));

    /* ── Spacing scale ───────────────────────────────────────────────────── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-7:  1.75rem;
    --space-8:  2rem;
    --space-9:  2.25rem;
    --space-10: 2.5rem;
    --space-11: 2.75rem;
    --space-12: 3rem;
    --space-13: 3.25rem;
    --space-14: 3.5rem;
    --space-15: 3.75rem;
    --space-16: 4rem;
    --space-18: 4.5rem;
    --space-20: 5rem;
    --space-22: 5.5rem;
    --space-24: 6rem;
    --space-26: 6.5rem;
    --space-28: 7rem;
    --space-30: 7.5rem;
    --space-32: 8rem;
    --space-36: 9rem;
    --space-40: 10rem;
    --space-44: 11rem;
    --space-48: 12rem;
    --space-52: 13rem;
    --space-56: 14rem;
    --space-60: 15rem;
    --space-64: 16rem;

    /* ── Radius aliases (brand radius lives in style.css: --radius-sm/--radius/--radius-pill) */
    --radius-md:   var(--radius-sm); /* 8px */
    --radius-lg:   var(--radius);    /* 12px */
    --radius-xl:   16px;
    --radius-full: var(--radius-pill);

    /* ── Transitions ─────────────────────────────────────────────────────── */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* ── Shadows — warm, soft navy-tinted elevation (no harsh black shadows) ── */
    --shadow-xs:  0 1px 3px rgba(25, 6, 45, .06);
    --shadow-sm:  var(--shadow-card);
    --shadow-md:  0 6px 24px rgba(25, 6, 45, .10);
    --shadow-lg:  var(--shadow-lift);
    --shadow-xl:  0 24px 48px rgba(25, 6, 45, .18);

    /* ── Layout ──────────────────────────────────────────────────────────── */
    /* --container-max:    1280px; */
    --container-max:    1380px;
    --container-narrow: 800px;
    --container-wide:   1440px;
    --hero-height:      70vh;
    --hero-height-sm:   50vh;

    /* ── Nav ─────────────────────────────────────────────────────────────── */
    --nav-height:      80px;
    --nav-height-sm:   60px;
    --nav-bg:          rgba(255, 255, 255, 0.82); /* white, translucent — page shows through slightly */
    --nav-bg-scrolled: rgba(255, 255, 255, 0.97); /* near-solid once scrolled, for legibility over content */
    --nav-dropdown-bg: var(--color-white); /* dropdown panel is always fully opaque, unlike the header itself */

    /* ── Z-index layers ──────────────────────────────────────────────────── */
    --z-base:    1;
    --z-raised:  10;
    --z-dropdown:200;
    --z-nav:     500;
    --z-modal:   800;
    --z-toast:   1000;
}