/*
|--------------------------------------------------------------------------
| EventFlow Design System
| EFDS-001
| Version: 1.0
|--------------------------------------------------------------------------
|
| Architecture:
|
| Primitive Tokens
|     ↓
| Semantic Tokens
|     ↓
| Components
|
| Components SHALL consume semantic tokens whenever the meaning of the
| value is contextual (background, text, border, motion, layout).
|--------------------------------------------------------------------------
*/

:root {

	/* ========================================================
	   BRAND PRIMITIVES
	   ======================================================== */

	--ef-color-primary: #081b4b;
	--ef-color-secondary: #0d2d72;
	--ef-color-surface: #11254d;

	--ef-color-white: #ffffff;

	--ef-color-cyan: #44d9e6;
	--ef-color-cyan-soft: #6ce8f2;

	--ef-color-orange: #ff724f;
	--ef-color-green: #6fd27b;
	--ef-color-purple: #8d7dff;

	/* ========================================================
	   SEMANTIC COLORS
	   ======================================================== */

	--ef-color-background: var(--ef-color-primary);
	--ef-color-text: var(--ef-color-white);
	--ef-color-text-muted: rgba(255, 255, 255, 0.68);
	--ef-color-border: rgba(255, 255, 255, 0.14);

	--ef-color-accent: var(--ef-color-cyan);
	--ef-color-accent-soft: var(--ef-color-cyan-soft);

	/* ========================================================
	   COLOR SYSTEM
	   ======================================================== */

	--ef-color-navy-950: #06122f;
	--ef-color-navy-900: #081b4b;
	--ef-color-navy-800: #0d2d72;
	--ef-color-navy-700: #123d92;

	--ef-color-cyan-500: #44d9e6;
	--ef-color-cyan-400: #6ce8f2;
	--ef-color-cyan-300: #93f0f7;

	--ef-color-blue-glow: rgba(68, 217, 230, 0.40);
	--ef-color-blue-glow-soft: rgba(68, 217, 230, 0.18);

	--ef-surface-0: var(--ef-color-navy-950);
	--ef-surface-1: var(--ef-color-navy-900);
	--ef-surface-2: var(--ef-color-navy-800);
	--ef-surface-3: rgba(255, 255, 255, 0.04);

	--ef-gradient-institutional:
		linear-gradient(
			135deg,
			var(--ef-color-navy-950) 0%,
			var(--ef-color-navy-900) 52%,
			var(--ef-color-navy-800) 100%
		);

	--ef-gradient-glow:
		radial-gradient(
			circle at center,
			rgba(68, 217, 230, 0.18) 0%,
			rgba(68, 217, 230, 0.06) 36%,
			transparent 72%
		);

	--ef-accent: var(--ef-color-cyan-500);
	--ef-accent-soft: var(--ef-color-cyan-400);
	--ef-accent-glow: var(--ef-color-blue-glow);

	--ef-glow-sm: 0 0 18px rgba(68, 217, 230, 0.20);
	--ef-glow-md: 0 0 32px rgba(68, 217, 230, 0.35);
	--ef-glow-lg: 0 0 72px rgba(68, 217, 230, 0.24);

	--ef-border-subtle: rgba(255, 255, 255, 0.10);
	--ef-border-accent: rgba(68, 217, 230, 0.36);

	/* ========================================================
	   TYPOGRAPHY PRIMITIVES
	   ======================================================== */

	--ef-font-primary: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--ef-font-heading: var(--ef-font-primary);
	--ef-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

	--ef-font-xs: 0.75rem;
	--ef-font-sm: 0.875rem;
	--ef-font-md: 1rem;
	--ef-font-lg: 1.25rem;
	--ef-font-xl: 2rem;
	--ef-font-2xl: 3rem;
	--ef-font-hero: 4rem;

	/* ========================================================
	   TYPOGRAPHY SEMANTICS
	   ======================================================== */

	--ef-font-sans: var(--ef-font-primary);

	--ef-font-size-xs: var(--ef-font-xs);
	--ef-font-size-sm: var(--ef-font-sm);
	--ef-font-size-base: var(--ef-font-md);
	--ef-font-size-md: var(--ef-font-lg);

	--ef-line-height-tight: 1.1;
	--ef-line-height-heading: 1.2;
	--ef-line-height-body: 1.6;

	/* ========================================================
	   TYPOGRAPHY SCALE
	   ======================================================== */

	--ef-text-display: clamp(3.5rem, 8vw, 8rem);
	--ef-text-h1: clamp(2.75rem, 6vw, 6rem);
	--ef-text-h2: clamp(2.25rem, 4.5vw, 4.5rem);
	--ef-text-h3: clamp(1.5rem, 2.5vw, 2.5rem);
	--ef-text-h4: 1.25rem;
	--ef-text-body-lg: clamp(1.125rem, 1.5vw, 1.375rem);
	--ef-text-body: 1rem;
	--ef-text-small: 0.875rem;
	--ef-text-micro: 0.75rem;

	--ef-weight-regular: 400;
	--ef-weight-medium: 500;
	--ef-weight-semibold: 600;
	--ef-weight-bold: 700;

	--ef-tracking-tight: -0.045em;
	--ef-tracking-heading: -0.025em;
	--ef-tracking-normal: 0;
	--ef-tracking-wide: 0.08em;
	--ef-tracking-system: 0.12em;

	--ef-measure-body: 68ch;
	--ef-measure-lead: 52ch;
	--ef-measure-heading: 18ch;

	/* ========================================================
	   SPACING
	   ======================================================== */

	--ef-space-1: 0.25rem;
	--ef-space-2: 0.5rem;
	--ef-space-3: 1rem;
	--ef-space-4: 1.5rem;
	--ef-space-5: 2rem;
	--ef-space-6: 3rem;
	--ef-space-7: 4rem;
	--ef-space-8: 6rem;
	--ef-space-9: 8rem;
	--ef-space-10: 10rem;

	/* ========================================================
	   GEOMETRY
	   ======================================================== */

	--ef-radius-sm: 6px;
	--ef-radius-md: 12px;
	--ef-radius-lg: 20px;
	--ef-radius-xl: 28px;
	--ef-radius-pill: 999px;

	/* ========================================================
	   SHADOWS
	   ======================================================== */

	--ef-shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.15);
	--ef-shadow-md: 0 12px 40px rgba(0, 0, 0, 0.22);
	--ef-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.30);

	/* ========================================================
	   GLOW
	   ======================================================== */

	--ef-glow-cyan: 0 0 32px rgba(68, 217, 230, 0.35);
	--ef-glow-soft: 0 0 60px rgba(68, 217, 230, 0.18);

	/* ========================================================
	   MOTION PRIMITIVES
	   ======================================================== */

	--ef-speed-fast: 0.18s;
	--ef-speed-normal: 0.30s;
	--ef-speed-slow: 0.60s;

	--ef-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* ========================================================
	   MOTION SEMANTICS
	   ======================================================== */

	--ef-duration-fast: var(--ef-speed-fast);
	--ef-duration-base: var(--ef-speed-normal);
	--ef-duration-slow: var(--ef-speed-slow);

	--ef-ease-standard: var(--ef-ease);

	/* ========================================================
	   MOTION SYSTEM
	   ======================================================== */

	--ef-motion-distance-sm: 0.5rem;
	--ef-motion-distance-md: 1rem;
	--ef-motion-distance-lg: 2rem;

	--ef-motion-scale-in: 0.985;
	--ef-motion-scale-hover: 1.015;

	--ef-motion-opacity-hidden: 0;
	--ef-motion-opacity-visible: 1;

	--ef-motion-stagger-1: 60ms;
	--ef-motion-stagger-2: 120ms;
	--ef-motion-stagger-3: 180ms;
	--ef-motion-stagger-4: 240ms;

	/* ========================================================
	   ANIMATION FRAMEWORK
	   ======================================================== */

	--ef-animation-enter: 700ms;
	--ef-animation-reveal: 620ms;
	--ef-animation-emphasis: 360ms;

	--ef-animation-distance-sm: 0.75rem;
	--ef-animation-distance-md: 1.5rem;
	--ef-animation-distance-lg: 3rem;

	--ef-animation-blur: 8px;

	--ef-parallax-sm: 0.04;
	--ef-parallax-md: 0.08;

	/* ========================================================
	   LAYOUT PRIMITIVES
	   ======================================================== */

	--ef-container-sm: 48rem;
	--ef-container-md: 64rem;
	--ef-container-lg: 80rem;
	--ef-container-xl: 90rem;

	--ef-container: var(--ef-container-lg);
	--ef-content: 57.5rem;

	--ef-page-gutter: clamp(1.25rem, 4vw, 4rem);
	--ef-header-height: 82px;

	/* ========================================================
	   INTERACTION SYSTEM
	   ======================================================== */

	--ef-control-height-sm: 2.5rem;
	--ef-control-height-md: 3rem;
	--ef-control-height-lg: 3.5rem;

	--ef-control-padding-inline-sm: 1rem;
	--ef-control-padding-inline-md: 1.375rem;
	--ef-control-padding-inline-lg: 1.75rem;

	--ef-focus-ring: 0 0 0 3px rgba(68, 217, 230, 0.22);
	--ef-disabled-opacity: 0.42;

	/* ========================================================
	   FORM SYSTEM
	   ======================================================== */

	--ef-field-height: 3.25rem;
	--ef-field-padding-inline: 1rem;
	--ef-field-padding-block: 0.75rem;

	--ef-field-background: rgba(255, 255, 255, 0.045);
	--ef-field-background-focus: rgba(255, 255, 255, 0.07);

	--ef-field-border: var(--ef-border-subtle);
	--ef-field-border-focus: var(--ef-border-accent);

	--ef-field-placeholder: rgba(255, 255, 255, 0.42);

	--ef-color-success: var(--ef-color-green);
	--ef-color-warning: #f4c95d;
	--ef-color-danger: #ff6b6b;

	/* ========================================================
	   LAYOUT ENGINE
	   ======================================================== */

	--ef-grid-columns: 12;
	--ef-grid-gap: var(--ef-space-5);

	--ef-section-space-sm: var(--ef-space-6);
	--ef-section-space-md: var(--ef-space-8);
	--ef-section-space-lg: var(--ef-space-10);

	--ef-breakpoint-sm: 40rem;
	--ef-breakpoint-md: 64rem;
	--ef-breakpoint-lg: 80rem;

	/* ========================================================
	   LAYERING
	   ======================================================== */

	--ef-z-header: 100;
	--ef-z-modal: 1000;
}