/* ============================================================ Simple Tools — Design Tokens Warm editorial system. Light + dark via [data-theme]. ============================================================ */ :root { /* Type */ --font-display: "Newsreader", Georgia, "Times New Roman", serif; --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; /* Type scale */ --t-xs: 0.78rem; --t-sm: 0.875rem; --t-base: 1rem; --t-md: 1.125rem; --t-lg: 1.375rem; --t-xl: 1.875rem; --t-2xl: 2.625rem; --t-3xl: 3.75rem; --t-4xl: 5rem; /* Spacing */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* Radius */ --r-sm: 8px; --r: 14px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px; /* Layout */ --maxw: 1200px; --rail-w: 300px; /* Per-tool accent: set --accent-base inline on or a wrapper. */ --accent-base: #b5512a; --accent: var(--accent-base); } /* ---------- LIGHT ---------- */ [data-theme="light"] { color-scheme: light; --accent: var(--accent-base); } :root, [data-theme="light"] { --paper: #f5efe3; --paper-2: #efe7d7; --surface: #fffdf8; --surface-2: #faf5ea; --ink: #221d16; --ink-2: #4c4438; --muted: #8b8073; --faint: #b3a895; --line: #e6ddcb; --line-strong: #d6c9b1; --shadow-color: 30 25 18; --shadow-1: 0 1px 2px rgb(var(--shadow-color) / 0.06), 0 2px 6px rgb(var(--shadow-color) / 0.05); --shadow-2: 0 4px 14px rgb(var(--shadow-color) / 0.08), 0 12px 30px rgb(var(--shadow-color) / 0.07); --shadow-3: 0 10px 30px rgb(var(--shadow-color) / 0.12), 0 30px 60px rgb(var(--shadow-color) / 0.10); --ad-bg: repeating-linear-gradient(135deg, #efe7d7 0 10px, #ece2d0 10px 20px); /* accent-derived (color-mix keeps everything coherent) */ --accent-soft: color-mix(in oklab, var(--accent) 13%, var(--surface)); --accent-tint: color-mix(in oklab, var(--accent) 7%, var(--surface)); --accent-line: color-mix(in oklab, var(--accent) 28%, var(--line)); --accent-ink: color-mix(in oklab, var(--accent) 72%, #1a140d); --on-accent: #fff8ee; } /* ---------- DARK ---------- */ [data-theme="dark"] { color-scheme: dark; --paper: #14110c; --paper-2: #1b160f; --surface: #211b13; --surface-2: #271f16; --ink: #f3ecdd; --ink-2: #d3c8b5; --muted: #9d9180; --faint: #6f6553; --line: #342b1f; --line-strong: #463a2a; --shadow-color: 0 0 0; --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3); --shadow-2: 0 6px 18px rgb(0 0 0 / 0.4); --shadow-3: 0 16px 40px rgb(0 0 0 / 0.55); --ad-bg: repeating-linear-gradient(135deg, #211b13 0 10px, #1c160f 10px 20px); --accent-soft: color-mix(in oklab, var(--accent) 22%, var(--surface)); --accent-tint: color-mix(in oklab, var(--accent) 12%, var(--surface)); --accent-line: color-mix(in oklab, var(--accent) 36%, var(--line)); --accent-ink: color-mix(in oklab, var(--accent) 60%, #fff3df); --on-accent: #1a130a; } /* brighten per-tool accents a touch in dark mode for legibility */ [data-theme="dark"] { --accent: color-mix(in oklab, var(--accent-base) 80%, #ffd9a8); }