/* =============================================================
   DESIGN TOKENS — "Quiet Light"
   A consoling, dignified, luminous system for a mediumship /
   grief-support site. Warm parchment canvas, deep teal for trust
   and structure, brass/amber for warmth and highlight, soft blush
   for testimonial/quote surfaces. The feeling of a warm room with
   afternoon light — not spooky, not neon.

   Palette contrast verified (WCAG AA, relative-luminance formula):
     ink       on canvas  = 13.97:1   muted     on canvas = 5.12:1
     ink       on surface = 14.79:1   muted     on surface= 5.42:1
     primary   on canvas  =  7.02:1   accent    on canvas = 3.13:1 (large/UI only)
     white     on primary =  7.44:1   white     on accent-deep = 5.35:1
   Body-text colors (ink, muted) clear 4.5:1 everywhere they are used
   for paragraph copy. `--c-accent` (the lighter brass) is reserved
   for large headings, icons, borders, and decorative accents — never
   small body text — because at normal-text size it only clears 3:1.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* ---------- Canvas & surfaces ---------- */
    --c-canvas: #FBF8F4;           /* base canvas — warm parchment */
    --c-canvas-deep: #F3EDE3;      /* alt-section / footer background */
    --c-surface: #FFFFFF;          /* card / raised panel */
    --c-surface-alt: #F6F1E9;      /* secondary card tint, table stripes */
    --c-border: #E7DCCB;           /* hairline rule on warm surfaces */
    --c-border-strong: #D9C9AF;    /* stronger border / hover border */

    /* ---------- Text ---------- */
    --c-ink: #1E2A2A;              /* headings, body copy */
    --c-ink-soft: #33413F;         /* slightly lighter heading tone */
    --c-muted: #566462;            /* secondary copy — AA-safe (5.1:1+) */
    --c-muted-soft: #6E7C7A;       /* least-emphasis meta/labels, large text only */
    --c-text-inv: #FBF8F4;         /* text on solid dark/teal fills */

    /* ---------- Primary — deep teal (trust, structure, links) ---------- */
    --c-primary: #2F5D57;
    --c-primary-deep: #1F4842;     /* solid-fill hover / pressed */
    --c-primary-light: #3F726A;    /* lighter foreground for hover on light bg */
    --c-primary-tint: rgba(47,93,87,.08);
    --c-primary-tint-strong: rgba(47,93,87,.16);

    /* ---------- Accent — brass / amber (warmth, highlight) ---------- */
    --c-accent: #B08640;           /* decorative: icons, borders, large headings */
    --c-accent-deep: #8A6420;      /* button fill (paired with white text, 5.35:1) */
    --c-accent-light: #C89B5C;     /* hover on accent-deep buttons */
    --c-accent-tint: rgba(176,134,64,.12);
    --c-star: #B08640;             /* star fill */

    /* ---------- Blush — soft warm rose (quote/testimonial surfaces) ---------- */
    --c-blush: #E8D9CF;
    --c-blush-deep: #DDC4B2;
    --c-blush-tint: rgba(232,217,207,.5);

    /* ---------- Status ---------- */
    --c-green: #3E7A5E;
    --c-red: #A5473A;

    /* ---------- Ambient bloom (hero breathing light — see components.css) ---------- */
    --c-bloom-1: rgba(176,134,64,.16);
    --c-bloom-2: rgba(47,93,87,.10);

    /* ---------- Footer ---------- */
    --c-footer-bg: #223330;
    --c-footer-text: #C9D2CE;
    --c-footer-text-dim: #93A29D;
    --c-footer-border: rgba(255,255,255,.10);

    /* ---------- Type ---------- */
    --ff-heading: 'Spectral', Georgia, 'Times New Roman', serif;
    --ff-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700;

    --fs-xs: .8125rem; --fs-sm: .9375rem; --fs-base: 1.0625rem; --fs-md: 1.1875rem;
    --fs-lg: 1.375rem; --fs-xl: 1.625rem; --fs-2xl: 2rem; --fs-3xl: 2.5rem;
    --fs-4xl: 3.25rem; --fs-5xl: 4rem; --fs-6xl: 4.75rem;
    --lh-tight: 1.18; --lh-normal: 1.65; --lh-relaxed: 1.85;
    --ls-tight: -.015em; --ls-tighter: -.02em;

    /* ---------- Rhythm ---------- */
    --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; --sp-24: 96px;
    --max-w: 1180px; --max-w-narrow: 760px; --max-w-prose: 68ch; --gutter: 24px;
    --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-full: 9999px;

    /* ---------- Elevation — soft, warm-toned, layered shadows ---------- */
    --shadow-xs: 0 1px 2px rgba(30,42,42,.05);
    --shadow-sm: 0 2px 8px rgba(30,42,42,.06), 0 1px 2px rgba(30,42,42,.05);
    --shadow-md: 0 8px 24px rgba(30,42,42,.08), 0 2px 6px rgba(30,42,42,.05);
    --shadow-lg: 0 18px 40px rgba(30,42,42,.10), 0 4px 10px rgba(30,42,42,.05);
    --shadow-xl: 0 28px 64px rgba(30,42,42,.14), 0 8px 16px rgba(30,42,42,.06);
    --glow-accent: 0 0 0 1px rgba(176,134,64,.35), 0 10px 26px rgba(176,134,64,.20);
    --glow-primary: 0 0 0 1px rgba(47,93,87,.28), 0 10px 26px rgba(47,93,87,.16);

    /* ---------- Motion ---------- */
    --ease: cubic-bezier(.4,0,.2,1); --ease-out: cubic-bezier(.16,1,.3,1);
    --dur-fast: 120ms; --dur: 220ms; --dur-slow: 400ms; --dur-slower: 700ms;
    --dur-bloom: 14s;
}

@media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; --dur-slower: 1ms; --dur-bloom: 1ms; }
}