/**
 * Momentum Design Tokens
 * -----------------------------------------------------------------------
 * Single source of truth for color, type, space, radius, motion and
 * shadow. Every other stylesheet consumes these variables — never a
 * hardcoded hex/px value. Section-level color moods (dark / off-white /
 * crimson) are applied via the `.section--*` modifier classes below, not
 * via prefers-color-scheme: this theme deliberately alternates mood by
 * section rather than offering a whole-site dark-mode toggle (see README).
 */

:root {
	/* ---- Brand palette ---------------------------------------------- */
	--color-black:        #0b0b0d;
	--color-charcoal:     #17171b;
	--color-charcoal-2:   #212126;
	--color-offwhite:     #f6f4f0;
	--color-offwhite-2:   #eeece5;
	--color-white:        #ffffff;

	--color-crimson-900:  #4a0512;
	--color-crimson-700:  #7a0a1e;
	--color-crimson-600:  #9c0f27;
	--color-crimson-500:  #c11330;
	--color-crimson-400:  #e0193a;

	--color-magenta-600:  #8a1a86;
	--color-magenta-500:  #b0219c;
	--color-magenta-400:  #d13fc0;

	--color-neon-500:     #26e07f;
	--color-neon-400:     #4dfb9c;

	--color-blue-support:  #3a6df0; /* small supporting accent only — never primary */

	/* ---- Semantic roles (LIGHT / default surfaces) -------------------- */
	--color-background:       var(--color-offwhite);
	--color-background-alt:   var(--color-offwhite-2);
	--color-surface:          var(--color-white);
	--color-surface-dark:     var(--color-charcoal);

	--color-text:             var(--color-charcoal);
	--color-text-muted:       #4b4b52;
	--color-text-light:       var(--color-offwhite);
	--color-text-on-dark:     var(--color-offwhite);
	--color-text-on-crimson:  var(--color-white);
	--color-text-on-neon:     var(--color-black);

	--color-primary:          var(--color-crimson-600);
	--color-primary-dark:     var(--color-crimson-700);
	--color-primary-light:    var(--color-crimson-400);
	--color-secondary:        var(--color-magenta-500);
	--color-accent:           var(--color-neon-500);

	--color-border:           #ddd9d0;
	--color-border-dark:      #34343b;

	--color-success:          #1c8a52;
	--color-warning:          #b5750a;
	--color-error:            var(--color-crimson-600);
	--color-focus-ring:       var(--color-magenta-500);

	--color-link:             var(--color-crimson-700);
	--color-link-hover:       var(--color-crimson-600);

	/* ---- Typography ---------------------------------------------------- */
	--font-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	--fs-display:  clamp(2.75rem, 2rem + 3.2vw, 5.5rem);
	--fs-h1:       clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);
	--fs-h2:       clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
	--fs-h3:       clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
	--fs-h4:       clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);
	--fs-body-lg:  clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
	--fs-body:     1rem;
	--fs-small:    0.875rem;
	--fs-label:    0.75rem;
	--fs-button:   0.9375rem;

	--lh-tight:  1.08;
	--lh-heading: 1.18;
	--lh-body:   1.6;

	--ls-tight: -0.02em;
	--ls-label: 0.08em;

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

	/* ---- Spacing scale (4px base) --------------------------------------- */
	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-5:  1.5rem;
	--space-6:  2rem;
	--space-7:  2.5rem;
	--space-8:  3rem;
	--space-9:  4rem;
	--space-10: 5rem;
	--space-11: 6.5rem;
	--space-12: 8rem;

	--section-padding-y: clamp(3.5rem, 3rem + 3vw, 8rem);

	/* ---- Layout ---------------------------------------------------------- */
	--container-max: 1280px;
	--container-max-wide: 1440px;
	--container-max-narrow: 760px;
	--container-gutter: clamp(1.25rem, 1rem + 2vw, 2.5rem);
	--grid-gap: clamp(1.25rem, 1rem + 1vw, 2rem);

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

	--shadow-sm: 0 1px 2px rgba(11, 11, 13, 0.06);
	--shadow-md: 0 8px 24px rgba(11, 11, 13, 0.10);
	--shadow-lg: 0 24px 64px rgba(11, 11, 13, 0.16);
	--shadow-glow-crimson: 0 0 0 1px rgba(193, 19, 48, 0.35), 0 12px 40px rgba(193, 19, 48, 0.22);
	--shadow-glow-neon: 0 0 0 1px rgba(38, 224, 127, 0.3), 0 12px 40px rgba(38, 224, 127, 0.18);

	--border-width: 1px;

	/* ---- Motion ------------------------------------------------------------ */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--duration-fast: 150ms;
	--duration-base: 250ms;
	--duration-slow: 450ms;
	--duration-reveal: 650ms;

	/* ---- Z-index scale ------------------------------------------------------ */
	--z-header: 100;
	--z-mega-menu: 110;
	--z-mobile-menu: 120;
	--z-modal: 130;
	--z-toast: 140;
	--z-skip-link: 200;
}

/* ---------------------------------------------------------------------------
 * Section mood modifiers. Apply ONE of these classes to a <section>.
 * Each sets background + text + link + border tokens together so nothing
 * is ever combined by accident (e.g. red text on a red background).
 * ------------------------------------------------------------------------- */

.section--light {
	--section-bg: var(--color-background);
	--section-bg-alt: var(--color-surface);
	--section-text: var(--color-text);
	--section-text-muted: var(--color-text-muted);
	--section-border: var(--color-border);
	--section-link: var(--color-link);
	--section-heading: var(--color-charcoal);
}

.section--offwhite {
	--section-bg: var(--color-offwhite-2);
	--section-bg-alt: var(--color-surface);
	--section-text: var(--color-text);
	--section-text-muted: var(--color-text-muted);
	--section-border: var(--color-border);
	--section-link: var(--color-link);
	--section-heading: var(--color-charcoal);
}

.section--dark {
	--section-bg: var(--color-black);
	--section-bg-alt: var(--color-charcoal);
	--section-text: var(--color-text-on-dark);
	--section-text-muted: #b7b6bd;
	--section-border: var(--color-border-dark);
	--section-link: var(--color-neon-400);
	--section-heading: var(--color-white);
}

.section--crimson {
	--section-bg: var(--color-crimson-600);
	--section-bg-alt: var(--color-crimson-700);
	--section-text: var(--color-text-on-crimson);
	--section-text-muted: rgba(255, 255, 255, 0.78);
	--section-border: rgba(255, 255, 255, 0.28);
	--section-link: var(--color-white);
	--section-heading: var(--color-white);
}

.section--neon {
	--section-bg: var(--color-neon-500);
	--section-bg-alt: var(--color-neon-400);
	--section-text: var(--color-text-on-neon);
	--section-text-muted: #1c3327;
	--section-border: rgba(11, 11, 13, 0.2);
	--section-link: var(--color-black);
	--section-heading: var(--color-black);
}

.section {
	background-color: var(--section-bg);
	color: var(--section-text);
}