/* ========================================================================== Plumbix — Design Tokens Single source of truth for colour, type, spacing, radius, elevation. Edit here; every other stylesheet consumes these values. ========================================================================== */ :root { /* ---- Brand colour ---- */ --ink: #05070f; /* deepest — page base in dark sections */ --midnight: #0a1128; /* midnight blue */ --navy: #14224c; /* deep navy */ --navy-soft: #1d2f66; /* raised navy surface */ --royal: #2c4bff; /* royal blue — primary action */ --royal-deep: #1d34c9; --cyan: #22e4f2; /* electric cyan — signal accent */ --cyan-deep: #0bb9c8; --white: #ffffff; --mist: #f4f6fb; /* very light gray */ --mist-2: #e7ebf5; /* ---- Semantic surfaces ---- */ --surface: var(--white); --surface-alt: var(--mist); --surface-invert: var(--midnight); --surface-glass: rgba(255, 255, 255, 0.06); --surface-glass-lite: rgba(255, 255, 255, 0.72); /* ---- Text ---- */ --text: #0b1020; --text-muted: #4a5570; --text-faint: #6b7590; --text-invert: #ffffff; --text-invert-mut: rgba(233, 239, 255, 0.72); /* ---- Lines ---- */ --line: #dde3f0; --line-strong: #c6cfe4; --line-invert: rgba(255, 255, 255, 0.14); /* ---- Gradients ---- */ --grad-brand: linear-gradient(135deg, var(--royal) 0%, var(--cyan) 100%); --grad-deep: linear-gradient(160deg, var(--ink) 0%, var(--midnight) 45%, var(--navy) 100%); --grad-plume: linear-gradient(180deg, rgba(34, 228, 242, 0.85) 0%, rgba(44, 75, 255, 0.85) 100%); --grad-text: linear-gradient(92deg, #ffffff 0%, #b9e9ff 45%, var(--cyan) 100%); --grad-sheen: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%); /* ---- Focus ---- */ --focus: 0 0 0 3px rgba(34, 228, 242, 0.55), 0 0 0 6px rgba(10, 17, 40, 0.85); /* ---- Type ---- */ --font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif; --font-body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Fluid type scale — clamp(min, fluid, max) */ --fs-display: clamp(2.75rem, 1.35rem + 5.4vw, 6rem); --fs-h1: clamp(2.35rem, 1.35rem + 3.9vw, 4.35rem); --fs-h2: clamp(1.95rem, 1.25rem + 2.6vw, 3.15rem); --fs-h3: clamp(1.35rem, 1.1rem + 1.05vw, 1.85rem); --fs-h4: clamp(1.1rem, 1rem + 0.45vw, 1.3rem); --fs-lead: clamp(1.05rem, 0.98rem + 0.42vw, 1.28rem); --fs-body: 1rem; --fs-small: 0.9rem; --fs-micro: 0.76rem; --lh-tight: 1.02; --lh-snug: 1.16; --lh-body: 1.65; --track-eyebrow: 0.18em; --track-display: -0.03em; /* ---- Space (8pt base) ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --section-y: clamp(4rem, 2.5rem + 6vw, 8.5rem); --shell: 1240px; --shell-wide:1560px; --gutter: clamp(1.15rem, 0.6rem + 2.2vw, 2.75rem); /* ---- Radius ---- */ --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 34px; --r-pill: 999px; /* ---- Elevation ---- */ --sh-sm: 0 1px 2px rgba(10, 17, 40, 0.06), 0 2px 8px rgba(10, 17, 40, 0.05); --sh-md: 0 12px 30px -12px rgba(10, 17, 40, 0.22); --sh-lg: 0 34px 70px -28px rgba(10, 17, 40, 0.38); --sh-glow: 0 24px 60px -22px rgba(44, 75, 255, 0.55); /* ---- Motion ---- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 140ms; --t-med: 260ms; --t-slow: 620ms; --header-h: 76px; } /* Optional light-on-dark inversion applied by theme.js to */ [data-theme="dark"] { --surface: #070b18; --surface-alt: #0b1226; --text: #eef2ff; --text-muted: #a7b2cf; --text-faint: #8c98ba; --line: rgba(255, 255, 255, 0.12); --line-strong: rgba(255, 255, 255, 0.2); --surface-glass-lite: rgba(16, 24, 48, 0.72); --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --sh-md: 0 12px 30px -12px rgba(0, 0, 0, 0.6); --sh-lg: 0 34px 70px -28px rgba(0, 0, 0, 0.7); }