/* Flintt design tokens — the ONLY file where colors live. No hex/rgb/hsl anywhere else. Theme resolution: a `data-theme` attribute on wins ("light" | "dark"); with no attribute the OS preference applies. app.js persists the choice in localStorage("flintt.theme") = "system" | "light" | "dark" and index.html applies it pre-paint. Keep the two dark blocks below in sync (same declarations). */ /* ---------- theme-independent (type, spacing, motion) -------------------------------- */ :root{ --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","Segoe UI",ui-sans-serif,system-ui,sans-serif; --font-mono:"SF Mono",ui-monospace,"JetBrains Mono","Cascadia Mono",Menlo,monospace; --font-size-label:11px;--font-size-body:13px;--font-size-title:15px;--font-size-mono:12px; --font-weight-regular:400;--font-weight-medium:500;--font-weight-strong:600;--font-weight-selected:700; --line-dense:1.35;--line-body:1.5;--line-reading:1.65; --text-xs:11px;--text-sm:13px;--text-lg:15px; --control-h-compact:28px;--control-h:32px;--control-h-row:32px; --control-icon:16px;--control-icon-lg:18px; --control-pad-x:12px;--control-pad-y:7px; --radius-sm:8px;--radius-md:10px;--radius-lg:12px;--radius-pill:9px; --radius-segment:12px;--radius-segment-item:9px; --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px; --space-page:12px;--space-card:14px;--space-row:8px;--space-section:16px;--space-panel:18px; --tracking-body:-0.011em; --dur-fast:180ms;--dur-slow:420ms; --ease:cubic-bezier(.22,1,.36,1); --glass-blur:saturate(140%) blur(16px); --glass-blur-strong:saturate(150%) blur(24px); --ink:#e11d48; /* feedback pen — annotation red, identical in both themes */ } /* ---------- light (default) ----------------------------------------------------------- */ :root{ color-scheme:light; --surface-page:#fafafb;--surface-card:#ffffff;--surface-raised:#f1f3f6;--surface-inset:#f3f5f8; --surface-side:#f1f2f5; /* left sidebar */ --surface-tool:#16181c; --grid-dot:#e4e6ea; --text-primary:#0d0e10;--text-secondary:#494d55;--text-tertiary:#5a5f68;--text-muted:#8b9099; --text-on-accent:#ffffff;--text-on-tool:#f8f8f8; --accent:#0d0e10;--accent-strong:#2a2c30;--accent-soft:#e9ecf2;--accent-soft-line:#d4d8e0; --success:#15803d;--success-soft:#e8f3ec;--success-line:#b7d9c4; --warning:#9a6500;--warning-soft:#fbf1de;--warning-line:#e6cf9e; --error:#c4231f;--error-soft:#fbeae9;--error-line:#efc5c3; --border:rgba(10,12,16,0.12);--border-strong:rgba(10,12,16,0.18); --focus-ring:rgba(13,14,16,0.45); --scrim:rgba(10,12,16,0.42); --skel-sheen:rgba(255,255,255,0.5); --glass-card:rgba(255,255,255,0.6);--glass-rail:rgba(250,250,251,0.55);--glass-float:rgba(255,255,255,0.74); --glow:rgba(120,130,150,0.05); --selected-shadow:0 0 0 1px rgba(216,221,230,.18); --shadow-card:0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px -16px rgba(0,0,0,.6); --shadow-float:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -20px rgba(0,0,0,.7); --shadow-pop:0 4px 18px rgba(0,0,0,.28); } /* ---------- dark (manual choice) -------------------------------------------------------- */ :root[data-theme="dark"]{ color-scheme:dark; --surface-page:#0e0f12;--surface-card:#16181d;--surface-raised:#1e2127;--surface-inset:#121419; --surface-side:#121419; --surface-tool:#16181c; --grid-dot:#22252b; --text-primary:#e8eaee;--text-secondary:#aab0ba;--text-tertiary:#868c96;--text-muted:#61666f; --text-on-accent:#0d0e10;--text-on-tool:#f8f8f8; --accent:#e8eaee;--accent-strong:#ffffff;--accent-soft:#24272e;--accent-soft-line:#353a43; --success:#4cc380;--success-soft:#13271b;--success-line:#23553a; --warning:#e0b25e;--warning-soft:#2a2213;--warning-line:#5c4a24; --error:#ef6f6a;--error-soft:#2c1614;--error-line:#6b3230; --border:rgba(255,255,255,0.10);--border-strong:rgba(255,255,255,0.17); --focus-ring:rgba(232,234,238,0.45); --scrim:rgba(0,0,0,0.55); --skel-sheen:rgba(255,255,255,0.06); --glass-card:rgba(22,24,29,0.6);--glass-rail:rgba(14,15,18,0.55);--glass-float:rgba(22,24,29,0.74); --glow:rgba(120,130,150,0.05); --selected-shadow:0 0 0 1px rgba(255,255,255,.06); --shadow-card:0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px -16px rgba(0,0,0,.6); --shadow-float:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -20px rgba(0,0,0,.7); --shadow-pop:0 4px 18px rgba(0,0,0,.28); } /* ---------- dark (OS preference, no manual choice) ---------------------------------------- */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; --surface-page:#0e0f12;--surface-card:#16181d;--surface-raised:#1e2127;--surface-inset:#121419; --surface-side:#121419; --surface-tool:#16181c; --grid-dot:#22252b; --text-primary:#e8eaee;--text-secondary:#aab0ba;--text-tertiary:#868c96;--text-muted:#61666f; --text-on-accent:#0d0e10;--text-on-tool:#f8f8f8; --accent:#e8eaee;--accent-strong:#ffffff;--accent-soft:#24272e;--accent-soft-line:#353a43; --success:#4cc380;--success-soft:#13271b;--success-line:#23553a; --warning:#e0b25e;--warning-soft:#2a2213;--warning-line:#5c4a24; --error:#ef6f6a;--error-soft:#2c1614;--error-line:#6b3230; --border:rgba(255,255,255,0.10);--border-strong:rgba(255,255,255,0.17); --focus-ring:rgba(232,234,238,0.45); --scrim:rgba(0,0,0,0.55); --skel-sheen:rgba(255,255,255,0.06); --glass-card:rgba(22,24,29,0.6);--glass-rail:rgba(14,15,18,0.55);--glass-float:rgba(22,24,29,0.74); --glow:rgba(120,130,150,0.05); --selected-shadow:0 0 0 1px rgba(255,255,255,.06); --shadow-card:0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px -16px rgba(0,0,0,.6); --shadow-float:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -20px rgba(0,0,0,.7); --shadow-pop:0 4px 18px rgba(0,0,0,.28); } }