/* ========================================================================== Design tokens. Dark is the primary brand experience; light is a separately designed theme (cooler grays, deeper teal/blue for contrast), not an inversion. Theme is set on (see partials/theme-init). ========================================================================== */ :root { --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); --fs-2xl: clamp(1.5rem, 1.25rem + 1.1vw, 2rem); --fs-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem); --fs-hero: clamp(2.25rem, 1.45rem + 3.7vw, 4.25rem); --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 6rem; --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --container: 72rem; --gutter: clamp(1rem, 4vw, 2rem); --touch: 2.75rem; /* minimum touch target */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --dur: 0.25s; } :root, :root[data-theme="dark"] { color-scheme: dark; --bg: #06080b; --bg-raised: #0b0f14; --surface: #0f141a; --surface-2: #151b23; --border: #1c2530; --border-strong: #2a3644; --text: #e9eef3; --text-muted: #9aa6b4; --text-faint: #7a8797; /* contrast fix: old #6e7a89 fell to 3.96:1 on --surface-2, below WCAG AA */ --accent: #2dd4bf; /* teal, for text/icons on dark */ --accent-2: #60a5fa; /* blue */ --gradient: linear-gradient(120deg, #2dd4bf 0%, #3b82f6 100%); --btn-from: #2dd4bf; --btn-to: #3b82f6; --btn-text: #03110f; --ring: #5eead4; --danger: #f87171; --danger-bg: rgba(248, 113, 113, 0.1); --success: #34d399; --success-bg: rgba(52, 211, 153, 0.1); --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.1); --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 32px -14px rgba(0, 0, 0, 0.65); --header-bg: rgba(6, 8, 11, 0.88); --grid-line: rgba(148, 163, 184, 0.07); --glow-a: rgba(45, 212, 191, 0.15); --glow-b: rgba(59, 130, 246, 0.13); --overlay: rgba(0, 0, 0, 0.6); } :root[data-theme="light"] { color-scheme: light; --bg: #f4f6f8; --bg-raised: #ffffff; --surface: #ffffff; --surface-2: #eef2f5; --border: #dde3ea; --border-strong: #c5cfd9; --text: #0a1017; --text-muted: #46525f; --text-faint: #5c6671; /* contrast fix: old #6b7784 fell to 4.06:1 on --surface-2, below WCAG AA */ --accent: #0f766e; /* deeper teal keeps AA contrast on light */ --accent-2: #1d4ed8; --gradient: linear-gradient(120deg, #0f766e 0%, #1d4ed8 100%); --btn-from: #0f766e; --btn-to: #1d4ed8; --btn-text: #ffffff; --ring: #0f766e; --danger: #b91c1c; --danger-bg: rgba(185, 28, 28, 0.08); --success: #047857; --success-bg: rgba(4, 120, 87, 0.09); --warning: #92400e; --warning-bg: rgba(146, 64, 14, 0.09); --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 14px 32px -16px rgba(15, 23, 42, 0.2); --header-bg: rgba(244, 246, 248, 0.92); --grid-line: rgba(15, 23, 42, 0.06); --glow-a: rgba(15, 118, 110, 0.1); --glow-b: rgba(29, 78, 216, 0.08); --overlay: rgba(10, 16, 23, 0.45); }