/* Fleet220 — Design tokens * Color, type, spacing, motion. Map 1:1 to Tailwind config later. * AAA-grade contrast pairs marked in comments. */ :root { /* ── Color: neutrals ─────────────────────────────────── */ --ink-1000: #050606; /* near-black, body on light bg ─ AAA */ --ink-900: #0e0f0e; --ink-700: #2a2c2a; --ink-500: #5a5d5a; /* secondary text on light ─ AA */ --ink-400: #7a7d7a; --ink-300: #b6b8b4; --ink-200: #d6d6d1; --ink-100: #e8e7e1; /* hairline borders */ --ink-50: #f5f4ef; /* page bg (off-white) */ --ink-0: #ffffff; /* ── Color: accent (deep forest + spark green) ───────── */ /* Deep ─ used as fill on light bg, white text passes AAA */ --accent-900: #04372a; --accent-800: #05513e; --accent-700: #066952; /* primary accent on light, white text ≈ 7.4:1 AAA */ --accent-600: #0a7d63; --accent-500: #10a380; --accent-400: #34d399; /* spark green ─ ONLY on dark bg */ --accent-300: #6ee7b7; --accent-200: #a7f3d0; --accent-100: #d1fae5; --accent-50: #ecfdf5; /* ── Semantic ────────────────────────────────────────── */ --bg: var(--ink-50); --bg-elevated: var(--ink-0); --surface-dark: #003a64; /* deep navy ─ white text ≈ 11.7:1 AAA */ --bg-inverse: var(--surface-dark); --fg: var(--ink-1000); --fg-muted: var(--ink-500); --fg-inverse: var(--ink-0); --border: rgba(5, 6, 6, 0.12); --border-strong:rgba(5, 6, 6, 0.24); --accent: var(--accent-700); --accent-on: var(--ink-0); --accent-spark: var(--accent-400); /* Brand-specific spot colors */ --brand-odos: #1cce5e; /* ODOS wordmark green */ --focus-ring: var(--accent-700); --focus-ring-on-dark: var(--accent-300); /* ── Type ────────────────────────────────────────────── */ --font-display: "Galano Grotesque", "Helvetica Neue", system-ui, sans-serif; --font-body: "Aller", "Helvetica Neue", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", monospace; /* Base size scales with the a11y font-scale (set on ). */ --fs-root: 1rem; /* user can scale via toolbar (100/115/130%) */ --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.875rem; /* 14 */ --fs-base: 1rem; /* 16 */ --fs-lg: 1.125rem; /* 18 */ --fs-xl: 1.25rem; /* 20 */ --fs-2xl: 1.5rem; /* 24 */ --fs-3xl: 1.875rem; /* 30 */ --fs-4xl: 2.5rem; /* 40 */ --fs-5xl: 3.5rem; /* 56 */ --fs-6xl: clamp(3rem, 5.5vw + 1rem, 6.5rem); /* hero */ --lh-tight: 1.05; --lh-snug: 1.5; /* a11y: raised from 1.2 → WCAG 1.4.12 wants running text ≥ 1.5. Only used on body copy (ledes, *__text, list items), never headings. */ --lh-normal: 1.5; --lh-loose: 1.7; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-wide: 0.08em; /* ── Spacing & layout (density tweakable) ────────────── */ --density: 1; /* 0.8 compact · 1 standard · 1.25 airy */ --space-1: calc(0.25rem * var(--density)); --space-2: calc(0.5rem * var(--density)); --space-3: calc(0.75rem * var(--density)); --space-4: calc(1rem * var(--density)); --space-5: calc(1.5rem * var(--density)); --space-6: calc(2rem * var(--density)); --space-7: calc(3rem * var(--density)); --space-8: calc(4rem * var(--density)); --space-9: calc(6rem * var(--density)); --space-10: calc(8rem * var(--density)); --section-py: var(--space-9); --container: 76rem; /* 1216px */ --container-wide: 88rem; /* 1408px */ --gutter: clamp(1rem, 3vw, 2rem); --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --radius-xl: 32px; --radius-full: 999px; --shadow-sm: 0 1px 2px rgba(5,6,6,0.04), 0 1px 1px rgba(5,6,6,0.03); --shadow-md: 0 4px 12px rgba(5,6,6,0.06), 0 2px 4px rgba(5,6,6,0.04); --shadow-lg: 0 18px 40px -12px rgba(5,6,6,0.18), 0 8px 16px -8px rgba(5,6,6,0.08); /* ── Motion ──────────────────────────────────────────── */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 520ms; } /* ── Density variants ──────────────────────────────────── */ :root[data-density="compact"] { --density: 0.82; --section-py: var(--space-8); } :root[data-density="standard"] { --density: 1; --section-py: var(--space-9); } :root[data-density="airy"] { --density: 1.25; --section-py: var(--space-10); } /* ── Palette variants (4 directions) ───────────────────── */ /* default = forest */ :root[data-palette="forest"] { /* defaults above */ } :root[data-palette="mono"] { --accent-900: #0a0a0a; --accent-800: #1a1a1a; --accent-700: #1a1a1a; --accent-600: #2a2a2a; --accent-500: #4a4a4a; --accent-400: #d4d4d0; --accent-300: #e5e5e0; } :root[data-palette="sage"] { --accent-900: #1f3a2f; --accent-800: #2c5240; --accent-700: #386a52; /* mid-sage, white text still ≈ 5.4:1 AA-large */ --accent-600: #4a8568; --accent-500: #6aae8a; --accent-400: #9fcfb4; --accent-300: #c4e1cf; } :root[data-palette="electric"] { --accent-900: #052836; --accent-800: #064760; --accent-700: #096c8c; --accent-600: #0e8aaf; --accent-500: #20b2d4; --accent-400: #5dd5ed; --accent-300: #a4e7f5; } /* ── A11y: high-contrast mode ──────────────────────────── */ :root[data-contrast="high"] { --bg: #ffffff; --bg-elevated: #ffffff; --fg: #000000; --fg-muted: #000000; --border: #000000; --border-strong: #000000; --accent: #000000; --accent-on: #ffffff; --shadow-sm: none; --shadow-md: 0 0 0 2px #000; --shadow-lg: 0 0 0 2px #000; } /* ── A11y: font-size scale ─────────────────────────────── */ :root[data-fs="md"] { font-size: 100%; } :root[data-fs="lg"] { font-size: 115%; } :root[data-fs="xl"] { font-size: 130%; } /* ── Reduced motion (OS preference) ────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ── A11y widget toggles (data-* on ) ────────────── */ /* Text spacing — WCAG 1.4.12 targets on running text. */ :root[data-spacing="loose"] p, :root[data-spacing="loose"] li, :root[data-spacing="loose"] .prose { line-height: 1.6 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } :root[data-spacing="loose"] p { margin-bottom: 1.6em !important; } /* Reduced motion — manual toggle (mirrors the OS query) + reveal made visible. */ :root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } :root[data-motion="reduce"] .reveal { opacity: 1 !important; transform: none !important; } /* Underline all links (buttons excluded). */ :root[data-links="underline"] a:not(.btn) { text-decoration: underline !important; text-underline-offset: 2px; } /* High-legibility font. */ :root[data-font="readable"] { --font-body: "Atkinson Hyperlegible", system-ui, sans-serif; --font-display: "Atkinson Hyperlegible", system-ui, sans-serif; }