/* ========================================================================== FLEXIONEX — DESIGN TOKENS Single source of truth. Approved at Gate 3A. Do not hardcode colour, type, spacing or motion values anywhere else. ========================================================================== */ :root { /* ── BRAND ─────────────────────────────────────────────────────────── */ --fx-navy-900: #061729; --fx-navy-800: #0B2545; /* PRIMARY */ --fx-navy-700: #123A6B; --fx-navy-600: #1B4C87; --fx-navy-500: #2A5A94; --fx-navy-100: #E8EEF6; --fx-navy-50: #F4F7FB; --fx-orange-600: #D9491F; --fx-orange-500: #E85A28; --fx-orange-400: #FF6B35; /* ACCENT */ --fx-orange-300: #FF8A5F; --fx-orange-100: #FFEDE5; /* ── METALLIC ──────────────────────────────────────────────────────── */ --fx-steel-700: #5A6875; --fx-steel-500: #8B99A6; --fx-steel-300: #C4CDD5; --fx-steel-100: #E9EDF1; /* ── INK (dark sections) ───────────────────────────────────────────── */ --fx-ink-950: #05080D; --fx-ink-900: #0A0E14; --fx-ink-800: #12171F; --fx-ink-700: #1C2530; --fx-ink-600: #2A3542; /* ── NEUTRAL ───────────────────────────────────────────────────────── */ --fx-gray-700: #334155; --fx-gray-600: #4A5568; --fx-gray-500: #64748B; --fx-gray-400: #94A3B8; --fx-gray-300: #CBD5E1; --fx-gray-200: #E2E8F0; --fx-gray-100: #F1F5F9; --fx-gray-50: #F8FAFC; --fx-white: #FFFFFF; /* ── STATUS ────────────────────────────────────────────────────────── */ --fx-success: #0E9F6E; --fx-success-bg: #E6F6F0; --fx-warning: #D97706; --fx-warning-bg: #FEF3E2; --fx-danger: #DC2626; --fx-danger-bg: #FEECEC; --fx-info: var(--fx-navy-600); --fx-info-bg: var(--fx-navy-100); /* ── SEMANTIC — LIGHT SURFACE (default) ────────────────────────────── */ --fx-bg: var(--fx-white); --fx-bg-subtle: var(--fx-gray-50); --fx-bg-muted: var(--fx-gray-100); --fx-bg-brand-tint: var(--fx-navy-50); --fx-surface: var(--fx-white); --fx-surface-raised: var(--fx-white); --fx-text: var(--fx-ink-800); --fx-text-strong: var(--fx-navy-800); --fx-text-muted: var(--fx-gray-600); --fx-text-subtle: var(--fx-gray-500); --fx-text-spec: var(--fx-navy-800); --fx-text-unit: var(--fx-steel-500); --fx-border: var(--fx-gray-200); --fx-border-strong: var(--fx-steel-300); --fx-border-brand: var(--fx-navy-800); --fx-link: var(--fx-navy-700); --fx-link-hover: var(--fx-orange-400); --fx-focus-ring: var(--fx-orange-400); /* ── TYPOGRAPHY ────────────────────────────────────────────────────── */ --fx-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fx-font-mono: "JetBrains Mono", "SF Mono", "Roboto Mono", Consolas, "Liberation Mono", monospace; --fx-text-2xs: 0.6875rem; /* 11 */ --fx-text-xs: 0.75rem; /* 12 */ --fx-text-sm: 0.875rem; /* 14 */ --fx-text-base: 1rem; /* 16 */ --fx-text-lg: 1.125rem; /* 18 */ --fx-text-xl: clamp(1.25rem, 1.15rem + 0.30vw, 1.375rem); --fx-text-2xl: clamp(1.50rem, 1.30rem + 0.60vw, 1.75rem); --fx-text-3xl: clamp(1.625rem, 1.25rem + 1.20vw, 2.25rem); --fx-text-4xl: clamp(1.875rem, 1.20rem + 2.20vw, 3rem); --fx-text-5xl: clamp(2.125rem, 1.20rem + 3.00vw, 3.75rem); --fx-text-6xl: clamp(2.500rem, 1.20rem + 4.20vw, 4.5rem); --fx-leading-tight: 1.15; --fx-leading-snug: 1.35; --fx-leading-normal: 1.60; --fx-leading-relaxed: 1.75; --fx-tracking-tighter: -0.03em; --fx-tracking-tight: -0.02em; --fx-tracking-normal: 0; --fx-tracking-wide: 0.06em; --fx-tracking-wider: 0.10em; /* ── SPACING (4px base) ────────────────────────────────────────────── */ --fx-s0: 0; --fx-s1: 0.25rem; --fx-s2: 0.5rem; --fx-s3: 0.75rem; --fx-s4: 1rem; --fx-s5: 1.5rem; --fx-s6: 2rem; --fx-s7: 3rem; --fx-s8: 4rem; --fx-s9: 6rem; --fx-s10: 8rem; --fx-s11: 10rem; --fx-section-y: clamp(3rem, 2rem + 5vw, 6rem); --fx-section-y-lg: clamp(4rem, 2.5rem + 7vw, 8rem); --fx-section-y-sm: clamp(2rem, 1.5rem + 3vw, 3.5rem); --fx-section-gap: var(--fx-s6); --fx-block-gap: var(--fx-s5); /* ── LAYOUT ────────────────────────────────────────────────────────── */ --fx-container: 1320px; --fx-container-narrow: 880px; --fx-container-wide: 1560px; --fx-gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem); --fx-header-h: 88px; --fx-header-h-compact: 64px; --fx-header-h-mobile: 64px; --fx-header-z: 100; --fx-megamenu-z: 90; --fx-mobilenav-z: 110; --fx-skiplink-z: 999; /* ── RADIUS ────────────────────────────────────────────────────────── */ --fx-radius-none: 0; --fx-radius-xs: 2px; --fx-radius-sm: 3px; --fx-radius: 4px; --fx-radius-md: 6px; --fx-radius-lg: 8px; /* ── SHADOW ────────────────────────────────────────────────────────── */ --fx-shadow-xs: 0 1px 2px rgba(10, 14, 20, .05); --fx-shadow-sm: 0 2px 4px rgba(10, 14, 20, .06); --fx-shadow: 0 4px 12px rgba(10, 14, 20, .08); --fx-shadow-md: 0 8px 20px rgba(10, 14, 20, .10); --fx-shadow-lg: 0 16px 40px rgba(10, 14, 20, .12); --fx-shadow-focus: 0 0 0 3px rgba(255, 107, 53, .35); /* ── MOTION ────────────────────────────────────────────────────────── */ --fx-ease: cubic-bezier(.16, 1, .3, 1); --fx-ease-in-out: cubic-bezier(.4, 0, .2, 1); --fx-ease-sharp: cubic-bezier(.4, 0, .6, 1); --fx-dur-instant: 100ms; --fx-dur-fast: 160ms; --fx-dur: 280ms; --fx-dur-slow: 480ms; --fx-dur-reveal: 640ms; /* ── TOUCH ─────────────────────────────────────────────────────────── */ --fx-touch-min: 44px; } /* ========================================================================== DARK SURFACE Applied by class, not media query. Dark is a design decision here, not a user preference. ========================================================================== */ .fx-dark { --fx-bg: var(--fx-ink-900); --fx-bg-subtle: var(--fx-ink-800); --fx-bg-muted: var(--fx-ink-800); --fx-bg-brand-tint: var(--fx-navy-900); --fx-surface: var(--fx-ink-800); --fx-surface-raised: var(--fx-ink-700); --fx-text: var(--fx-gray-100); --fx-text-strong: var(--fx-white); --fx-text-muted: var(--fx-gray-400); --fx-text-subtle: var(--fx-steel-500); --fx-text-spec: var(--fx-white); --fx-text-unit: var(--fx-steel-500); --fx-border: var(--fx-ink-700); --fx-border-strong: var(--fx-ink-600); --fx-border-brand: var(--fx-orange-400); --fx-link: var(--fx-orange-300); --fx-link-hover: var(--fx-orange-400); --fx-focus-ring: var(--fx-orange-300); background-color: var(--fx-bg); color: var(--fx-text); }