/* ═══════════════════════════════════════════════════════════════ DESIGN TOKENS — see design-rules.md Light base, blue gradient accent, layered depth. Nothing downstream hardcodes a colour, shadow, or duration. Change the look of the whole site from this file. ═══════════════════════════════════════════════════════════════ */ :root { /* ── THE GRADIENT ───────────────────────────────────────────── Both ends dark, light break at 70%, so it reads as depth rather than a flat wash. Do not regrade the stops. */ --grad-brand: linear-gradient(151deg, rgba(28, 87, 237, 1) 0%, rgba(81, 184, 232, 1) 48%, rgba(186, 238, 255, 1) 70%, rgba(28, 90, 184, 1) 100%); /* Steeper variant for tall/narrow fills (rails, edges) — same ramp, angled so the light break still lands mid-element. */ --grad-brand-v: linear-gradient(178deg, rgba(28, 87, 237, 1) 0%, rgba(81, 184, 232, 1) 48%, rgba(186, 238, 255, 1) 70%, rgba(28, 90, 184, 1) 100%); /* Button fill — biased to the dark ends so white text always clears contrast. The ice stop is pulled out deliberately. */ --grad-brand-solid: linear-gradient(151deg, #1c57ed 0%, #2f7fe0 55%, #1c5ab8 100%); /* Stroke/keyline variant. The #baeeff stop is near-invisible on white, so anything thin — 2-3px marks, the loop arcs — uses this legibility-safe ramp instead. See design-rules §10. */ --grad-brand-line: linear-gradient(151deg, #1c57ed 0%, #51b8e8 55%, #1c5ab8 100%); /* Solids pulled from the ramp */ --brand-indigo: #1c57ed; --brand-sky: #51b8e8; --brand-ice: #baeeff; --brand-deep: #1c5ab8; --brand-indigo-a12: rgba(28, 87, 237, 0.12); --brand-indigo-a20: rgba(28, 87, 237, 0.20); --brand-sky-a14: rgba(81, 184, 232, 0.14); --brand-ice-a45: rgba(186, 238, 255, 0.45); /* ── GREEN — retired 14 Aug 2026, unused ────────────────────── Existed for exactly one purpose: marking the Ecommerce Ops discipline card in Skills as operationally distinct from the two creative cards beside it. That card went away when Skills became "What I deliver", so nothing references these now and green is banned page-wide again (design-rules §2). Kept only so the ramp doesn't have to be re-derived if a future section earns it — putting them back on the page is a design decision, not a convenience. */ --grad-green-line: linear-gradient(151deg, #0e9f6e 0%, #34d399 55%, #047857 100%); --green-deep: #047857; --green-tint: #ecfdf5; --green-border: rgba(16, 185, 129, 0.28); /* Inline form validation only (CTA). Muted, not alarm-red, so it sits inside the page's cool palette instead of fighting it. */ --error: #c0392b; /* ── SURFACE ───────────────────────────────────────────────── Page is tinted so white modules read as raised off it. */ --surface-page: #eef2f8; --surface: #ffffff; --surface-sunken: #f4f7fb; --surface-tint: #f7fafd; --surface-brand-tint: #eff6fe; /* Ground for dark-UI product screenshots (Taskanchor). Sampled from the shots themselves — all seven share this exact value — so a `contain` fit letterboxes invisibly instead of showing a band of the wrong dark against the screenshot's own. Not a surface colour: never put site content on it. */ --surface-shot: #15171c; /* ── TEXT ──────────────────────────────────────────────────── Near-black carries a blue cast so it belongs to the palette. */ --text-primary: #0d1526; --text-secondary: #4a5670; --text-muted: #7b8699; /* 4.6:1 — labels only, never body */ --text-faint: #a8b2c4; --text-on-brand: #ffffff; /* ── BORDER ────────────────────────────────────────────────── Bottom border is a step darker than the rest — that plus the top highlight is what makes a block read as extruded. */ --border: #e4eaf2; --border-strong: #d2dbe8; --border-bottom: #dbe3ee; --border-brand: rgba(28, 87, 237, 0.28); /* ── DEPTH ─────────────────────────────────────────────────── Layered: tight contact shadow + wide soft shadow. One shadow alone reads flat. Cool-tinted, never pure black. */ --highlight-top: inset 0 1px 0 rgba(255, 255, 255, 1); --e1: 0 1px 2px rgba(13, 21, 38, 0.04), 0 2px 8px -2px rgba(13, 21, 38, 0.06); --e2: 0 1px 2px rgba(13, 21, 38, 0.04), 0 8px 20px -6px rgba(13, 21, 38, 0.10); --e3: 0 2px 4px rgba(13, 21, 38, 0.05), 0 18px 40px -12px rgba(13, 21, 38, 0.13); --e4: 0 4px 10px rgba(13, 21, 38, 0.07), 0 28px 60px -16px rgba(13, 21, 38, 0.18); --e-brand: 0 2px 6px rgba(28, 87, 237, 0.22), 0 12px 28px -8px rgba(28, 87, 237, 0.42); --e-brand-hover: 0 3px 10px rgba(28, 87, 237, 0.30), 0 18px 40px -10px rgba(28, 87, 237, 0.52); --e-sunken: inset 0 1px 3px rgba(13, 21, 38, 0.06), inset 0 0 0 1px rgba(13, 21, 38, 0.02); /* ── MOTION ────────────────────────────────────────────────── One curve. Nothing slower than 250ms. */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 250ms; --stagger: 30ms; --lift: -4px; --spotlight: 0.09; /* ── TYPE ────────────────────────────────────────────────── */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-micro: 0.75rem; --fs-small: 0.875rem; --fs-body: 1rem; --fs-lead: 1.125rem; --fs-h3: 1.25rem; --fs-h2: 1.875rem; --fs-h1: 2.5rem; --lh-tight: 1.08; --lh-snug: 1.3; --lh-body: 1.65; /* ── SPACE — 8px base ────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* Nested radii step DOWN one level, never match the parent. */ --radius-xs: 6px; --radius-sm: 10px; --radius: 14px; --radius-lg: 20px; --radius-pill: 999px; --page-max: 1180px; --gutter: 20px; --section-space: var(--sp-8); } @media (min-width: 768px) { :root { --fs-h1: 3.5rem; --fs-h2: 2.375rem; --fs-h3: 1.5rem; --fs-lead: 1.25rem; --gutter: 40px; --section-space: var(--sp-9); } } @media (min-width: 1280px) { :root { --fs-h1: 4.25rem; --fs-h2: 2.625rem; } } /* Reduced motion: every duration, the lift, and the spotlight go to zero. Reveals become instant. Nothing moves. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --stagger: 0ms; --lift: 0px; --spotlight: 0; } }