/* ============================================================================
   LoreLoom — Shared Design Tokens (foundation layer)
   Linked FIRST on every page, before styles.css / landing.css / pages.css.
   Purpose: one canonical source for breakpoints, spacing, fluid type, radius,
   and touch targets. Existing per-file :root palettes remain; this layer is
   additive and provides the shared scales the responsive refactor builds on.
   ============================================================================ */

:root {
    /* --- Canonical breakpoints -----------------------------------------------
       CSS custom properties can't drive @media queries, so these are the
       DOCUMENTED anchor values every stylesheet must use. Snap any ad-hoc
       breakpoint to the nearest anchor.
         --bp-sm  480px  small phone (portrait)
         --bp-md  768px  phone <-> tablet boundary  (primary mobile anchor)
         --bp-lg  1024px tablet <-> desktop          (sidebar becomes persistent)
         --bp-xl  1280px large desktop
       Reference values (not consumed by @media, kept for tooling/JS): */
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;

    /* --- Spacing scale (4px base) --------------------------------------------
       Replaces hardcoded padding/margin/gap values throughout the app. */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --space-8: 48px;
    --space-9: 64px;

    /* --- Fluid type scale (clamp: min, preferred-vw, max) --------------------
       Headings/body scale with viewport instead of per-breakpoint overrides. */
    --fs-caption: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
    --fs-body: clamp(0.9rem, 0.86rem + 0.25vw, 1rem);
    --fs-lead: clamp(1rem, 0.94rem + 0.35vw, 1.15rem);
    --fs-h3: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
    --fs-h2: clamp(1.4rem, 1.15rem + 1.2vw, 2rem);
    --fs-h1: clamp(1.7rem, 1.25rem + 2.2vw, 2.75rem);
    --fs-display: clamp(2rem, 1.3rem + 3.4vw, 3.75rem);

    /* --- Radius (reconciles --border-radius-* and --radius) ------------------ */
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    /* --- Touch targets ------------------------------------------------------- */
    --tap-min: 44px;

    /* --- Shared brand primitives (single source; both palettes point here) --- */
    --brand-accent: #a777e3;
    --brand-accent-2: #6e8efb;
    --brand-gradient: linear-gradient(135deg, #6e8efb, #a777e3);

    /* --- Layout anchors ------------------------------------------------------ */
    --sidebar-w: 260px;
    --settings-nav-w: 230px;

    /* --- Safe-area convenience (0 on non-notched devices) -------------------- */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}