/* ========================================================================== Routio — Design tokens Light theme is the default (:root). Dark theme activates via [data-theme="dark"] on , used site-wide once the §3.11 toggle is switched, and always active inside .omoda-section (scoped dark island). ========================================================================== */ :root { /* ---- Light theme (default) ---- */ --canvas: #F4F6F8; --canvas-deep: #E6E9EC; --surface: #FFFFFF; --surface-muted: #F6F7F9; --border: #E4E7EB; --text-primary: #111827; --text-secondary: #6B7280; --text-tertiary: #9CA3AF; --primary: #1A64F5; --primary-hover: #124FD1; --primary-soft: #E3ECFE; --accent: #10B981; --accent-hover: #0E9E6E; --accent-soft: #DAEFEB; --accent-contrast: #063D2C; --amber: #F59E0B; --amber-soft: #FDF0D8; --violet: #AB59F7; --violet-soft: #E8DCF9; --danger: #EF4444; --cyan: #33CCFF; --brand-gradient: linear-gradient(135deg, #00139A 0%, #2A2FC4 45%, #708AD5 100%); --brand-glow: #24D8FF; /* elevation (light) */ --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px rgba(16, 24, 40, .06); --shadow-focus: 0 0 0 2px var(--canvas), 0 0 0 4px var(--primary); /* radii */ --r-section: 24px; --r-card: 16px; --r-tile: 12px; --r-pill: 999px; /* header bg (light) */ --header-bg: rgba(244, 246, 248, 0.72); color-scheme: light; } /* Whole-page dark mode, toggled from §3.11 */ :root[data-theme="dark"] { --canvas: #070C12; --canvas-deep: #0B111B; --surface: #141C2B; --surface-muted: #182235; --border: #223046; --text-primary: #F1F5F9; --text-secondary: #94A3B8; --text-tertiary: #6B7A90; --primary: #24D8FF; --primary-hover: #59E3FF; --primary-soft: #10202B; --accent: #38CFA2; --accent-hover: #3CEBB7; --accent-soft: #0F2A22; --accent-contrast: #EAFBF4; --amber: #F59E0B; --amber-soft: #2A2110; --violet: #AB59F7; --violet-soft: #241533; --danger: #FF4A4A; --cyan: #24D8FF; --shadow-sm: none; --header-bg: rgba(7, 12, 18, 0.72); color-scheme: dark; } /* Dark tokens available as a fixed set for permanently-dark islands (the Omoda section), independent of the page-wide toggle. */ .omoda-section { --canvas: #070C12; --canvas-deep: #0B111B; --surface: #141C2B; --surface-muted: #182235; --surface-teal: #0F1F29; --border: #223046; --text-primary: #F1F5F9; --text-secondary: #94A3B8; --text-tertiary: #6B7A90; --accent: #38CFA2; --accent-hover: #3CEBB7; --accent-soft: #0F2A22; --accent-contrast: #EAFBF4; --cyan: #24D8FF; --lime: #A3C44E; --signal: #4ADE80; --danger: #FF4A4A; --shadow-sm: none; color-scheme: dark; } /* ---- Type scale (custom properties so JS/CSS agree; values are clamp()'d in type.css) ---- */ :root { --font-display: "Manrope", "Segoe UI", sans-serif; --font-body: "Inter", "Segoe UI", sans-serif; --ease-standard: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 200ms; --dur-base: 260ms; --dur-slow: 320ms; --container-max: 1280px; --container-pad: 32px; } @media (max-width: 640px) { :root { --container-pad: 20px; } }