/* Theme tokens — mode (light/dark) × accent (indigo/teal/sky/graphite). * * app.css never names a colour directly; it reads these. The two axes are set as * attributes on by /js/theme-boot.js before first paint: * * * * data-theme is always a concrete light|dark — "system" is a stored preference * that theme-boot resolves, never an attribute value — so there is no * prefers-color-scheme media query here. With scripts off the page falls back * to light + indigo, which is today's look. * * Cascade: bare :root is the complete light + indigo set. [data-theme=dark] * and [data-accent=x] each override their own axis; the combined * [data-theme=dark][data-accent=x] blocks win over both because they are more * specific. Every non-indigo accent therefore needs both a light and a dark block. * * Status hues (green = offer, pink = rejected, amber = due soon, purple = * interview) are the same in every accent on purpose: they carry meaning. They * are only retuned for lightness per mode. An accent must not sit on one of * their hues — that is why rose and amber accents were rejected. */ :root { color-scheme: light; /* ---- mode: text ---- */ --ink: #1f2438; --ink-rgb: 31 38 70; /* every translucent ink tint: dividers, hovers, tracks */ --muted: rgb(31 38 70 / .72); /* .55 until contrast was measured: 3.1-3.4:1 */ --faint: rgb(31 38 70 / .55); /* .32 was 1.9:1 */ --on-ink: #fff; /* text on an ink-filled badge */ /* ---- mode: surfaces ---- Glass is white at some alpha. On dark the same white needs roughly a seventh of the alpha — .42 frosted over a pale ground, ~.06 over navy — so every glass alpha in app.css is multiplied by --glass-k rather than each one being redefined. */ --glass-k: 1; --glass: rgb(255 255 255 / calc(.42 * var(--glass-k))); --tile: rgb(255 255 255 / calc(.45 * var(--glass-k))); --edge: rgb(255 255 255 / calc(.6 * var(--glass-k))); --raised: #fff; /* the solid "selected" chip: active rail button, .pill.on, .seg .on */ /* Menus, modals and search results sit over content, so on dark they need an opaque-ish surface rather than near-clear glass. */ --panel-rgb: 255 255 255; --panel-k: 1; --shadow-rgb: 31 38 70; --shadow-k: 1; --shadow: 0 14px 34px rgb(var(--shadow-rgb) / calc(.12 * var(--shadow-k))); --scrim: rgb(31 38 70 / .3); /* The two icons drawn as data-URI backgrounds bake their stroke colour in. */ --icon-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231f2438' stroke-opacity='.5' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231f2438' stroke-opacity='.45' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E"); /* ---- status: fixed hue, graphic value + text-safe value ---- */ --green: #1a8f4c; --green-rgb: 26 143 76; --green-text: #14713c; --green-lite: #4bd07f; --pink: #ff4f81; --pink-rgb: 255 79 129; --pink-text: #c2164a; --pink-lite: #ff87aa; --amber: #e07b00; --amber-rgb: 224 123 0; --amber-text: #8f4f00; --note-text: #96540a; --purple: #7c5cf0; --purple-rgb: 124 92 240; --purple-text: #6242d6; /* ---- accent: indigo, light ---- --accent text-safe: links, active nav, chip text --accent-fill solid under white text: today disc, selected day, button end --accent-lite the light stop of every accent gradient --accent-rgb channel triplet for tints and focus rings */ --accent: #4a46e6; --accent-fill: #4a46e6; --accent-lite: #7b74f2; --accent-rgb: 74 70 230; --accent-lite-rgb: 123 116 242; --ground: linear-gradient(140deg, #bfe1f3, #c6d2f4 42%, #d9cbf2 78%, #ecd6ef); --blob-1: rgba(255, 255, 255, .75); --blob-2: rgba(214, 196, 255, .6); /* Accent picker swatches — each shows its own accent, not the active one. */ --swatch-indigo: linear-gradient(135deg, #7b74f2, #4a46e6); --swatch-teal: linear-gradient(135deg, #14b8a6, #0b6f66); --swatch-sky: linear-gradient(135deg, #38bdf8, #075985); --swatch-graphite: linear-gradient(135deg, #7a85a3, #475069); } /* ================================================================ dark mode */ :root[data-theme="dark"] { color-scheme: dark; --ink: #e9edf9; --ink-rgb: 233 237 249; --muted: rgb(233 237 249 / .62); --faint: rgb(233 237 249 / .42); --on-ink: #151a30; --glass-k: .15; --raised: rgb(255 255 255 / .13); --panel-rgb: 27 31 52; --panel-k: 1.2; --shadow-rgb: 0 0 0; --shadow-k: 3; --scrim: rgb(4 6 14 / .6); --icon-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23e9edf9' stroke-opacity='.6' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23e9edf9' stroke-opacity='.55' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E"); --green: #34d17d; --green-rgb: 52 209 125; --green-text: #4ade95; --green-lite: #7ee8ad; --pink: #ff7ba1; --pink-rgb: 255 123 161; --pink-text: #ff9cb8; --pink-lite: #ffb3c8; --amber: #f5a83c; --amber-rgb: 245 168 60; --amber-text: #f7bd6b; --note-text: #f7bd6b; --purple: #a58cff; --purple-rgb: 165 140 255; --purple-text: #bcaaff; /* indigo, dark */ --accent: #a9a3f9; --accent-fill: #5b57ea; --accent-lite: #8b84f5; --accent-rgb: 139 132 245; --accent-lite-rgb: 169 163 249; --ground: linear-gradient(140deg, #101528, #141733 42%, #1b1838 78%, #221a3a); --blob-1: rgba(120, 112, 220, .20); --blob-2: rgba(96, 84, 200, .26); --swatch-indigo: linear-gradient(135deg, #8b84f5, #5b57ea); --swatch-teal: linear-gradient(135deg, #14b8a6, #0f766e); --swatch-sky: linear-gradient(135deg, #38bdf8, #0369a1); --swatch-graphite: linear-gradient(135deg, #8c97b5, #5a6480); } /* ================================================================== accents */ :root[data-accent="teal"] { --accent: #0b6f66; --accent-fill: #0b6f66; --accent-lite: #14b8a6; --accent-rgb: 13 148 136; --accent-lite-rgb: 20 184 166; --ground: linear-gradient(140deg, #bfeef0, #c4e9e6 42%, #cfeddd 78%, #e0f3e4); --blob-1: rgba(255, 255, 255, .75); --blob-2: rgba(170, 236, 220, .6); } :root[data-theme="dark"][data-accent="teal"] { --accent: #2dd4bf; --accent-fill: #0f766e; --accent-lite: #14b8a6; --accent-rgb: 20 184 166; --accent-lite-rgb: 45 212 191; --ground: linear-gradient(140deg, #0a2028, #0c2630 42%, #0e2a2d 78%, #112f2c); --blob-1: rgba(60, 190, 175, .16); --blob-2: rgba(30, 150, 140, .24); } :root[data-accent="sky"] { --accent: #075985; --accent-fill: #075985; --accent-lite: #38bdf8; --accent-rgb: 2 132 199; --accent-lite-rgb: 56 189 248; --ground: linear-gradient(140deg, #bfe6f7, #c8dff5 42%, #d3e4f6 78%, #e2eef9); --blob-1: rgba(255, 255, 255, .75); --blob-2: rgba(175, 215, 245, .6); } :root[data-theme="dark"][data-accent="sky"] { --accent: #5ec2f5; --accent-fill: #0369a1; --accent-lite: #38bdf8; --accent-rgb: 56 189 248; --accent-lite-rgb: 94 194 245; --ground: linear-gradient(140deg, #0a1c2c, #0c2136 42%, #0e2740 78%, #112c46); --blob-1: rgba(70, 170, 230, .16); --blob-2: rgba(40, 130, 200, .24); } /* Graphite has no hue, so it cannot collide with a status colour. */ :root[data-accent="graphite"] { --accent: #475069; --accent-fill: #475069; --accent-lite: #7a85a3; --accent-rgb: 90 100 128; --accent-lite-rgb: 122 133 163; --ground: linear-gradient(140deg, #dfe4ee, #e3e6ee 42%, #e7e9f0 78%, #eef0f4); --blob-1: rgba(255, 255, 255, .8); --blob-2: rgba(205, 212, 228, .6); } :root[data-theme="dark"][data-accent="graphite"] { --accent: #aab4ce; --accent-fill: #5a6480; --accent-lite: #8c97b5; --accent-rgb: 140 151 181; --accent-lite-rgb: 170 180 206; --ground: linear-gradient(140deg, #15181f, #181b23 42%, #1b1e26 78%, #1f222a); --blob-1: rgba(150, 160, 190, .13); --blob-2: rgba(110, 120, 150, .20); }