/* ============================================================================
   LWL Journey — Design tokens
   ============================================================================
   Single source of truth for color, type, spacing, motion. Override any of
   these and the rest of the system follows.
*/

:root {
	/* ---- Brand: anchor colors that must stay visible ---- */
	--color-coral:      #FC3C30;
	--color-coral-dark: #C8362A;
	--color-sun:        #FCC000;
	--color-sun-soft:   #FFD63B;
	--color-ember:      #FC780C;
	--color-indigo:     #5460A8;
	--color-deep:       #3C3C78;

	/* ---- Nature: forest / mountains / water ---- */
	--color-moss:       #3F6F4A;
	--color-moss-deep:  #2A4F33;
	--color-meadow:     #6E9F4A;
	--color-meadow-warm:#84B25D;
	--color-bark:       #5A4632;
	--color-river:      #7DA8D0;
	--color-river-pale: #A8C6E0;
	--color-mist:       #E8EFE9;

	/* ---- Japanese accents ---- */
	--color-sakura:      #F4C0D1;
	--color-sakura-deep: #ED93B1;

	/* ---- Sky bands (for layered hero) ---- */
	--color-sky-top:    #F5C8B0;
	--color-sky-mid:    #FBDFC8;
	--color-sky-low:    #FFEFD6;

	/* ---- Neutrals ---- */
	--color-paper:      #FFFCF7;
	--color-paper-warm: #FAF4E8;
	--color-ink:        #2B2530;
	--color-ink-soft:   #5A4632;
	--color-line:       #E8E1D2;

	/* ---- Semantic ---- */
	--color-bg:         var(--color-paper);
	--color-bg-alt:     var(--color-mist);
	--color-text:       var(--color-ink);
	--color-text-muted: var(--color-ink-soft);
	--color-heading:    var(--color-deep);
	--color-link:       var(--color-coral);
	--color-link-hover: var(--color-coral-dark);
	--color-border:     var(--color-line);

	/* ---- Typography ---- */
	--font-display: "Fraunces", "Georgia", "Cambria", "Times New Roman", serif;
	--font-body:    "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--font-mono:    "SFMono-Regular", "Menlo", "Monaco", "Consolas", monospace;

	--fs-xs:   0.875rem;   /* 14px */
	--fs-sm:   0.9375rem;  /* 15px */
	--fs-base: 1.0625rem;  /* 17px */
	--fs-md:   1.125rem;   /* 18px */
	--fs-lg:   1.375rem;   /* 22px */
	--fs-xl:   1.75rem;    /* 28px */
	--fs-2xl:  2.5rem;     /* 40px */
	--fs-3xl:  3.5rem;     /* 56px */
	--fs-4xl:  4.5rem;     /* 72px */

	--lh-tight: 1.15;
	--lh-snug:  1.3;
	--lh-base:  1.6;
	--lh-loose: 1.8;

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

	/* ---- Spacing scale (rem-based, 4-8-12-16-24-32-48-64-96-128) ---- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-8: 3rem;
	--space-10: 4rem;
	--space-12: 6rem;
	--space-16: 8rem;

	/* ---- Layout ---- */
	--container-max: 1200px;
	--container-narrow: 760px;
	--container-pad: clamp(1rem, 4vw, 2.5rem);

	/* ---- Radius ---- */
	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--radius-pill: 999px;

	/* ---- Shadows (used sparingly) ---- */
	--shadow-sm: 0 1px 2px rgba(43, 37, 48, 0.06);
	--shadow-md: 0 4px 16px rgba(43, 37, 48, 0.08);
	--shadow-lg: 0 12px 40px rgba(43, 37, 48, 0.12);

	/* ---- Hairlines (added 2026-05-08, Phase A — homogenised global tokens) ---- */
	--hairline:        1px solid var(--color-line);
	--hairline-strong: 1px solid rgba(43, 37, 48, 0.18);
	--hairline-dim:    1px dashed rgba(43, 37, 48, 0.12);

	/* ---- Radius xl (Atelier-class large panels) ---- */
	--radius-xl: 30px;

	/* ---- Shadow aliases (1/2/3 spelling per design-system brief) + cinematic ---- */
	--shadow-1:         var(--shadow-sm);
	--shadow-2:         var(--shadow-md);
	--shadow-3:         var(--shadow-lg);
	--shadow-cinematic: 0 34px 90px rgba(2, 7, 17, 0.48);

	/* ---- Surface-aware font stacks (consumers in lwl-lesson + lwl-writing-atelier) ---- */
	--font-lesson-display:  "Spectral", "Georgia", "Cambria", serif;
	--font-lesson-overline: "Cinzel", "Georgia", "Times New Roman", serif;
	--font-atelier-display: var(--font-display);
	--font-atelier-body:    var(--font-body);

	/* ---- Easing: bounce (blooms only) ---- */
	--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* ---- Weight: heavy (rare emphasis) ---- */
	--fw-heavy: 700;

	/* ---- Motion ---- */
	--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--dur-fast: 180ms;
	--dur-base: 320ms;
	--dur-slow: 600ms;
	--dur-slower: 1200ms;

	/* ---- Z-index scale ---- */
	--z-base: 1;
	--z-elev: 10;
	--z-sticky: 100;
	--z-overlay: 1000;
}

/* Honor reduced-motion preference globally. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 0ms;
		--dur-base: 0ms;
		--dur-slow: 0ms;
		--dur-slower: 0ms;
	}
}