/* ========================================================================== Theme engine -------------------------------------------------------------------------- Three independent switches on : data-preset surface palette sage offwhite white ivory porcelain sandstone mist graphite data-accent brand colour teal indigo violet emerald blue amber rose slate data-gradient colour intensity none subtle vivid data-gloss sheen on off data-theme light / dark (unset = follow the device) styles.css owns layout and components and never hard-codes a colour; it reads the variables set here. Adding a preset or accent is a block in this file and nothing else. ========================================================================== */ /* ─────────────────────────────────────────────────── surface presets ── */ :root, :root[data-preset="sage"] { --bg: #e4eeeb; --bg-2: #dde9e6; --surface: #ffffff; --surface-2: #f3f7f6; --surface-3: #eaf1ef; --border: #e6edeb; --border-2: #d3e0dd; --text: #10221f; --muted: #6f8380; --faint: #9aaba8; --sheen-tint: 236, 246, 244; } /* Off-white — a barely-there neutral tint. Cards read as white against it. */ :root[data-preset="offwhite"] { --bg: #f6f6f4; --bg-2: #f0f0ed; --surface: #ffffff; --surface-2: #f8f8f6; --surface-3: #f1f1ee; --border: #ebebe7; --border-2: #dcdcd7; --text: #16181a; --muted: #6e7275; --faint: #9b9fa2; --sheen-tint: 250, 250, 248; } /* White — a pure white page. Cards are white too, so they are separated by their shadow and a hairline rather than by tint; both are firmed up here. */ :root[data-preset="white"] { --bg: #ffffff; --bg-2: #fbfbfb; --surface: #ffffff; --surface-2: #f7f8f8; --surface-3: #f0f2f2; --border: #e7eaea; --border-2: #d6dada; --text: #101314; --muted: #6b7274; --faint: #98a0a2; --sheen-tint: 248, 250, 250; --shadow: 0 1px 2px rgba(16, 24, 26, .06), 0 4px 14px rgba(16, 24, 26, .07); --shadow-md: 0 8px 26px rgba(16, 24, 26, .12); --card-hairline: 1px solid #edefef; } :root[data-preset="ivory"] { --bg: #f2ece2; --bg-2: #ebe4d8; --surface: #fffdf9; --surface-2: #f7f2e9; --surface-3: #f0e9dc; --border: #ece4d6; --border-2: #ddd2be; --text: #241f17; --muted: #7d7364; --faint: #a89c8a; --sheen-tint: 250, 245, 235; } :root[data-preset="porcelain"] { --bg: #eef1f6; --bg-2: #e6eaf1; --surface: #ffffff; --surface-2: #f5f7fa; --surface-3: #eceff5; --border: #e6eaf0; --border-2: #d3dae5; --text: #131822; --muted: #6b7688; --faint: #97a1b2; --sheen-tint: 240, 244, 250; } :root[data-preset="sandstone"] { --bg: #f0e7dd; --bg-2: #e8ddd0; --surface: #fffbf7; --surface-2: #f8f0e8; --surface-3: #f0e6da; --border: #ebe0d3; --border-2: #dccbb7; --text: #2a2118; --muted: #82735f; --faint: #ab9c86; --sheen-tint: 252, 245, 237; } :root[data-preset="mist"] { --bg: #e8eef4; --bg-2: #dfe8f0; --surface: #ffffff; --surface-2: #f2f6fa; --surface-3: #e9f0f6; --border: #e2eaf1; --border-2: #ccd9e6; --text: #101d29; --muted: #64798c; --faint: #93a6b6; --sheen-tint: 238, 246, 252; } :root[data-preset="graphite"] { --bg: #e6e7ea; --bg-2: #dedfe3; --surface: #ffffff; --surface-2: #f4f5f7; --surface-3: #eaebee; --border: #e4e5e9; --border-2: #d0d2d8; --text: #14161a; --muted: #6a6e78; --faint: #9a9ea8; --sheen-tint: 244, 245, 248; } /* ─────────────────────────────────────────────────────────── accents ── */ :root, :root[data-accent="teal"] { --brand: #0d6e6b; --brand-dk: #0a5a57; --brand-lt: #2bb3ae; --brand-soft: #e2f4f2; --accent: #21c1c0; --accent-soft:#d5f2f1; --brand-rgb: 13, 110, 107; } :root[data-accent="indigo"] { --brand: #4338ca; --brand-dk: #362fa8; --brand-lt: #7c74f0; --brand-soft: #eaeaff; --accent: #6366f1; --accent-soft: #e6e7ff; --brand-rgb: 67, 56, 202; } :root[data-accent="violet"] { --brand: #6d28d9; --brand-dk: #5b21b6; --brand-lt: #a271f5; --brand-soft: #f2e9ff; --accent: #8b5cf6; --accent-soft: #efe7ff; --brand-rgb: 109, 40, 217; } :root[data-accent="emerald"] { --brand: #047857; --brand-dk: #036049; --brand-lt: #2fb488; --brand-soft: #e2f6ee; --accent: #10b981; --accent-soft: #d9f5e9; --brand-rgb: 4, 120, 87; } :root[data-accent="blue"] { --brand: #1d4ed8; --brand-dk: #1740b0; --brand-lt: #5b8bf7; --brand-soft: #e6edff; --accent: #3b82f6; --accent-soft: #e0ecff; --brand-rgb: 29, 78, 216; } :root[data-accent="amber"] { --brand: #b45309; --brand-dk: #92400e; --brand-lt: #ef9a34; --brand-soft: #fdf0dc; --accent: #f59e0b; --accent-soft: #fdeed4; --brand-rgb: 180, 83, 9; } :root[data-accent="rose"] { --brand: #be123c; --brand-dk: #9f0f33; --brand-lt: #f2607f; --brand-soft: #ffe6ec; --accent: #f43f5e; --accent-soft: #ffe3e9; --brand-rgb: 190, 18, 60; } :root[data-accent="slate"] { --brand: #334155; --brand-dk: #24303f; --brand-lt: #6b7d94; --brand-soft: #e9edf2; --accent: #64748b; --accent-soft: #e7ebf0; --brand-rgb: 51, 65, 85; } /* ────────────────────────────────────── semantic colours (all themes) ── */ :root { /* Cards normally have no border — the White preset switches one on because white-on-white needs an edge. Any preset can override it. */ --card-hairline: 0 none; --ok: #0f9d76; --ok-soft: #e0f5ee; --warn: #e8930c; --warn-soft: #fdf0d9; --danger: #e0483c; --danger-soft:#fdeae8; --info: #2f6bff; --info-soft: #e6edff; --violet: #7c5cf0; --violet-soft:#eee9fe; } /* ───────────────────────────────────────────────────────── gradients ── */ /* --grad-* are used by summary blocks, primary buttons and the action button. "none" resolves every gradient to a flat colour, which also prints cleanly. */ /* The three status tiles are pale washes, not saturated blocks — they sit quietly on a white page. Each carries its own ink and rim so the number stays legible; --grad-brand and --grad-accent (buttons) are unchanged. */ :root { --ink-amber: #8a5207; --ink-blue: #21419b; --ink-teal: #0a6360; --rim-amber: rgba(196, 128, 22, .26); --rim-blue: rgba(58, 96, 208, .22); --rim-teal: rgba(20, 150, 145, .24); /* The specular arc across the top of a tile, and its corner disc. */ --sb-sheen: rgba(255, 255, 255, .75); --sb-sheen-2: rgba(255, 255, 255, .05); --sb-corner: rgba(255, 255, 255, .62); } :root, :root[data-gradient="vivid"] { --grad-brand: linear-gradient(180deg, var(--brand-lt) 0%, var(--brand) 46%, var(--brand-dk) 100%); --grad-amber: linear-gradient(165deg, #fff6e4 0%, #ffe9c2 52%, #fddfa8 100%); --grad-blue: linear-gradient(165deg, #f0f5ff 0%, #dee8ff 52%, #cddcff 100%); --grad-teal: linear-gradient(165deg, #e9faf7 0%, #d0f0ec 52%, #bde9e3 100%); --grad-accent: linear-gradient(180deg, var(--brand-lt) 0%, var(--accent) 55%, var(--brand) 100%); --grad-shadow: 0 6px 16px rgba(22, 34, 44, .09); } :root[data-gradient="subtle"] { --grad-brand: linear-gradient(180deg, var(--brand) 0%, var(--brand-dk) 100%); --grad-amber: linear-gradient(180deg, #fffaf0 0%, #fff0d8 100%); --grad-blue: linear-gradient(180deg, #f6f9ff 0%, #e8eeff 100%); --grad-teal: linear-gradient(180deg, #f1fcfa 0%, #ddf4f0 100%); --grad-accent: linear-gradient(180deg, var(--accent) 0%, var(--brand) 100%); --grad-shadow: 0 3px 9px rgba(22, 34, 44, .07); } :root[data-gradient="none"] { --grad-brand: var(--brand); --grad-amber: #fff2db; --grad-blue: #eaf1ff; --grad-teal: #e4f7f3; --grad-accent: var(--brand); --grad-shadow: none; } /* ───────────────────────────────────────────────────────────── gloss ── */ /* Gloss is four variables plus a highlight opacity. Turning it off flattens every surface at once — no component needs its own switch. */ :root, :root[data-gloss="on"] { --gloss-wash: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.34) 42%, rgba(255,255,255,0) 100%); --gloss-rim: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(16,44,40,.05); --gloss-sheen: radial-gradient(130% 78% at 16% -14%, rgba(255,255,255,.95) 0%, rgba(var(--sheen-tint), .5) 38%, rgba(255,255,255,0) 66%); --gloss-btn-rim: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.14); --gloss-highlight: 1; } :root[data-gloss="off"] { --gloss-wash: none; --gloss-rim: 0 0 0 1px rgba(0,0,0,.045); --gloss-sheen: none; --gloss-btn-rim: 0 0 0 1px rgba(0,0,0,.06); --gloss-highlight: 0; } /* ────────────────────────────────────────────────────────── dark mode ── */ /* One dark palette, tinted by whichever accent is chosen. Applied when the viewer picked dark, or when they are on "match device" and the device is dark. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0a1614; --bg-2: #0d1c1a; --surface: #12211f; --surface-2: #182c29; --surface-3: #1d3532; --border: #223936; --border-2: #2d4744; --text: #e8f1ef; --muted: #93a8a4; --faint: #6d817e; --sheen-tint: 255, 255, 255; --brand-soft: rgba(var(--brand-rgb), .22); --accent-soft: rgba(var(--brand-rgb), .18); --ok-soft: #06342a; --warn-soft: #3a2a08; --danger-soft:#3d1512; --info-soft: #14224d; --violet-soft:#251b4d; --shadow: 0 2px 10px rgba(0,0,0,.35); --shadow-md: 0 8px 24px rgba(0,0,0,.45); --shadow-lg: 0 18px 44px rgba(0,0,0,.55); --card-hairline: 0 none; --grad-amber: linear-gradient(165deg, #3d2f12 0%, #33270d 100%); --grad-blue: linear-gradient(165deg, #1a2c52 0%, #142343 100%); --grad-teal: linear-gradient(165deg, #0f3a36 0%, #0b2e2b 100%); --grad-shadow: 0 6px 16px rgba(0,0,0,.4); --ink-amber: #f0bd6a; --ink-blue: #a6c0ff; --ink-teal: #6ed8d2; --rim-amber: rgba(240,189,106,.2); --rim-blue: rgba(166,192,255,.18); --rim-teal: rgba(110,216,210,.2); --sb-sheen: rgba(255, 255, 255, .10); --sb-sheen-2: rgba(255, 255, 255, 0); --sb-corner: rgba(255, 255, 255, .10); } :root:not([data-theme="light"]):not([data-gloss="off"]) { --gloss-wash: linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.03) 45%, rgba(255,255,255,0) 100%); --gloss-rim: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.30); --gloss-sheen: radial-gradient(130% 78% at 16% -14%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 60%); --gloss-btn-rim: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.30); } :root:not([data-theme="light"])[data-gloss="off"] { --gloss-rim: 0 0 0 1px rgba(255,255,255,.07); --gloss-btn-rim: 0 0 0 1px rgba(255,255,255,.09); } } :root[data-theme="dark"] { --bg: #0a1614; --bg-2: #0d1c1a; --surface: #12211f; --surface-2: #182c29; --surface-3: #1d3532; --border: #223936; --border-2: #2d4744; --text: #e8f1ef; --muted: #93a8a4; --faint: #6d817e; --sheen-tint: 255, 255, 255; --brand-soft: rgba(var(--brand-rgb), .22); --accent-soft: rgba(var(--brand-rgb), .18); --ok-soft: #06342a; --warn-soft: #3a2a08; --danger-soft:#3d1512; --info-soft: #14224d; --violet-soft:#251b4d; --shadow: 0 2px 10px rgba(0,0,0,.35); --shadow-md: 0 8px 24px rgba(0,0,0,.45); --shadow-lg: 0 18px 44px rgba(0,0,0,.55); --card-hairline: 0 none; --grad-amber: linear-gradient(165deg, #3d2f12 0%, #33270d 100%); --grad-blue: linear-gradient(165deg, #1a2c52 0%, #142343 100%); --grad-teal: linear-gradient(165deg, #0f3a36 0%, #0b2e2b 100%); --grad-shadow: 0 6px 16px rgba(0,0,0,.4); --ink-amber: #f0bd6a; --ink-blue: #a6c0ff; --ink-teal: #6ed8d2; --rim-amber: rgba(240,189,106,.2); --rim-blue: rgba(166,192,255,.18); --rim-teal: rgba(110,216,210,.2); --sb-sheen: rgba(255, 255, 255, .10); --sb-sheen-2: rgba(255, 255, 255, 0); --sb-corner: rgba(255, 255, 255, .10); } :root[data-theme="dark"]:not([data-gloss="off"]) { --gloss-wash: linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.03) 45%, rgba(255,255,255,0) 100%); --gloss-rim: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.30); --gloss-sheen: radial-gradient(130% 78% at 16% -14%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 60%); --gloss-btn-rim: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.30); } :root[data-theme="dark"][data-gloss="off"] { --gloss-rim: 0 0 0 1px rgba(255,255,255,.07); --gloss-btn-rim: 0 0 0 1px rgba(255,255,255,.09); } /* Dark mode keeps the accent readable against dark surfaces. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-accent="teal"] { --brand: #17a8a4; --brand-dk: #0f8c88; --brand-lt: #3ecfcb; } :root:not([data-theme="light"])[data-accent="indigo"] { --brand: #7c74f0; --brand-dk: #5f56d8; --brand-lt: #9d97f7; } :root:not([data-theme="light"])[data-accent="violet"] { --brand: #a271f5; --brand-dk: #8551dd; --brand-lt: #bd9bf9; } :root:not([data-theme="light"])[data-accent="emerald"] { --brand: #2fb488; --brand-dk: #1f9a72; --brand-lt: #55cba3; } :root:not([data-theme="light"])[data-accent="blue"] { --brand: #5b8bf7; --brand-dk: #3f6fe0; --brand-lt: #85aaf9; } :root:not([data-theme="light"])[data-accent="amber"] { --brand: #e9962c; --brand-dk: #c97a14; --brand-lt: #f4b45e; } :root:not([data-theme="light"])[data-accent="rose"] { --brand: #f2607f; --brand-dk: #d34364; --brand-lt: #f78ba2; } :root:not([data-theme="light"])[data-accent="slate"] { --brand: #8595ab; --brand-dk: #6b7d94; --brand-lt: #a3b0c2; } } :root[data-theme="dark"][data-accent="teal"] { --brand: #17a8a4; --brand-dk: #0f8c88; --brand-lt: #3ecfcb; } :root[data-theme="dark"][data-accent="indigo"] { --brand: #7c74f0; --brand-dk: #5f56d8; --brand-lt: #9d97f7; } :root[data-theme="dark"][data-accent="violet"] { --brand: #a271f5; --brand-dk: #8551dd; --brand-lt: #bd9bf9; } :root[data-theme="dark"][data-accent="emerald"] { --brand: #2fb488; --brand-dk: #1f9a72; --brand-lt: #55cba3; } :root[data-theme="dark"][data-accent="blue"] { --brand: #5b8bf7; --brand-dk: #3f6fe0; --brand-lt: #85aaf9; } :root[data-theme="dark"][data-accent="amber"] { --brand: #e9962c; --brand-dk: #c97a14; --brand-lt: #f4b45e; } :root[data-theme="dark"][data-accent="rose"] { --brand: #f2607f; --brand-dk: #d34364; --brand-lt: #f78ba2; } :root[data-theme="dark"][data-accent="slate"] { --brand: #8595ab; --brand-dk: #6b7d94; --brand-lt: #a3b0c2; }