/* ========================================================================== Systema HR — Design Tokens The single source of truth. Nothing below this file hard-codes a colour, a radius, a shadow, a duration or an easing curve. Accent is the Systema HR brand blue (#3B82E8, previously exposed as --primary-color-1 in assets/css/colors/yellow-2.css). The Linear-style depth language — layered ambient light, multi-layer shadows, expo-out motion — is hue-agnostic, so the brand colour drives it unchanged. ========================================================================== */ :root { /* --------------------------------------------------------------------- Colour — deep space with ambient light --------------------------------------------------------------------- */ --bg-deep: #020203; --bg-base: #050506; --bg-elevated: #0a0a0c; --bg-input: #0f0f12; --surface: rgba(255, 255, 255, 0.05); --surface-hover: rgba(255, 255, 255, 0.08); --surface-gradient: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); --surface-gradient-hover: linear-gradient(to bottom, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03)); --fg: #ededef; --fg-muted: #8a8f98; --fg-subtle: rgba(255, 255, 255, 0.6); --accent: #3b82e8; --accent-bright: #5192f0; --accent-dim: #2f6bc4; --accent-rgb: 59, 130, 232; --accent-glow: rgba(59, 130, 232, 0.3); --accent-wash: rgba(59, 130, 232, 0.08); --border: rgba(255, 255, 255, 0.06); --border-hover: rgba(255, 255, 255, 0.1); --border-accent: rgba(59, 130, 232, 0.3); /* Ambient light pools. Blue-led, with a cooler indigo and a violet tertiary so the canvas never reads as a single flat wash. */ --ambient-1: rgba(59, 130, 232, 0.25); --ambient-2: rgba(94, 106, 210, 0.15); --ambient-3: rgba(120, 90, 220, 0.12); --ambient-4: rgba(59, 130, 232, 0.1); /* --------------------------------------------------------------------- Typography --------------------------------------------------------------------- */ --font-sans: "Inter", "Geist Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Fluid scale: mobile floor → desktop ceiling, no breakpoint jumps. */ --text-display: clamp(2.25rem, 1.15rem + 5.5vw, 6rem); /* Interior page titles ("About Us", "Supply Chain"). Deliberately a step down from --text-display: the home hero is the only place that earns the full 96px, and these sit above a standfirst rather than alone. */ --text-page-title: clamp(2rem, 1.25rem + 3.9vw, 4.75rem); --text-h1: clamp(2rem, 1.35rem + 3.25vw, 3.75rem); --text-h2: clamp(1.5rem, 1.19rem + 1.56vw, 2.25rem); --text-h3: clamp(1.125rem, 1.03rem + 0.47vw, 1.5rem); --text-lead: clamp(1rem, 0.94rem + 0.31vw, 1.25rem); --text-body: clamp(0.9375rem, 0.91rem + 0.16vw, 1rem); --text-sm: 0.875rem; --text-label: 0.75rem; --tracking-display: -0.03em; --tracking-tight: -0.02em; --tracking-wide: 0.18em; --leading-none: 1; --leading-tight: 1.1; --leading-snug: 1.35; --leading-relaxed: 1.7; /* --------------------------------------------------------------------- Radius --------------------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-full: 9999px; /* --------------------------------------------------------------------- Shadow & glow — never a single layer. border highlight + soft diffuse + ambient darkness (+ accent glow) --------------------------------------------------------------------- */ --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 20px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 0, 0, 0.2); --shadow-card-hover: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 80px rgba(var(--accent-rgb), 0.1); --shadow-accent: 0 0 0 1px rgba(var(--accent-rgb), 0.5), 0 4px 12px rgba(var(--accent-rgb), 0.3), inset 0 1px 0 0 rgba(255, 255, 255, 0.2); --shadow-accent-hover: 0 0 0 1px rgba(var(--accent-rgb), 0.6), 0 6px 20px rgba(var(--accent-rgb), 0.42), 0 0 40px rgba(var(--accent-rgb), 0.25), inset 0 1px 0 0 rgba(255, 255, 255, 0.25); --shadow-inset-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.1); --shadow-elevated: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 70px rgba(0, 0, 0, 0.65); /* --------------------------------------------------------------------- Motion — quick, precise, expo-out. Never bouncy. --------------------------------------------------------------------- */ --ease-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out: cubic-bezier(0.33, 1, 0.68, 1); --dur-quick: 200ms; --dur-base: 300ms; --dur-enter: 600ms; --dur-float: 9000ms; /* Hover displacement stays tiny — this is precision, not play. */ --lift: -4px; --lift-lg: -8px; --press: 0.98; /* --------------------------------------------------------------------- Layout --------------------------------------------------------------------- */ --container: 1200px; --container-wide: 1400px; --gutter: clamp(1.25rem, 0.85rem + 2vw, 2.5rem); --section-y: clamp(4rem, 2.2rem + 7.5vw, 8rem); --section-y-sm: clamp(3rem, 1.9rem + 4.5vw, 5rem); --header-h: 76px; /* --------------------------------------------------------------------- Z-index ladder --------------------------------------------------------------------- */ --z-ambient: 0; --z-content: 1; --z-header: 50; --z-menu: 60; --z-toast: 100; --z-loader: 200; } /* Motion sensitivity: kill float, parallax, marquee and reveal transforms. Content must remain fully legible and reachable without any animation. */ @media (prefers-reduced-motion: reduce) { :root { --dur-quick: 1ms; --dur-base: 1ms; --dur-enter: 1ms; --lift: 0px; --lift-lg: 0px; --press: 1; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }