:root { color-scheme: light; /* ===== COLOR — brand ===== */ --brand: #174A38; --brand-2: #23644B; --brand-soft: rgba(23, 74, 56, .07); --brand-tint: #EEF7F2; --action: #D99A18; --action-2: #F2C766; --action-soft: rgba(217, 154, 24, .16); --on-action: #2A1E00; /* ===== COLOR — neutrals ===== */ --bg: #F7F8F7; --surface: #FFFFFF; --surface-2: #FBFCFB; --ink: #16211B; --ink-2: #5F6B64; --ink-3: #738077; --hairline: rgba(23, 74, 56, .12); /* ===== COLOR — semantic ===== */ --ok: #2E9E5B; --warn: #C77700; --danger: #D42B20; --info: #2274A5; --ok-soft: rgba(46, 158, 91, .12); --warn-soft: rgba(199, 119, 0, .12); --danger-soft: rgba(212, 43, 32, .10); --info-soft: rgba(34, 116, 165, .12); /* ===== COLOR — card accents ===== */ --card-pink: #EC4899; --card-purple: #7C3AED; --card-indigo: #6366F1; --card-sky: #38BDF8; --card-orange: #FB923C; --card-green: #22C55E; --card-green-2: #16A34A; --card-green-soft: #DCFCE7; --on-vibrant: #FFFFFF; --card-vibrant-shadow: 0 14px 34px rgba(23, 74, 56, .16); /* ===== TYPE ===== */ --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --text-xs: 12px; --text-sm: 13.5px; --text-base: 15px; --text-md: 17px; --text-lg: 22px; --text-xl: 28px; --text-2xl: 40px; --leading: 1.47; --tracking: -.01em; --tracking-tight: -.025em; /* ===== SPACE — 4px grid ===== */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* ===== SHAPE ===== */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; /* ===== ELEVATION ===== */ --shadow-card: 0 1px 2px rgba(23, 74, 56, .04), 0 8px 22px rgba(23, 74, 56, .055); --shadow-float: 0 4px 14px rgba(23, 74, 56, .08), 0 16px 44px rgba(23, 74, 56, .10); --shadow-modal: 0 24px 72px rgba(23, 74, 56, .18); /* ===== MATERIAL ===== */ --glass: rgba(255, 255, 255, .78); --blur: saturate(180%) blur(20px); /* ===== MOTION ===== */ --ease: cubic-bezier(.22, 1, .36, 1); --dur-fast: .15s; --dur-base: .25s; --dur-slow: .45s; } /* * Dark mode is intentionally opt-in. * The product defaults to a light, calm canvas so system-level dark mode * does not make data tables and dense admin screens unreadable. * Add data-theme="dark" on or only after a dedicated dark QA pass. */ [data-theme="dark"] { --bg: #111713; --surface: #1A211D; --surface-2: #202922; --ink: #F4F7F5; --ink-2: #C3CCC6; --ink-3: #A5AEA8; --hairline: rgba(255, 255, 255, .12); --brand: #8ED8B1; --brand-2: #B6E9CC; --brand-soft: rgba(142, 216, 177, .12); --brand-tint: rgba(142, 216, 177, .16); --action: #E6B14A; --action-2: #F4CA72; --on-action: #271B00; --glass: rgba(26, 33, 29, .78); --shadow-card: 0 1px 2px rgba(0, 0, 0, .18), 0 10px 28px rgba(0, 0, 0, .22); --shadow-float: 0 8px 24px rgba(0, 0, 0, .28), 0 20px 56px rgba(0, 0, 0, .30); --shadow-modal: 0 24px 80px rgba(0, 0, 0, .45); --card-pink: #F472B6; --card-purple: #A78BFA; --card-indigo: #818CF8; --card-sky: #7DD3FC; --card-orange: #FDBA74; --card-green: #4ADE80; --card-green-2: #22C55E; --card-green-soft: rgba(74, 222, 128, .16); --on-vibrant: #101914; --card-vibrant-shadow: 0 16px 38px rgba(0, 0, 0, .30); }