/* ============================================================ SnapOut — design tokens iOS-like neutral surfaces + swappable accent palettes. Applied by JS: Accent-derived tints use color-mix so they adapt to the theme surface automatically — palette blocks only set --accent(+ -2). ============================================================ */ :root { /* --- base surfaces (light) --- */ --bg: #f2f2f7; --surface: #ffffff; --surface-2: #e9e9ef; --surface-3: #dcdce3; --border: rgba(60, 60, 67, 0.13); --shadow: 0 2px 14px rgba(30, 30, 40, 0.06); --shadow-lg: 0 10px 34px rgba(30, 30, 40, 0.16); --overlay: rgba(20, 20, 28, 0.45); /* --- text --- */ --text: #1c1c1e; --text-2: #6c6c72; --text-3: #a0a0a8; --on-accent: #ffffff; /* --- semantic --- */ --danger: #e5484d; --danger-soft: color-mix(in srgb, var(--danger) 15%, var(--surface)); --ok: #30a46c; /* --- shape & type --- */ --radius: 18px; --radius-sm: 12px; --radius-lg: 26px; --radius-pill: 999px; --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* --- default accent (sunrise); palette blocks below override --accent/-2 --- */ --accent: #ff8f3f; --accent-2: #ffc24d; /* --- accent-derived (defined once; resolve against the winning --accent) --- */ --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface)); --accent-line: color-mix(in srgb, var(--accent) 34%, var(--surface)); --accent-ink: color-mix(in srgb, var(--accent) 72%, var(--text)); /* --- chart marks: single hue = accent; grid recessive --- */ --chart-1: var(--accent); --chart-grid: var(--border); /* ring "morning" backdrop */ --ring-bg-1: color-mix(in srgb, var(--accent) 42%, #12121a); --ring-bg-2: #08080c; } html[data-theme="dark"] { --bg: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e; --surface-3: #3a3a3c; --border: rgba(235, 235, 245, 0.14); --shadow: 0 2px 14px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 34px rgba(0, 0, 0, 0.55); --overlay: rgba(0, 0, 0, 0.6); --text: #f5f5f7; --text-2: #9a9aa2; --text-3: #6c6c74; --on-accent: #ffffff; --danger: #ff6b6b; --ok: #3ddc84; --ring-bg-1: color-mix(in srgb, var(--accent) 30%, #0a0a10); --ring-bg-2: #000000; } /* ---------- accent palettes ---------- */ html[data-palette="sunrise"] { --accent: #ff8f3f; --accent-2: #ffc24d; } html[data-palette="mono"] { --accent: #7c7c86; --accent-2: #a8a8b2; } html[data-palette="ocean"] { --accent: #2e9bd6; --accent-2: #33c5c0; } html[data-palette="meadow"] { --accent: #4fae5f; --accent-2: #9cc94a; } /* Slightly brighter accents in dark mode for legibility on black */ html[data-theme="dark"][data-palette="sunrise"] { --accent: #ff9d55; } html[data-theme="dark"][data-palette="mono"] { --accent: #a0a0aa; } html[data-theme="dark"][data-palette="ocean"] { --accent: #45aee4; } html[data-theme="dark"][data-palette="meadow"] { --accent: #64c274; }