/* Drivee — Far x Bord · design tokens Dark is the DEFAULT theme: :root below carries the dark values. Light is an explicit opt-in used for documents and paperwork: put data-theme="light" on , , or any container. Pair with fonts.css (same folder level: ../fonts/fonts.css). */ :root { /* --- surfaces & ink (dark, default) --- */ --color-surface: #17191D; /* graphite */ --color-surface-raised: #22252B; /* panel */ --color-surface-raised-2:#3A3E46; /* panel-2 */ --color-accent: #E8A33C; /* instrument amber */ --color-on-accent: #17191D; --color-text: #EDEDEA; /* daylight */ --color-text-muted: #9BA1AC; /* dial */ --color-hairline: rgba(237, 237, 234, 0.12); --color-ok: #6FCF97; --color-warn: #E8A33C; --color-err: #E57373; --color-focus: #E8A33C; --focus-width: 1px; /* raw palette — available in both themes */ --palette-graphite: #17191D; --palette-panel: #22252B; --palette-panel-2: #3A3E46; --palette-amber: #E8A33C; --palette-amber-ink:#B07514; --palette-daylight: #EDEDEA; --palette-paper: #FFFFFF; --palette-dial: #9BA1AC; /* --- type --- */ --font-display: 'Space Grotesk', 'Trebuchet MS', 'DejaVu Sans', system-ui, sans-serif; --font-ui: 'IBM Plex Sans', 'Segoe UI', Tahoma, 'DejaVu Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', 'DejaVu Sans Mono', Consolas, 'Courier New', monospace; --text-display: 34px; --leading-display: 39px; --tracking-display: -0.015em; --text-h1: 26px; --leading-h1: 32px; --text-h2: 22px; --leading-h2: 28px; --text-h3: 19px; --leading-h3: 25px; --text-h4: 17px; --leading-h4: 23px; --text-h5: 15px; --leading-h5: 21px; --text-h6: 11px; --leading-h6: 14px; --text-body: 16px; --leading-body: 25px; --text-small: 14px; --leading-small: 21px; --text-caption: 13px; --leading-caption: 18px; --text-label: 10px; --leading-label: 13px; --tracking-label: 0.12em; --text-button: 15px; --leading-button: 20px; --text-data: 14px; --leading-data: 20px; --text-data-hero: 32px; --leading-data-hero: 34px; /* --- space --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 14px; --space-5: 18px; --space-6: 22px; --space-7: 26px; --space-8: 32px; --space-9: 40px; --space-10: 56px; --space-11: 72px; /* --- shape & depth --- */ --radius-control: 6px; --radius-card: 8px; --radius-app-icon:16px; --radius-pill: 100px; --border-width: 1px; --shadow-modal: 0 24px 60px -20px rgba(0, 0, 0, 0.60); --shadow-float: 0 12px 32px -12px rgba(0, 0, 0, 0.45); /* --- motion --- */ --duration-fast: 120ms; --duration-base: 150ms; --duration-slow: 180ms; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); /* --- layout --- */ --container-prose: 680px; --container-content: 1120px; --container-wide: 1240px; --tap-touch: 44px; --tap-pointer: 32px; } /* Explicit dark block — same values as :root, so a project that toggles data-theme in both directions never falls back to light by accident. */ [data-theme="dark"] { --color-surface: #17191D; --color-surface-raised: #22252B; --color-surface-raised-2:#3A3E46; --color-accent: #E8A33C; --color-on-accent: #17191D; --color-text: #EDEDEA; --color-text-muted: #9BA1AC; --color-hairline: rgba(237, 237, 234, 0.12); --color-ok: #6FCF97; --color-warn: #E8A33C; --color-err: #E57373; --color-focus: #E8A33C; --focus-width: 1px; } /* Light register — documents, forms, print. */ [data-theme="light"] { --color-surface: #EDEDEA; --color-surface-raised: #FFFFFF; --color-surface-raised-2:#FFFFFF; --color-accent: #B07514; /* amber darkens on light; never body text */ --color-on-accent: #FFFFFF; --color-text: #17191D; --color-text-muted: #565B64; --color-hairline: rgba(23, 25, 29, 0.15); --color-ok: #2E7D57; --color-warn: #B07514; --color-err: #C0392B; --color-focus: #17191D; --focus-width: 2px; } /* Print always uses the light register. */ @media print { :root { --color-surface: #FFFFFF; --color-surface-raised: #FFFFFF; --color-surface-raised-2: #FFFFFF; --color-accent: #B07514; --color-text: #17191D; --color-text-muted: #565B64; --color-hairline: rgba(23, 25, 29, 0.25); } } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; } }