/* =========================================================================
   Languages with Liam — Journey Landing — Tokens (scoped)
   -------------------------------------------------------------------------
   Mirrors lwl-journey/assets/css/tokens.css but scoped to .lwl-jl so the
   landing page can never pollute the rest of the site (or be polluted by
   surface-level token rebinds). Anchor colours match the live system.
   ========================================================================= */

.lwl-jl {
	/* Anchor tokens */
	--color-coral:        #FC3C30;
	--color-coral-dark:   #C8362A;
	--color-sun:          #FCC000;
	--color-sun-soft:     #FFD63B;
	--color-ember:        #FC780C;
	--color-indigo:       #5460A8;
	--color-deep:         #3C3C78;

	/* Nature tokens */
	--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;
	--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 aliases */
	--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);

	/* Mood cascade (day default) */
	--bg:                 var(--color-paper);
	--paper:              var(--color-paper);
	--paper-raised:       var(--color-paper-warm);
	--ink:                var(--color-ink);
	--ink-strong:         #1A151F;
	--ink-muted:          var(--color-ink-soft);
	--accent:             var(--color-coral);
	--accent-glow:        rgba(252, 60, 48, 0.18);

	/* Hairlines */
	--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);

	/* Typography stacks */
	--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;
	--font-lesson-display: "Spectral", "Georgia", "Cambria", serif;
	--font-lesson-overline:"Cinzel", "Georgia", "Times New Roman", serif;

	/* Type scale */
	--fs-xs:    0.875rem;
	--fs-sm:    0.9375rem;
	--fs-base:  1.0625rem;
	--fs-md:    1.125rem;
	--fs-lg:    1.375rem;
	--fs-xl:    1.75rem;
	--fs-2xl:   2.5rem;
	--fs-3xl:   3.5rem;
	--fs-4xl:   4.5rem;

	--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;
	--fw-heavy:   700;

	/* Spacing */
	--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);

	/* Radii */
	--radius-sm:    6px;
	--radius-md:   12px;
	--radius-lg:   20px;
	--radius-xl:   30px;
	--radius-pill: 999px;

	/* Shadows */
	--shadow-1:         0 1px  2px rgba(43, 37, 48, 0.06);
	--shadow-2:         0 4px 16px rgba(43, 37, 48, 0.08);
	--shadow-3:         0 12px 40px rgba(43, 37, 48, 0.12);
	--shadow-cinematic: 0 34px 90px rgba( 2,  7, 17, 0.48);

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

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

/* Reduced motion — gardener-calm by default */
@media (prefers-reduced-motion: reduce) {
	.lwl-jl {
		--dur-fast:   0ms;
		--dur-base:   0ms;
		--dur-slow:   0ms;
		--dur-slower: 0ms;
	}
}