/* Hallmark · macrostructure: Marquee Hero · tone: trustworthy-technical · anchor hue: cobalt-navy * theme: Cobalt · paper: light · display: Space Grotesk (grotesk-sans) · accent: deep navy * genre: modern-minimal · project: Zecel Cloud · date: 2026-08-04 */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&family=Space+Mono:wght@400;700&display=swap'); :root { /* ── Colour tokens (OKLCH) ─────────────────────────────────── */ /* Paper scale */ --color-paper: oklch(99% 0.002 250); /* near-white, barely-cool tint */ --color-paper-2: oklch(97% 0.004 250); /* section alternates */ --color-paper-3: oklch(94% 0.006 250); /* cards, input backgrounds */ --color-paper-4: oklch(90% 0.008 250); /* borders, dividers */ --color-paper-5: oklch(85% 0.010 250); /* strong borders, disabled fills */ /* Ink scale */ --color-ink: oklch(14% 0.025 258); /* body text — very dark navy-black */ --color-ink-2: oklch(35% 0.030 258); /* secondary text */ --color-ink-3: oklch(55% 0.020 255); /* muted / captions */ --color-ink-4: oklch(72% 0.012 252); /* placeholders */ /* Accent — deep cobalt navy (pulled from brand logo #02264d) */ --color-accent: oklch(24% 0.072 258); /* primary CTA bg, key headings */ --color-accent-2: oklch(32% 0.080 256); /* hover state */ --color-accent-3: oklch(42% 0.070 254); /* active / pressed */ --color-accent-light: oklch(92% 0.018 252); /* tinted bg chips, tag surfaces */ --color-accent-faint: oklch(96% 0.010 252); /* very light tint panels */ /* Vivid mid-blue — for AI highlight / accent pop */ --color-blue: oklch(56% 0.18 250); /* link colour, icon accent */ --color-blue-2: oklch(64% 0.16 248); /* hover on links */ --color-blue-light: oklch(94% 0.025 252); /* blue chip background */ /* Semantic */ --color-focus: oklch(56% 0.18 250); /* focus ring — 3:1 on white */ --color-error: oklch(55% 0.20 22); --color-success: oklch(52% 0.16 148); --color-warning: oklch(72% 0.16 75); /* Gradient helpers */ --gradient-hero: linear-gradient(135deg, oklch(99% 0.002 250) 0%, oklch(95% 0.012 252) 100%); --gradient-accent: linear-gradient(135deg, oklch(24% 0.072 258) 0%, oklch(32% 0.080 250) 100%); --gradient-blue-glow: radial-gradient(ellipse 60% 50% at 70% 40%, oklch(92% 0.03 252) 0%, transparent 70%); --gradient-section: linear-gradient(180deg, oklch(97% 0.004 250) 0%, oklch(99% 0.002 250) 100%); /* ── Typography tokens ─────────────────────────────────────── */ --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'Space Mono', 'Courier New', monospace; /* Type scale — major third + optical adjustments */ --text-xs: 0.6875rem; /* 11px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 1.875rem; /* 30px */ --text-3xl: 2.25rem; /* 36px */ --text-4xl: 3rem; /* 48px */ --text-display-s:4rem; /* 64px */ --text-display: 5.25rem; /* 84px */ /* Line heights */ --leading-tight: 1.08; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed:1.7; /* Letter spacing */ --tracking-tight: -0.03em; --tracking-snug: -0.015em; --tracking-normal: 0em; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.14em; /* ── Spacing (4pt scale) ───────────────────────────────────── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ --space-40: 10rem; /* 160px */ --space-48: 12rem; /* 192px */ /* Semantic spacing */ --space-xs: var(--space-2); --space-sm: var(--space-4); --space-md: var(--space-8); --space-lg: var(--space-16); --space-xl: var(--space-24); --space-2xl: var(--space-32); /* ── Layout ────────────────────────────────────────────────── */ --container-max: 1200px; --container-wide: 1400px; --container-prose: 680px; --grid-cols: 12; --gutter: var(--space-8); --gutter-lg: var(--space-12); /* ── Radius ─────────────────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-2xl: 32px; --radius-full: 9999px; /* ── Borders ─────────────────────────────────────────────────── */ --rule-hairline: 1px solid var(--color-paper-4); --rule-thin: 1px solid var(--color-paper-5); --rule-accent: 2px solid var(--color-accent); --rule-blue: 1.5px solid var(--color-blue); /* ── Shadows ─────────────────────────────────────────────────── */ --shadow-xs: 0 1px 3px oklch(14% 0.025 258 / 0.06); --shadow-sm: 0 2px 8px oklch(14% 0.025 258 / 0.08); --shadow-md: 0 4px 20px oklch(14% 0.025 258 / 0.10); --shadow-lg: 0 8px 40px oklch(14% 0.025 258 / 0.12); --shadow-xl: 0 16px 64px oklch(14% 0.025 258 / 0.14); --shadow-card:0 2px 12px oklch(14% 0.025 258 / 0.07), 0 0 0 1px var(--color-paper-4); --shadow-glow:0 0 40px oklch(56% 0.18 250 / 0.18); /* ── Motion ──────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-in-out: cubic-bezier(0.37, 0, 0.63, 1); --dur-instant: 80ms; --dur-fast: 160ms; --dur-normal: 240ms; --dur-slow: 400ms; --dur-crawl: 700ms; /* ── Z-index scale ───────────────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-overlay: 100; --z-nav: 200; --z-modal: 300; }