/* =============================================================
   DESIGN TOKENS — "Live Signal"
   Real-time, present-tense identity for a LIVE psychic-reading service.
   Mid-dark twilight canvas (not near-black), electric aqua + warm coral,
   live-status pulse motifs. Distinct from sibling sites: no violet/gold,
   no serif display face — Sora (display) + Inter (body).

   Contrast verified (WCAG AA, 4.5:1 body-text floor):
     text    #EAF2F8 on bg #0C1524   -> 16.16:1
     text    #EAF2F8 on surface #16243A -> 13.77:1
     muted   #8FA6BC on bg #0C1524   -> 7.27:1
     muted   #8FA6BC on surface #16243A -> 6.20:1
     muted   #8FA6BC on elevated #1D3149 -> 5.26:1
     aqua    #3FD8C8 on bg #0C1524   -> 10.33:1
     coral   #FF7A59 on bg #0C1524   -> 7.12:1
     ink-on-coral (button text) -> 7.12:1  (white-on-coral fails at 2.57:1 — never use)
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
	/* ---------- Canvas & surfaces ---------- */
	--c-bg-top: #0C1524;         /* hero/canvas gradient start — deep twilight */
	--c-bg-bottom: #132A3F;      /* hero/canvas gradient end */
	--c-bg: #0C1524;             /* flat canvas fallback */
	--c-bg-deep: #081019;        /* deepest layer — footer */
	--c-surface: #16243A;        /* card / raised panel level 1 */
	--c-surface-alt: #1D3149;    /* elevated surface level 2 — nav, table stripes */
	--c-surface-hover: #223a56;  /* hover wash */
	--c-border: #24384F;         /* hairline on dark surfaces */
	--c-border-glow: rgba(63,216,200,.35); /* luminous 1px card border */

	/* ---------- Text ---------- */
	--c-text: #EAF2F8;           /* body copy, headings */
	--c-text-light: #B7C8D8;     /* secondary copy — brighter muted, still AA */
	--c-muted: #8FA6BC;          /* muted meta / captions — AA verified above */
	--c-text-inv: #FFFFFF;
	--c-ink: #0C1524;            /* near-canvas ink for text set on bright fills */

	/* ---------- Primary — electric aqua (live signal, links, focus) ---------- */
	--c-aqua: #3FD8C8;
	--c-aqua-light: #7BE8DC;
	--c-aqua-dark: #24A99B;
	--c-aqua-tint: rgba(63,216,200,.14);
	--c-aqua-tint-strong: rgba(63,216,200,.26);

	/* ---------- CTA — warm coral (conversion only) ---------- */
	--c-coral: #FF7A59;
	--c-coral-light: #FF9979;
	--c-coral-dark: #E85F3C;
	--c-coral-tint: rgba(255,122,89,.14);

	/* ---------- Live / success ---------- */
	--c-live: #4ADE80;
	--c-live-tint: rgba(74,222,128,.16);

	/* ---------- Status ---------- */
	--c-warn: #FFC15E;
	--c-danger: #FF6B6B;

	/* ---------- Aurora sweep (ambient hero glow) ---------- */
	--c-aurora-aqua: rgba(63,216,200,.30);
	--c-aurora-coral: rgba(255,122,89,.16);
	--c-aurora-deep: rgba(36,169,155,.14);

	/* ---------- Footer ---------- */
	--c-footer-bg: #081019;
	--c-footer-text: #7C90A6;

	/* ---------- Type ---------- */
	--ff-heading: 'Sora', system-ui, sans-serif;
	--ff-body: 'Inter', system-ui, sans-serif;
	--fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800;

	--fs-xs: .75rem; --fs-sm: .875rem; --fs-base: 1rem; --fs-md: 1.125rem;
	--fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 1.875rem; --fs-3xl: 2.25rem;
	--fs-4xl: 3rem; --fs-5xl: 3.75rem; --fs-6xl: 4.5rem;
	--lh-tight: 1.15; --lh-normal: 1.6; --lh-relaxed: 1.8;
	--ls-tight: -.02em; --ls-tighter: -.03em;

	/* ---------- 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: 1200px; --max-w-narrow: 800px; --max-w-prose: 68ch; --gutter: 24px;
	--r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 22px; --r-full: 9999px;

	/* ---------- Elevation ---------- */
	--shadow-xs: 0 1px 0 rgba(255,255,255,.03) inset, 0 2px 10px rgba(0,0,0,.4);
	--shadow-sm: 0 1px 0 rgba(255,255,255,.04) inset, 0 6px 18px rgba(0,0,0,.42);
	--shadow-md: 0 1px 0 rgba(255,255,255,.05) inset, 0 14px 30px rgba(0,0,0,.48);
	--shadow-lg: 0 1px 0 rgba(255,255,255,.06) inset, 0 22px 48px rgba(0,0,0,.52);
	--glow-aqua: 0 0 0 1px rgba(63,216,200,.4), 0 10px 30px rgba(63,216,200,.2);
	--glow-coral: 0 0 0 1px rgba(255,122,89,.45), 0 10px 30px rgba(255,122,89,.22);

	/* ---------- Motion ---------- */
	--ease: cubic-bezier(.4,0,.2,1); --ease-out: cubic-bezier(.16,1,.3,1);
	--dur-fast: 120ms; --dur: 200ms; --dur-slow: 350ms; --dur-slower: 600ms;
	--dur-aurora: 18s; --dur-pulse: 2.2s;
}

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