/* ============================================================ Edgecraft Design Tokens — CSS Custom Properties v1.1 · 2026-06-11 · source of truth: design-tokens.json Usage: themes switch via . Light is the DEFAULT (also applied to bare :root). Color custom properties hold HSL triplets — consume as: color: hsl(var(--foreground-default)); background: hsl(var(--brand-500) / 0.1); // alpha supported ============================================================ */ :root { /* ---- Brand constants (theme-independent) ---- */ --brand-accent-hex: #5CD5F3; /* Accent Cyan (brand anchor) */ --brand-ink: 197 76% 12%; /* #072A33 — text on cyan fills */ --brand-deep-black: 0 0% 4%; /* #0A0A0A */ --brand-soft-charcoal: 0 0% 17%; /* #2B2B2B */ --brand-light-gray: 0 0% 91%; /* #E9E9E9 */ /* ---- Typography ---- */ --font-heading: "Sora", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "Source Code Pro", Menlo, Consolas, monospace; --text-xs: 0.75rem; --text-xs--lh: 1.3333; --text-sm: 0.875rem; --text-sm--lh: 1.4286; --text-base: 1rem; --text-base--lh: 1.5; --text-lg: 1.125rem; --text-lg--lh: 1.5556; --text-xl: 1.25rem; --text-xl--lh: 1.4; --text-2xl: 1.5rem; --text-2xl--lh: 1.3333; --text-3xl: 1.875rem; --text-3xl--lh: 1.2; --text-4xl: 2.25rem; --text-4xl--lh: 1.1111; --text-5xl: 3rem; --text-5xl--lh: 1; --text-6xl: 3.75rem; --text-6xl--lh: 1; --text-7xl: 4.5rem; --text-7xl--lh: 1; --text-8xl: 6rem; --text-8xl--lh: 1; --tracking-tight: -0.025em; --tracking-wide: 0.025em; --tracking-widest: 0.1em; /* ---- Spacing / layout ---- */ --spacing: 0.25rem; /* 4px base unit */ --container-max: 80rem; /* 1280px */ --container-text: 48rem; --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; /* nav collapse */ --breakpoint-xl: 1280px; --breakpoint-2xl: 1536px; /* ---- Radii ---- */ --radius-sm: 0.25rem; /* 4px checkboxes, chips */ --radius-md: 0.375rem; /* 6px buttons, inputs */ --radius-lg: 0.5rem; /* 8px cards, modals, popovers */ --radius-xl: 0.75rem; /* 12px media frames */ --radius-2xl: 1rem; /* 16px marketing tiles */ --radius-full: 9999px; /* ---- Elevation ---- */ --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05); --shadow-md: 0 4px 12px rgb(0 0 0 / 0.08); --shadow-lg: 0 8px 30px rgb(0 0 0 / 0.12); --blur-nav: 4px; /* ---- Motion ---- */ --duration-fast: 100ms; --duration-default: 150ms; --duration-hover: 200ms; --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ---- Z-index ---- */ --z-nav: 40; --z-dropdown: 50; --z-overlay: 80; --z-modal: 90; --z-toast: 100; --z-tooltip: 110; --success-default: 152.9 60% 52.9%; /* #3FCF8E — status only */ } /* ============ LIGHT THEME (default) ============ */ :root, [data-theme="light"] { color-scheme: light; /* brand cyan ramp */ --brand-200: 192 75% 92%; /* #DBF4FA */ --brand-300: 192 75% 82%; /* #AFE6F4 */ --brand-400: 192 86% 66%; /* #5CD5F3 */ --brand-500: 192 85% 38%; /* #0F92B3 primary button */ --brand-600: 194 90% 26%; /* #07627E */ --brand-default: 192 86% 66%; /* #5CD5F3 */ --brand-link: 194 100% 32%; /* #007DA3 links, accent headline */ /* sub-accent: Deep Indigo (≤2% of viewport; never CTAs/links) */ --subaccent-200: 226 80% 95%; /* #E8EDFC */ --subaccent-300: 226 75% 87%; /* #C5D1F7 */ --subaccent-500: 226 58% 44%; /* #2F4DB1 */ --subaccent-default: 226 70% 55%; /* #3C61DD */ /* backgrounds */ --background-default: 0 0% 98.8%; /* #FCFCFC page */ --background-200: 0 0% 97.3%; /* #F8F8F8 */ --background-alternative: 0 0% 99.2%; /* #FDFDFD */ --background-surface-75: 0 0% 100%; /* #FFFFFF */ --background-surface-100: 0 0% 98.8%; /* #FCFCFC card */ --background-surface-200: 0 0% 95.3%; /* #F3F3F3 */ --background-surface-300: 0 0% 92.9%; /* #EDEDED */ --background-surface-400: 0 0% 89.8%; /* #E5E5E5 */ --background-muted: 0 0% 96.9%; /* #F7F7F7 */ --background-control: 0 0% 95.3%; /* #F3F3F3 inputs */ --background-selection: 0 0% 92.9%; /* #EDEDED */ --background-overlay: 0 0% 98.8%; /* #FCFCFC dropdowns */ --background-overlay-hover: 0 0% 95.3%; --background-button-default: 0 0% 98.8%; --background-dialog: 0 0% 100%; --background-dash-sidebar: 0 0% 98.8%; --background-dash-canvas: 0 0% 97.3%; /* foregrounds */ --foreground-default: 0 0% 9%; /* #171717 */ --foreground-light: 0 0% 32.2%; /* #525252 */ --foreground-lighter: 0 0% 43.9%; /* #707070 */ --foreground-muted: 0 0% 69.8%; /* #B2B2B2 */ --foreground-contrast: 0 0% 98.4%; /* on dark/brand-500 fills */ /* borders */ --border-default: 0 0% 87.5%; /* #DFDFDF */ --border-muted: 0 0% 92.9%; /* #EDEDED */ --border-secondary: 0 0% 92.9%; --border-strong: 0 0% 83.1%; /* #D4D4D4 */ --border-stronger: 0 0% 56.1%; /* #8F8F8F */ --border-control: 0 0% 78%; /* #C7C7C7 */ --border-button-default: 0 0% 88.6%; /* #E2E2E2 */ --border-button-hover: 0 0% 85.9%; /* #DBDBDB */ /* status */ --warning-default: 30.3 80.3% 47.8%; --warning-600: 30.3 80.3% 47.8%; --warning-500: 36.3 85.7% 67.1%; --warning-400: 41.9 100% 81.8%; --warning-300: 44.3 100% 91.8%; --warning-200: 40 81.8% 97.8%; --destructive-default: 10.2 77.9% 53.9%; --destructive-600: 9.9 82% 43.5%; --destructive-500: 10.4 77.1% 79.4%; --destructive-400: 7.1 91.3% 91%; --destructive-300: 7.1 100% 96.7%; --destructive-200: 0 100% 99.4%; } /* ============ DARK THEME ============ */ [data-theme="dark"] { color-scheme: dark; /* brand cyan ramp */ --brand-200: 196 100% 4%; /* #000F14 */ --brand-300: 193 100% 8%; /* #002029 */ --brand-400: 192 100% 11%; /* #002D38 */ --brand-500: 192 95% 20%; /* #035063 button bg */ --brand-600: 190 65% 76%; /* #9ADCEA */ --brand-default: 192 86% 66%; /* #5CD5F3 */ --brand-link: 191 95% 48%; /* #06C4EF */ /* sub-accent: Deep Indigo (≤2% of viewport; never CTAs/links) */ --subaccent-200: 228 45% 17%; /* #18203F */ --subaccent-300: 228 48% 21%; /* #1C264F */ --subaccent-500: 226 58% 44%; /* #2F4DB1 */ --subaccent-default: 228 100% 76%; /* #859DFF */ /* backgrounds */ --background-default: 0 0% 7.1%; /* #121212 page */ --background-200: 0 0% 9%; /* #171717 */ --background-alternative: 0 0% 5.9%; /* #0F0F0F */ --background-surface-75: 0 0% 9%; /* #171717 */ --background-surface-100: 0 0% 12.2%; /* #1F1F1F card */ --background-surface-200: 0 0% 12.9%; /* #212121 */ --background-surface-300: 0 0% 16.1%; /* #292929 */ --background-surface-400: 0 0% 16.1%; /* #292929 */ --background-muted: 0 0% 14.1%; /* #242424 */ --background-control: 0 0% 14.1%; /* #242424 */ --background-selection: 0 0% 19.2%; /* #313131 */ --background-overlay: 0 0% 14.1%; /* #242424 */ --background-overlay-hover: 0 0% 18%; /* #2E2E2E */ --background-button-default: 0 0% 18%; /* #2E2E2E */ --background-dialog: 0 0% 7.1%; --background-dash-sidebar: 0 0% 9%; --background-dash-canvas: 0 0% 7.1%; /* foregrounds */ --foreground-default: 0 0% 98%; /* #FAFAFA */ --foreground-light: 0 0% 70.6%; /* #B4B4B4 */ --foreground-lighter: 0 0% 53.7%; /* #898989 */ --foreground-muted: 0 0% 30.2%; /* #4D4D4D */ --foreground-contrast: 0 0% 8.6%; /* #161616 on light fills */ /* borders */ --border-default: 0 0% 18%; /* #2E2E2E */ --border-muted: 0 0% 14.1%; /* #242424 */ --border-secondary: 0 0% 14.1%; --border-strong: 0 0% 21.2%; /* #363636 */ --border-stronger: 0 0% 27.1%; /* #454545 */ --border-control: 0 0% 22.4%; /* #393939 */ --border-button-default: 0 0% 24.3%; /* #3E3E3E */ --border-button-hover: 0 0% 31.4%; /* #505050 */ /* status */ --warning-default: 38.9 100% 42.9%; --warning-600: 38.9 100% 42.9%; --warning-500: 34.8 90.9% 21.6%; --warning-400: 33.2 100% 14.5%; --warning-300: 32.3 100% 10.2%; --warning-200: 36.6 100% 8%; --destructive-default: 10.2 77.9% 53.9%; --destructive-600: 9.7 85.2% 62.9%; --destructive-500: 7.9 71.6% 29%; --destructive-400: 6.7 60% 20.6%; --destructive-300: 7.5 51.3% 15.3%; --destructive-200: 10.9 23.4% 9.2%; --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3); --shadow-md: 0 4px 12px rgb(0 0 0 / 0.4); --shadow-lg: 0 8px 30px rgb(0 0 0 / 0.5); }