/* ===================================================================== Gearshift - design tokens The entire theme contract. NOTHING else in the codebase defines a colour; a component that hardcodes a hex value is a bug. Two layers, deliberately: palette raw values, never consumed by a component semantic what components actually use That indirection is what makes the light theme a redefinition of ~30 variables rather than a find-and-replace across every stylesheet. Palette: cyan on a deep teal-black. The ground carries green in it rather than blue, which is what separates it from every slate-and-cyan dashboard and from ServiceGeni's purple. FLAT, and now flat all the way down: a panel is a FILL and a hairline border. Nothing else. No drop shadow, no lit top edge, and no accent wash falling across the top corner - that wash was the last thing still reading as a shade on a card once the shadows went, and it is gone too. Separation comes from the border and from the difference between --gs-surface and its ground. Every `--gs-depth-*`, glow, halo and well-shadow token is now a no-op, and they are KEPT rather than deleted for two reasons: components compose two of them at once and `box-shadow: none, none` is invalid, and putting the depth back is then an edit to these values rather than to forty components. That is the whole reason depth was tokenised. `--gs-shadow-inset` and `--gs-rail-shadow` are the exceptions and are real: both are 1px INSET hairlines - an edge, not a shade. Two line tokens, not one: `line` is a card's own edge, `line-soft` the hairline BETWEEN rows inside it. Without that split a list of eight rows reads as eight stacked slabs instead of one object. ===================================================================== */ :root { /* ── palette: cyan ───────────────────────────────────────────────── */ --gs-cyan-300: #7ceffc; --gs-cyan-400: #5ce6f5; --gs-cyan-500: #22d3ee; --gs-cyan-600: #0e8fa3; /* 600 on white is 3.83:1 - under AA for text. 700 exists so the light theme has a step it can put words in. */ --gs-cyan-700: #0b7a8c; /* ── palette: support hues ───────────────────────────────────────── */ --gs-blue-300: #a8c4ff; --gs-blue-400: #8fb0ff; --gs-blue-500: #6f97ff; --gs-blue-600: #2f4fa8; --gs-amber-400: #fbbf24; --gs-amber-500: #f6a723; --gs-amber-700: #9a6100; /* light-theme step; the 500 is 2.0:1 on white */ --gs-green-400: #5ef0b0; --gs-green-500: #34d399; --gs-green-700: #17795e; --gs-red-400: #f87171; --gs-red-500: #ef4444; --gs-red-700: #b3261e; /* ── palette: the teal-black ramp ──────────────────────────────── Named slate-* for continuity with every rule already written against these names; the values carry green, not blue. */ --gs-slate-950: #040b0c; --gs-slate-900: #070f11; --gs-slate-850: #0b1514; --gs-slate-800: #0d1817; --gs-slate-700: #101a1a; --gs-slate-600: #141f1e; --gs-slate-400: #8aa5a3; --gs-slate-200: #c9dbd9; --gs-white: #ffffff; /* ── semantic: surfaces ──────────────────────────────────────────── */ --gs-bg: var(--gs-slate-900); --gs-bg-elevated: var(--gs-slate-850); --gs-surface: var(--gs-slate-800); --gs-surface-2: var(--gs-slate-700); --gs-surface-3: var(--gs-slate-600); --gs-line: #14211f; --gs-line-soft: #101a19; --gs-line-strong: #24393a; /* ── the console ───────────────────────────────────────────────── The signed-in app is ONE framed panel inset from the window, not a scatter of floating slabs: `ground` is what the frame sits on, `frame` is its fill, `frame-line` its edge, and `rail` the sidebar column inside it. Three tokens rather than three hardcoded greys, so light mode is still a redefinition. */ --gs-ground: #04090a; --gs-frame: #050c0e; --gs-frame-line: #17262a; --gs-rail: linear-gradient(180deg, rgb(9 20 22 / .82) 0%, rgb(5 12 14 / .92) 100%); --gs-rail-line: rgb(168 242 251 / .07); --gs-rail-shadow: inset -1px 0 0 rgb(0 0 0 / .50); /* ── semantic: text ────────────────────────────────────────────── muted is 6.9:1 on --gs-surface. Do not darken it past #6f8c8a (5.0:1); the reference mock's #5f7a78 is 3.9:1 and fails AA on timestamps. */ --gs-ink: #e9f2f1; --gs-ink-2: var(--gs-slate-200); --gs-muted: var(--gs-slate-400); --gs-on-accent: #03181c; /* ── semantic: accents ───────────────────────────────────────────── */ --gs-accent: var(--gs-cyan-500); --gs-accent-2: var(--gs-cyan-600); --gs-accent-soft: var(--gs-cyan-400); --gs-accent-wash: rgb(34 211 238 / .12); --gs-accent-ring: rgb(34 211 238 / .24); --gs-accent-line: rgb(34 211 238 / .28); --gs-gradient: linear-gradient(140deg, var(--gs-cyan-400) 0%, var(--gs-cyan-600) 100%); --gs-success: var(--gs-green-500); --gs-success-wash: rgb(52 211 153 / .12); --gs-warning: var(--gs-amber-500); --gs-warning-wash: rgb(246 167 35 / .14); --gs-danger: var(--gs-red-400); --gs-danger-wash: rgb(248 113 113 / .12); --gs-info: var(--gs-blue-400); --gs-info-wash: rgb(143 176 255 / .12); /* ── depth ─────────────────────────────────────────────────────── One panel treatment. `card` is the accent wash over the surface, and `bloom` the single radial glow still allowed behind an accent. `edge` and `shadow` are deliberately no-ops: the treatment is flat, and they stay defined so the components that compose them keep parsing - and so that raising the panels again is a change to these four values. */ --gs-depth-card: linear-gradient(140deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 100%); --gs-depth-card-2: linear-gradient(140deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 100%); --gs-depth-edge: 0 0 0 0 rgb(0 0 0 / 0); --gs-depth-edge-2: 0 0 0 0 rgb(0 0 0 / 0); --gs-depth-shadow: 0 0 0 0 rgb(0 0 0 / 0); --gs-depth-shadow-sm: 0 0 0 0 rgb(0 0 0 / 0); --gs-bloom: radial-gradient(circle, rgb(34 211 238 / .28) 0%, rgb(34 211 238 / .08) 42%, rgb(34 211 238 / 0) 70%); --gs-chip-grad: linear-gradient(140deg, var(--gs-cyan-400), var(--gs-cyan-600)); --gs-chip-glow: 0 0 0 0 rgb(0 0 0 / 0); --gs-ring-glow: 0 0 0 0 rgb(0 0 0 / 0); /* The lit mesh the whole shell floats on: three soft pools, no blur filter, so it costs one paint rather than three. */ /* Three pools of light INSIDE the console frame, sized and placed like the reference's blurred orbs: a big cyan one bleeding in from the top right, a green one under the bottom left, and a blue one on the left flank. Gradients rather than blurred s, so the whole thing is one paint instead of three filtered layers. */ --gs-mesh: radial-gradient(820px 660px at 88% -10%, rgb(18 181 203 / .50) 0%, rgb(18 181 203 / .18) 38%, transparent 68%), radial-gradient(760px 600px at 22% 108%, rgb(52 211 153 / .26) 0%, rgb(18 181 203 / .12) 44%, transparent 70%), radial-gradient(560px 470px at -6% 32%, rgb(79 124 255 / .24) 0%, transparent 66%); /* Not a theme colour: the opaque fill a CSS mask needs. Named so it is obvious it is geometry, not palette. */ --gs-mask-solid: #000000; /* ── the well ──────────────────────────────────────────────────── The opposite of a panel: something sunk INTO the card rather than floating above it. A card is lighter than its ground and casts down; a well is darker than the card and catches shadow on its inside edge. Used by the gauge's centre disc and by every row that sits inside a panel, which is what stops a list of rows reading as a stack of cards. */ --gs-well: rgb(9 20 22 / .68); --gs-well-line: rgb(200 245 252 / .08); /* No-op, like the depth tokens above and for the same reason: the surface treatment is FLAT. A well is now told apart by its fill and its hairline alone. Restoring the recess is a change to this one value. */ --gs-well-shadow: 0 0 0 0 rgb(0 0 0 / 0); /* ── the live panel ────────────────────────────────────────────── Exactly one block on a screen is allowed this treatment: the one holding things that are waiting on you. It is BLUE where the rest of the theme is cyan, so "there is work here" cannot be confused with "here is a number". A second live panel makes both of them ordinary. */ --gs-live-card: linear-gradient(140deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 100%); --gs-live-line: rgb(79 124 255 / .20); --gs-live-edge: 0 0 0 0 rgb(0 0 0 / 0); --gs-live-glow: 0 0 0 0 rgb(0 0 0 / 0); --gs-live-grad: linear-gradient(140deg, var(--gs-blue-300), var(--gs-blue-600)); --gs-live-chip-glow: 0 0 0 0 rgb(0 0 0 / 0); --gs-live-ink: var(--gs-blue-300); --gs-live-wash: rgb(79 124 255 / .16); --gs-on-live: #030b1c; /* ── the identity card ─────────────────────────────────────────── A coloured OBJECT, not a panel: the one thing on the screen that keeps its own ground in both themes, the way a bank card does. It answers "who am I, on which system" - this product's central question - so it is allowed to look unlike everything around it. The light pools are background layers, not blurred s: five filtered elements is five composited layers, and a radial gradient is already soft. One paint, same picture. */ --gs-idcard-bg: linear-gradient(238deg, #8fb3a9 0%, #52868a 14%, #2d6f7d 30%, #1c5c6c 50%, #124a5a 74%, #0c3947 100%); /* The rim. In DARK this is a lifted teal and it blends outward into a dark page. In LIGHT it has to be a light rim, not a dark one: the card keeps its own dark artwork in both themes, so a dark border there is drawn between a dark card and a white page and reads as a black outline around the card. The value flips; the role does not. */ --gs-idcard-line: #17343a; --gs-idcard-ink: #eaf9fb; --gs-idcard-cap: #bcdfe6; --gs-idcard-sheen: linear-gradient(238deg, rgb(226 244 238 / .14) 0%, rgb(160 210 205 / .04) 24%, rgb(6 44 55 / 0) 46%); /* TWO pools, not one: a bright one high on the left and a longer, dimmer one across the middle. A single pool clings to the corner and the rest of the card goes flat. */ --gs-idcard-blob: radial-gradient(64% 46% at 88% 0%, rgb(222 240 232 / .82) 0%, rgb(170 212 204 / .38) 34%, rgb(170 212 204 / 0) 72%), radial-gradient(58% 48% at 100% 92%, rgb(112 194 196 / .16) 0%, rgb(112 194 196 / 0) 74%); --gs-idcard-shade: radial-gradient(66% 62% at 22% 60%, rgb(6 44 55 / .55) 0%, rgb(8 48 60 / .28) 46%, rgb(8 48 60 / 0) 78%), radial-gradient(54% 72% at -6% 12%, rgb(5 40 51 / .60) 0%, rgb(5 40 51 / 0) 72%); /* Text sits over artwork here, so the ground gets a scrim under it - the same thing a photo caption does. Without it the name and the facts line land on the pale half at roughly 2:1. */ --gs-idcard-scrim: linear-gradient(to bottom, rgb(6 44 55 / 0) 55%, rgb(6 44 55 / .18) 100%); --gs-idcard-mark: rgb(255 255 255 / .34); --gs-idcard-mark-2: rgb(255 255 255 / .20); /* The avatar square and the secondary button: glass cut into the card, not the page's cyan chip. A gradient chip on a teal ground has nothing to be brighter than and reads as a smudge. */ --gs-idcard-chip: rgb(6 22 28 / .30); --gs-idcard-chip-line: rgb(255 255 255 / .34); /* ── glass ─────────────────────────────────────────────────────── The iPhone-style treatment: a translucent fill, a strong blur with a saturation boost so colour bleeds through rather than turning grey, a hairline border, and a bright top edge that reads as a light catch. */ --gs-glass-bg: rgb(13 24 23 / .62); --gs-glass-bg-2: rgb(16 30 29 / .78); --gs-glass-border: rgb(200 245 252 / .10); --gs-glass-edge: rgb(200 245 252 / .16); --gs-glass-blur: blur(20px) saturate(170%); --gs-glass-shadow: 0 0 0 0 rgb(0 0 0 / 0); /* ── the auth page's ground ────────────────────────────────────── Tokens rather than hexes in gs-theme.css, so sign-in follows the theme instead of drifting back to blue every time the palette moves. */ --gs-auth-ground: linear-gradient(135deg, #05100f 0%, #071d1f 100%); --gs-auth-bloom-1: #06323d; --gs-auth-bloom-2: #073038; --gs-auth-orb-1: #12b5cb; --gs-auth-orb-2: #0e8fa3; --gs-auth-orb-3: #22d3ee; /* ── the auth card ────────────────────────────────────────────── Sign-in is ONE card with two halves split on a diagonal: a near-black side holding the form, a teal side holding the greeting. `slant` is the diagonal's horizontal travel, and the two clip-paths mirror each other around it - so login and register are the same geometry flipped rather than two hand-tuned shapes that can drift apart. */ --gs-auth-card: #060f13; --gs-auth-edge: rgb(84 238 240 / .34); --gs-auth-halo: 0 0 0 0 rgb(0 0 0 / 0); --gs-auth-panel: linear-gradient(148deg, #7ceffc 0%, #35d7ea 22%, #0e8fa3 58%, #0a3844 100%); --gs-auth-greet: #f4feff; --gs-auth-line: rgb(200 245 252 / .20); --gs-auth-slant: 24%; /* The picker, when it sits ON the teal half. White text straight onto that gradient fails at the pale top corner, so each option gets a dark plate to sit on and the plate carries the contrast -- the same trick a photo caption uses. Identical in both themes on purpose: the plates sit on artwork, not on the theme's ground, so there is nothing for them to follow when the ground flips. */ --gs-authpick-plate: rgb(4 26 32 / .30); --gs-authpick-plate-on: rgb(4 26 32 / .52); --gs-authpick-line: rgb(255 255 255 / .26); --gs-authpick-line-on: rgb(255 255 255 / .72); --gs-authpick-chip: rgb(255 255 255 / .20); --gs-authpick-sub: rgb(240 253 255 / .78); /* An error on the teal half. Red type on that gradient is muddy at every point along it, so the alert is carried by the option plates' BORDER rather than by red text. The message itself lives on the form half. */ --gs-authpick-err-line: rgb(255 186 186 / .80); /* ── depth: the flat shadows, kept for components that want one ─── */ /* All no-ops. Every surface in the product is flat: fill, hairline, and nothing cast underneath it. `shadow-inset` stays real — it is a 1px lit EDGE along the top of a panel, not a shade under it. */ --gs-shadow-sm: 0 0 0 0 rgb(0 0 0 / 0); --gs-shadow-md: 0 0 0 0 rgb(0 0 0 / 0); --gs-shadow-lg: 0 0 0 0 rgb(0 0 0 / 0); --gs-shadow-inset: inset 0 1px 0 rgb(200 245 252 / .10); --gs-glow: 0 0 0 0 rgb(0 0 0 / 0); /* The primary button. A VERTICAL fall from teal to near-black, not the 140deg teal-to-teal the chips and the brand mark use -- those stay lit all over because they are small marks, and a button this size lit all over is a slab. The foot darkens to give it a lip - but it stops at a TEAL, not at black. Falling all the way to #061419 made the button read as half-empty, and on the identity card, whose own ground is dark, the bottom of the button simply dissolved into the card. Its own tokens rather than --gs-gradient, so the same change does not darken every icon chip, the nav's active pill and the wordmark's plate along with it. */ --gs-btn-face: linear-gradient(180deg, #22b8cf 0%, #158da3 44%, #0c6274 100%); --gs-btn-line: rgb(34 211 238 / .55); --gs-btn-ink: #e8feff; --gs-btn-glow: inset 0 1px 0 rgb(190 245 252 / .28); /* ── geometry ────────────────────────────────────────────────────── */ --gs-radius-sm: 10px; --gs-radius: 14px; --gs-radius-lg: 20px; --gs-radius-xl: 26px; --gs-radius-pill: 999px; --gs-space-1: 4px; --gs-space-2: 8px; --gs-space-3: 12px; --gs-space-4: 16px; --gs-space-5: 22px; --gs-space-6: 30px; --gs-space-7: 40px; --gs-space-8: 56px; /* ── type ────────────────────────────────────────────────────────── */ --gs-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --gs-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; --gs-fs-xs: .75rem; --gs-fs-sm: .8125rem; --gs-fs-md: .875rem; --gs-fs-base: .9375rem; --gs-fs-lg: 1.0625rem; --gs-fs-xl: 1.375rem; --gs-fs-2xl: 1.75rem; --gs-fs-3xl: 2.25rem; /* ── motion ──────────────────────────────────────────────────────── */ --gs-ease: cubic-bezier(.4, 0, .2, 1); --gs-dur: 170ms; /* ── layout ──────────────────────────────────────────────────────── */ --gs-sidebar-w: 260px; --gs-sidebar-w-collapsed: 76px; --gs-topbar-h: 64px; color-scheme: dark; } /* ===================================================================== Light theme - the same token names, redefined. Every component follows automatically because none of them names a palette value directly. Note the accent swap: cyan-600 is 3.8:1 on white, so anything that puts WORDS in the accent uses cyan-700 here. Same for warning, which is a 2.0:1 amber in the dark theme and an ochre in this one. ===================================================================== */ [data-theme='light'] { --gs-bg: #f1f6f6; --gs-bg-elevated: #ffffff; --gs-surface: #ffffff; --gs-surface-2: #f6fafa; --gs-surface-3: #eaf2f2; --gs-line: #dde8e7; --gs-line-soft: #ebf2f1; --gs-line-strong: #c4d6d5; --gs-ground: #e4ecec; --gs-frame: #f7fbfb; --gs-frame-line: #d3e2e1; --gs-rail: linear-gradient(180deg, #ffffff 0%, #fbfdfd 100%); --gs-rail-line: rgb(9 30 33 / .08); --gs-rail-shadow: inset -1px 0 0 rgb(9 30 33 / .04); --gs-ink: #0c1a1a; --gs-ink-2: #34504f; --gs-muted: #547170; --gs-on-accent: #ffffff; --gs-accent: var(--gs-cyan-700); --gs-accent-2: var(--gs-cyan-600); --gs-accent-soft: var(--gs-cyan-600); --gs-accent-wash: rgb(11 122 140 / .10); --gs-accent-ring: rgb(11 122 140 / .22); --gs-accent-line: rgb(11 122 140 / .26); --gs-gradient: linear-gradient(140deg, var(--gs-cyan-600) 0%, var(--gs-cyan-700) 100%); --gs-success: var(--gs-green-700); --gs-success-wash: rgb(23 121 94 / .10); --gs-warning: var(--gs-amber-700); --gs-warning-wash: rgb(154 97 0 / .12); --gs-danger: var(--gs-red-700); --gs-danger-wash: rgb(179 38 30 / .10); --gs-info: var(--gs-blue-600); --gs-info-wash: rgb(47 79 168 / .10); /* Depth in light mode is a whisper, not a hole: a near-white gradient, a white top edge, and a soft grey shadow. Inverting the dark values would read as dirt. */ --gs-depth-card: linear-gradient(140deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 100%); --gs-depth-card-2: linear-gradient(140deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 100%); --gs-depth-edge: 0 0 0 0 rgb(0 0 0 / 0); --gs-depth-edge-2: 0 0 0 0 rgb(0 0 0 / 0); --gs-depth-shadow: 0 0 0 0 rgb(0 0 0 / 0); --gs-depth-shadow-sm: 0 0 0 0 rgb(0 0 0 / 0); --gs-bloom: radial-gradient(circle, rgb(14 143 163 / .14) 0%, rgb(14 143 163 / .04) 42%, rgb(14 143 163 / 0) 70%); --gs-chip-grad: linear-gradient(140deg, var(--gs-cyan-600), var(--gs-cyan-700)); --gs-chip-glow: 0 0 0 0 rgb(0 0 0 / 0); --gs-ring-glow: 0 0 0 0 rgb(0 0 0 / 0); /* A well in light mode is a faint grey recess, not a dark hole: inverting the dark values reads as a smudge on white. */ --gs-well: #f2f8f8; --gs-well-line: rgb(9 30 33 / .07); --gs-well-shadow: 0 0 0 0 rgb(0 0 0 / 0); --gs-live-card: linear-gradient(140deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 100%); --gs-live-line: rgb(47 79 168 / .20); --gs-live-edge: 0 0 0 0 rgb(0 0 0 / 0); --gs-live-glow: 0 0 0 0 rgb(0 0 0 / 0); --gs-live-grad: linear-gradient(140deg, var(--gs-blue-500), var(--gs-blue-600)); --gs-live-chip-glow: 0 0 0 0 rgb(0 0 0 / 0); --gs-live-ink: var(--gs-blue-600); --gs-live-wash: rgb(47 79 168 / .10); --gs-on-live: #ffffff; /* Brighter and cleaner, but still a teal card carrying light text: a bank card does not turn white when the room does. Only the depth around it changes theme, not the object itself. */ --gs-idcard-bg: linear-gradient(238deg, #a3c5ba 0%, #62999b 14%, #387a89 30%, #226474 50%, #175260 74%, #10404f 100%); --gs-idcard-line: rgb(255 255 255 / .14); /* light, not dark: see note */ --gs-idcard-ink: #f3fdff; --gs-idcard-cap: #dcf4f8; --gs-idcard-sheen: linear-gradient(238deg, rgb(235 250 244 / .18) 0%, rgb(180 222 216 / .06) 24%, rgb(8 52 64 / 0) 46%); --gs-idcard-blob: radial-gradient(64% 46% at 88% 0%, rgb(236 248 241 / .86) 0%, rgb(186 226 218 / .42) 34%, rgb(186 226 218 / 0) 72%), radial-gradient(58% 48% at 100% 92%, rgb(126 206 208 / .18) 0%, rgb(126 206 208 / 0) 74%); --gs-idcard-shade: radial-gradient(66% 62% at 22% 60%, rgb(8 52 64 / .52) 0%, rgb(10 56 70 / .26) 46%, rgb(10 56 70 / 0) 78%), radial-gradient(54% 72% at -6% 12%, rgb(7 48 60 / .56) 0%, rgb(7 48 60 / 0) 72%); --gs-idcard-scrim: linear-gradient(to bottom, rgb(8 52 64 / 0) 55%, rgb(8 52 64 / .17) 100%); --gs-idcard-mark: rgb(255 255 255 / .40); --gs-idcard-mark-2: rgb(255 255 255 / .24); --gs-idcard-chip: rgb(6 26 34 / .26); --gs-idcard-chip-line: rgb(255 255 255 / .42); --gs-mesh: radial-gradient(760px 620px at 92% -16%, rgb(14 143 163 / .10), transparent 70%), radial-gradient(700px 560px at 24% 114%, rgb(52 211 153 / .07), transparent 72%), radial-gradient(520px 440px at -8% 34%, rgb(47 79 168 / .06), transparent 68%); --gs-shadow-sm: 0 0 0 0 rgb(0 0 0 / 0); --gs-shadow-md: 0 0 0 0 rgb(0 0 0 / 0); --gs-shadow-lg: 0 0 0 0 rgb(0 0 0 / 0); --gs-shadow-inset: inset 0 1px 0 rgb(255 255 255 / .60); --gs-glow: 0 12px 26px -14px rgb(14 143 163 / .45); --gs-btn-face: linear-gradient(180deg, #1ea9c0 0%, #11829c 44%, #0a5566 100%); /* NO rim in light. One flat colour cannot sit on a vertical gradient without disagreeing with it somewhere: rgb(11 122 140 / .55) composited darker than the face along the top and sides and lighter along the foot, so it read as an outline drawn round the button instead of as the button's edge. Transparent lets the face reach the edge - the border is still 1px, so the button keeps the size the ghost and danger buttons beside it have. DARK keeps its rim: there the token is a bright cyan that lands brighter than the face at every height, which is a light catch along the edge and the thing that stops the dark foot dissolving into a dark page. That rim earns its place; this one did not. */ --gs-btn-line: transparent; --gs-btn-ink: #f2feff; --gs-btn-glow: inset 0 1px 0 rgb(255 255 255 / .22); --gs-glass-bg: rgb(255 255 255 / .70); --gs-glass-bg-2: rgb(255 255 255 / .86); --gs-glass-border: rgb(9 30 33 / .08); --gs-glass-edge: rgb(255 255 255 / .90); --gs-glass-blur: blur(20px) saturate(170%); --gs-glass-shadow: 0 0 0 0 rgb(0 0 0 / 0); --gs-auth-ground: linear-gradient(135deg, #eef5f5 0%, #dfeded 100%); --gs-auth-bloom-1: #cfe6e8; --gs-auth-bloom-2: #d8eaea; --gs-auth-orb-1: #0e8fa3; --gs-auth-orb-2: #0b7a8c; --gs-auth-orb-3: #22d3ee; --gs-auth-card: #ffffff; --gs-auth-edge: rgb(11 122 140 / .30); --gs-auth-halo: 0 0 0 0 rgb(0 0 0 / 0); --gs-auth-panel: linear-gradient(148deg, #5ce6f5 0%, #12b5cb 24%, #0b7a8c 60%, #06414e 100%); --gs-auth-greet: #ffffff; --gs-auth-line: rgb(9 30 33 / .18); --gs-auth-slant: 24%; /* The picker, when it sits ON the teal half. White text straight onto that gradient fails at the pale top corner, so each option gets a dark plate to sit on and the plate carries the contrast -- the same trick a photo caption uses. Identical in both themes on purpose: the plates sit on artwork, not on the theme's ground, so there is nothing for them to follow when the ground flips. */ --gs-authpick-plate: rgb(4 26 32 / .30); --gs-authpick-plate-on: rgb(4 26 32 / .52); --gs-authpick-line: rgb(255 255 255 / .26); --gs-authpick-line-on: rgb(255 255 255 / .72); --gs-authpick-chip: rgb(255 255 255 / .20); --gs-authpick-sub: rgb(240 253 255 / .78); /* An error on the teal half. Red type on that gradient is muddy at every point along it, so the alert is carried by the option plates' BORDER rather than by red text. The message itself lives on the form half. */ --gs-authpick-err-line: rgb(255 186 186 / .80); color-scheme: light; } /* People whose OS already switches at sunset get the right theme before they ever touch the toggle. An explicit choice (data-theme) always wins. This block repeats the light values on purpose: `[data-theme]` and this media query are two different scopes, and a token defined in only one of them renders one theme's text on the other theme's ground. */ @media (prefers-color-scheme: light) { :root:not([data-theme='dark']) { --gs-bg: #f1f6f6; --gs-bg-elevated: #ffffff; --gs-surface: #ffffff; --gs-surface-2: #f6fafa; --gs-surface-3: #eaf2f2; --gs-line: #dde8e7; --gs-line-soft: #ebf2f1; --gs-line-strong: #c4d6d5; --gs-ground: #e4ecec; --gs-frame: #f7fbfb; --gs-frame-line: #d3e2e1; --gs-rail: linear-gradient(180deg, #ffffff 0%, #fbfdfd 100%); --gs-rail-line: rgb(9 30 33 / .08); --gs-rail-shadow: inset -1px 0 0 rgb(9 30 33 / .04); --gs-ink: #0c1a1a; --gs-ink-2: #34504f; --gs-muted: #547170; --gs-on-accent: #ffffff; --gs-accent: var(--gs-cyan-700); --gs-accent-2: var(--gs-cyan-600); --gs-accent-soft: var(--gs-cyan-600); --gs-accent-wash: rgb(11 122 140 / .10); --gs-accent-ring: rgb(11 122 140 / .22); --gs-accent-line: rgb(11 122 140 / .26); --gs-gradient: linear-gradient(140deg, var(--gs-cyan-600) 0%, var(--gs-cyan-700) 100%); --gs-success: var(--gs-green-700); --gs-success-wash: rgb(23 121 94 / .10); --gs-warning: var(--gs-amber-700); --gs-warning-wash: rgb(154 97 0 / .12); --gs-danger: var(--gs-red-700); --gs-danger-wash: rgb(179 38 30 / .10); --gs-info: var(--gs-blue-600); --gs-info-wash: rgb(47 79 168 / .10); --gs-depth-card: linear-gradient(140deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 100%); --gs-depth-card-2: linear-gradient(140deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 100%); --gs-depth-edge: 0 0 0 0 rgb(0 0 0 / 0); --gs-depth-edge-2: 0 0 0 0 rgb(0 0 0 / 0); --gs-depth-shadow: 0 0 0 0 rgb(0 0 0 / 0); --gs-depth-shadow-sm: 0 0 0 0 rgb(0 0 0 / 0); --gs-bloom: radial-gradient(circle, rgb(14 143 163 / .14) 0%, rgb(14 143 163 / .04) 42%, rgb(14 143 163 / 0) 70%); --gs-chip-grad: linear-gradient(140deg, var(--gs-cyan-600), var(--gs-cyan-700)); --gs-chip-glow: 0 0 0 0 rgb(0 0 0 / 0); --gs-ring-glow: 0 0 0 0 rgb(0 0 0 / 0); --gs-well: #f2f8f8; --gs-well-line: rgb(9 30 33 / .07); --gs-well-shadow: 0 0 0 0 rgb(0 0 0 / 0); --gs-live-card: linear-gradient(140deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 100%); --gs-live-line: rgb(47 79 168 / .20); --gs-live-edge: 0 0 0 0 rgb(0 0 0 / 0); --gs-live-glow: 0 0 0 0 rgb(0 0 0 / 0); --gs-live-grad: linear-gradient(140deg, var(--gs-blue-500), var(--gs-blue-600)); --gs-live-chip-glow: 0 0 0 0 rgb(0 0 0 / 0); --gs-live-ink: var(--gs-blue-600); --gs-live-wash: rgb(47 79 168 / .10); --gs-on-live: #ffffff; --gs-idcard-bg: linear-gradient(238deg, #a3c5ba 0%, #62999b 14%, #387a89 30%, #226474 50%, #175260 74%, #10404f 100%); --gs-idcard-line: rgb(255 255 255 / .14); /* light, not dark: see note */ --gs-idcard-ink: #f3fdff; --gs-idcard-cap: #dcf4f8; --gs-idcard-sheen: linear-gradient(238deg, rgb(235 250 244 / .18) 0%, rgb(180 222 216 / .06) 24%, rgb(8 52 64 / 0) 46%); --gs-idcard-blob: radial-gradient(64% 46% at 88% 0%, rgb(236 248 241 / .86) 0%, rgb(186 226 218 / .42) 34%, rgb(186 226 218 / 0) 72%), radial-gradient(58% 48% at 100% 92%, rgb(126 206 208 / .18) 0%, rgb(126 206 208 / 0) 74%); --gs-idcard-shade: radial-gradient(66% 62% at 22% 60%, rgb(8 52 64 / .52) 0%, rgb(10 56 70 / .26) 46%, rgb(10 56 70 / 0) 78%), radial-gradient(54% 72% at -6% 12%, rgb(7 48 60 / .56) 0%, rgb(7 48 60 / 0) 72%); --gs-idcard-scrim: linear-gradient(to bottom, rgb(8 52 64 / 0) 55%, rgb(8 52 64 / .17) 100%); --gs-idcard-mark: rgb(255 255 255 / .40); --gs-idcard-mark-2: rgb(255 255 255 / .24); --gs-idcard-chip: rgb(6 26 34 / .26); --gs-idcard-chip-line: rgb(255 255 255 / .42); --gs-mesh: radial-gradient(760px 620px at 92% -16%, rgb(14 143 163 / .10), transparent 70%), radial-gradient(700px 560px at 24% 114%, rgb(52 211 153 / .07), transparent 72%), radial-gradient(520px 440px at -8% 34%, rgb(47 79 168 / .06), transparent 68%); --gs-shadow-sm: 0 0 0 0 rgb(0 0 0 / 0); --gs-shadow-md: 0 0 0 0 rgb(0 0 0 / 0); --gs-shadow-lg: 0 0 0 0 rgb(0 0 0 / 0); --gs-shadow-inset: inset 0 1px 0 rgb(255 255 255 / .60); --gs-glow: 0 12px 26px -14px rgb(14 143 163 / .45); --gs-btn-face: linear-gradient(180deg, #1ea9c0 0%, #11829c 44%, #0a5566 100%); --gs-btn-line: transparent; /* no rim in light: see note above */ --gs-btn-ink: #f2feff; --gs-btn-glow: inset 0 1px 0 rgb(255 255 255 / .22); --gs-glass-bg: rgb(255 255 255 / .70); --gs-glass-bg-2: rgb(255 255 255 / .86); --gs-glass-border: rgb(9 30 33 / .08); --gs-glass-edge: rgb(255 255 255 / .90); --gs-glass-shadow: 0 0 0 0 rgb(0 0 0 / 0); --gs-auth-ground: linear-gradient(135deg, #eef5f5 0%, #dfeded 100%); --gs-auth-bloom-1: #cfe6e8; --gs-auth-bloom-2: #d8eaea; --gs-auth-orb-1: #0e8fa3; --gs-auth-orb-2: #0b7a8c; --gs-auth-orb-3: #22d3ee; --gs-auth-card: #ffffff; --gs-auth-edge: rgb(11 122 140 / .30); --gs-auth-halo: 0 0 0 0 rgb(0 0 0 / 0); --gs-auth-panel: linear-gradient(148deg, #5ce6f5 0%, #12b5cb 24%, #0b7a8c 60%, #06414e 100%); --gs-auth-greet: #ffffff; --gs-auth-line: rgb(9 30 33 / .18); --gs-auth-slant: 24%; /* The picker, when it sits ON the teal half. White text straight onto that gradient fails at the pale top corner, so each option gets a dark plate to sit on and the plate carries the contrast -- the same trick a photo caption uses. Identical in both themes on purpose: the plates sit on artwork, not on the theme's ground, so there is nothing for them to follow when the ground flips. */ --gs-authpick-plate: rgb(4 26 32 / .30); --gs-authpick-plate-on: rgb(4 26 32 / .52); --gs-authpick-line: rgb(255 255 255 / .26); --gs-authpick-line-on: rgb(255 255 255 / .72); --gs-authpick-chip: rgb(255 255 255 / .20); --gs-authpick-sub: rgb(240 253 255 / .78); /* An error on the teal half. Red type on that gradient is muddy at every point along it, so the plate goes dark and red-tinted and the TEXT stays the panel's own light ink -- the plate carries the alarm, the same way the option plates carry the contrast. */ --gs-authpick-err-line: rgb(255 186 186 / .80); color-scheme: light; } } @media (prefers-reduced-motion: reduce) { :root { --gs-dur: 0ms; } }