/* ============================================================================ THEMES — the twelve directions, as pure --g-* token overrides. Generated 2026-08-03 for RUN 4 of .agents/mission/RUN2_MASTER_PLAN.md. LOAD ORDER: after css/glass.css. Nothing here declares a component; every surface in the app already reads --g-*, so a theme is a token set and only a token set. --------------------------------------------------------------------------- THE TWO AXES ARE INDEPENDENT --------------------------------------------------------------------------- which of the twelve looks light or dark, exactly as before Every theme ships BOTH. The three blocks per theme mirror glass.css §2's own idiom, and for the same reason: :root[data-ui-theme=ID] the light body html[data-ui-theme=ID][data-theme="dark"] the explicit switch @media (prefers-color-scheme: dark) + :not([data-theme="light"]) the OS preference Edit the three together or not at all. Each block ALSO carries a bare [data-ui-theme=ID] selector so the token set can be applied to a NON-root element. That is what makes the live theme previews in the settings picker real: a swatch is an actual element wearing the actual theme, not a screenshot. --------------------------------------------------------------------------- ADDING THEME #13 --------------------------------------------------------------------------- Copy one theme's three blocks, change the id in the selectors, change the values, set --g-theme-name / --g-theme-blurb. That is the whole job: js/theme.js DISCOVERS themes by scanning this file's selectors at runtime and has no list of names anywhere in it. --------------------------------------------------------------------------- CONTRAST --------------------------------------------------------------------------- Every theme's body ink clears 4.5:1 against its own worst surface in BOTH modes — measured against the flattened pane, all four opaque rungs and the raw canvas, not against a convenient one. The per-theme worst case is stated above each block. A theme that cannot be read is a bug, not a style. Values are lifted from ui-options.html, the reviewed source of truth. The translation is mechanical (see scratchpad/gen-themes.js): --k-edge's inset parts become --g-edge-*, its drop parts become --g-shadow-*, --k-pane becomes the fill ladder, and so on. No look was re-invented here. ============================================================================ */ /* ============================================================================ V732-A / V732-B — THE PLATE RULE Fixes sweep v732 findings A (the ACCENT family) and B (the RED pair on the elevated rungs), and retires "solid-3 / solid-4 are not enforced" for both. ---------------------------------------------------------------------------- THE BUG, FOUR TIMES NOW. V721-2 (red pair), V721-7 (green pair), V731-F1 (--g-red-bg painted as INK, 1.00:1, shipped to prod) and now V732-A are one defect wearing four hats: a "-bg" / "-soft" / "-sel" plate declared as THE SAME RGB AS ITS OWN INK at 12-18 percent alpha. Paint --g-X on that plate and the plate is a pale wash of the ink's own hue, so contrast(ink, plate-base) is exactly 1.00 — the worst value in the whole gamut — and the plate spends the ink's entire contrast margin before a single ground is considered. The accent family had never been enforced by any wave: 24 of the 36 blocks below failed, worst 3.57 (pop dark, --g-accent on --g-fill-sel over --g-solid-4). PIXEL-arbitrated live consumers on v732 prod: button.ppm-sop-lib-topnav-item .ppm-on 3.543 studio light and 3.529 tahoe light, div.ws-hero-badge 3.703 studio light — i.e. the SELECTED item was the lowest-contrast thing on the screen, in 6 modules at once. THE RULE, AND WHY IT IS A PROOF AND NOT A TUNING. Source-over compositing puts every channel of the result between the plate's channel and the ground's, and relative luminance is monotone in each channel, so the composite's luminance ALWAYS lies between the plate's and the ground's. Therefore, when the plate colour P and every enforced ground G sit on the SAME SIDE of the ink I's luminance: contrast(I, over(P at any alpha, G)) >= min(contrast(I,P), contrast(I,G)) for EVERY alpha and EVERY ground — including grounds this file cannot see: mesh regions, glass rungs, a consumer's own tint. That is why the model kept disagreeing with the pixel arbiter by up to 0.70 on the old plates and cannot on the new ones: on the old shape the answer was ground-dominated, on the new shape the plate carries the floor. A plate is therefore safe once two things hold — P is on the grounds' side of I, and contrast(I, P) clears the bar. Alpha then stops being a contrast lever and becomes a free variable, spent purely on how strongly the tint reads. WHAT THAT MEANT IN PRACTICE. Light modes got a PALE plate, the shape --g-green-bg #D6F5E0 and --g-amber-bg #FCEBCF already ship in this file and the reason the green and amber pairs are the only two that never failed. Dark modes got a DEEP plate, the shape --g-red-bg rgba(90,10,29,.3) and --g-amber-bg #5C430E already ship here too. Every new base is hue-locked to the plate's own HSL hue (max drift across all 102 rebuilt values: 0.299 deg, most 0.00-0.25); only lightness, saturation and alpha moved. Within a block the three accent plates share one base so the soft / softer / selected ladder still reads as one family. Alpha was then raised to the smallest value at which the composited tint is at least as far from the bare rung, in CIELAB dE76, as it is today on the WORST of the six rungs — so no chip anywhere got fainter. cobalt LIGHT is the one inverted theme and its accent ink is #ffffff, so no lighter plate exists; its two plates were pinned to rgb(9,16,80), byte-equal to this block's own --g-fill-3 and --g-fill-sunken, exactly as R6-19 / R6-23b / V721-2 / V721-7 / V726-a already resolved every other same-shape pair in that block. RUNG DECISION — ENFORCED, NOT WATCHED. V721-2 left --g-solid-3 / --g-solid-4 unenforced "because no measured consumer sits there". That premise is now falsified three times: V724-3 (--g-text-3, ledger light), V731-1 (--g-text-3, cobalt dark) and V732-B, whose consumer is span.ppf-badge.ppf-badge-red — the Funnel leads-table "No" / "No-Show" chip, 48 instances on one screen, pixel 3.529 tahoe dark and 4.064 vellum dark. So for the ACCENT plate family (--g-accent on --g-accent-soft, --g-accent-softer, --g-fill-sel) and for the RED pair (--g-red on --g-red-bg) the enforced ground set is now ALL SIX opaque rungs — canvas, solid-1, solid-2, solid-3, solid-4, solid-sunken. The promotion is free for the two families that were already correct: on all six rungs the green pair measures 0 of 36 failures (worst 4.536) and the amber pair 0 of 36 (worst 4.539), unchanged by this edit. MEASURED, ALL 36 BLOCKS, ALL SIX RUNGS, TRUE SOURCE-OVER (before -> after): --g-accent on --g-accent-soft 24 fails, worst 3.669 -> 0 fails, worst 4.635 --g-accent on --g-fill-sel 24 fails, worst 3.568 -> 0 fails, worst 4.635 --g-accent on --g-accent-softer 20 fails, worst 4.109 -> 0 fails, worst 4.704 --g-red on --g-red-bg 23 fails, worst 3.638 -> 0 fails, worst 4.754 --g-text on the 3 accent plates 2 fails, worst 3.725 -> 0 fails, worst 6.822 --g-text-2 on --g-red-bg 15 fails, worst 3.929 -> 0 fails, worst 4.722 That last row closes the v732 F2 leftover: .ppm-svc-row-loud .ppm-svc-t2 and .ppm-svc-cua are --g-text-2 on --g-red-bg, and terra LIGHT sat at 4.49 — 0.01 under the bar. It is now 4.72 on the same rung, fixed by the plate, with --g-text-2 itself byte-unchanged. THE FOUR INK MOVES. Four light blocks had no headroom left for ANY safe plate, because a pale plate's ceiling is what the ink reads on pure white: pop light could reach only 4.97 there and its ink already failed --g-solid-3 BARE at 4.379, and aurora light sits on a lavender ground that is the accent hue itself. Those four --g-accent values were scaled down (pure scalar scale, which holds HSL hue exactly) by the minimum that restores a working band — studio 0.98, graphite 0.95, pop 0.92, aurora 0.91. --g-accent-fill, --g-accent-strong, --g-accent-press and --g-accent-glow are byte-unchanged in all four, so every solid button, press state and glow keeps the exact brand colour: this is the INK tier only, per the contract at css/glass.css:138 ("--g-accent = text / icon / hairline"). Bare worst rung, all six: studio 4.606 -> 4.762 - graphite 4.588 -> 4.975 - pop 4.379 -> 5.013 - aurora 4.532 -> 5.231, and --g-accent bare is now 0 of 36 failures. NOT DONE HERE, ON PURPOSE. (1) The 12 accent blocks whose pair already cleared 4.75 on all six rungs keep the legacy shape and were not touched — halo, ledger and ink in both modes plus verde light and cobalt dark, all of which measure 7.2 to 15.2 because their accent ink is near-black or near-white. Same for the 6 --g-red-bg blocks that already cleared 4.75: aurora dark, verde light, and cobalt in both modes — cobalt light because V721-2 had already rebuilt it to exactly this rule. (2) --g-blue-bg, --g-violet-bg and --g-slate-bg carry the identical broken shape and fail 17 / 25 / 20 of 36 on these rungs, but v732-C found NO rendered consumer for the blue pair and none was measured for the other two — filed, not fixed blind: find a consumer first. (3) --g-accent-strong is used as an INK in 9 rules yet is designed as a hover FILL, and it fails bare in 15 of 36 blocks (worst 2.974, tahoe light on canvas). Untouched and unregressed by this edit; it needs a consumer decision, not a colour. (4) cobalt LIGHT's --g-text-3 ceiling note further down this file still stands and is untouched — it is about the white GLASS ladder over a bright mesh, a different surface from these opaque rungs, and the plates fixed here now clear 8.4 to 15.2 in that block. Scripts: .agents/mission/sweeps/green-pair-measure.js (--pair red / green / amber, and --ink accent --veil accent-soft for the accent family). ============================================================================ */ /* ============================================================================ V733-N2 / V733-N3 — THE PLATE RULE, INSTANCES FIVE AND SIX Rebuilds --g-slate-bg (20 blocks) and --g-violet-bg (25 blocks). Same defect as V721-2, V721-7, V731-F1, V732-A and V732-B: the plate was declared as the SAME RGB as its own ink at 14-16 percent alpha, so contrast(ink, plate-base) is 1.00 and the plate spends the ink's entire margin before any ground is considered. Measured before, all 36 blocks x all SIX enforced rungs, true source-over: --g-slate on --g-slate-bg 20 of 36 fail, worst 3.625 (cobalt light, solid-4) --g-text-2 on --g-slate-bg identical - --g-slate and --g-text-2 are byte-equal in all 36 blocks, so .g-chip BASE inherits it --g-violet on --g-violet-bg 25 of 36 fail, worst 3.502 (cobalt light, solid-4) After: 0 of 36 for both, worst 4.751. WHY THESE TWO ARE NOT LIKE V732-C. The v732 sweep left --g-blue-bg alone because it had no rendered consumer. Both pairs here DO have consumers, and the violet ones were missed by the earlier grep because it did not search v2 - which ships (index.html:6186-6188 document.writes v2/tokens.css, v2/base.css and the per-module sheet). Slate: css/glass.css:1330 .g-chip BASE and :1344 .g-chip--slate, emitted at js/activity.js:1010 and js/invoices.js:1413; js/client-portal.js:4053 .cp-bk-work; js/task-timeline.js:328 .tltl-off; js/calendar.js:7466; v2/partners.css:364+410; v2/home.css:1198; v2/payments.css:2093 .v2p-badge.is-slate; and every legacy color:var(--slate);background:var(--slate-bg) pair reached through css/legacy-bridge.css:87+94 (index.html:905, :1655, :4070). Violet: v2/base.css:287 and v2/payments.css:2092 .v2p-badge.is-violet, emitted by v2/payments.js:1757 TYPE_TONE.Extra through p3badge() at :2141 and :2288, which render inside .v2mpy / .v2inv - the exact selectors v2/payments.css:74-106 scopes --v2-violet-bg: var(--g-violet-bg) onto, and being a deeper ancestor than v2/tokens.css's :root it wins regardless of source order. SHAPE. Every rebuilt plate is an OPAQUE tint (light blocks) or shade (dark blocks) of its own ink - the same shape css/glass.css:155 and :416 already ship as the un-themed default for this very token. Opaque is deliberate: the composite is then the plate itself, so the contrast is identical on all six rungs AND on every ground this file cannot see (mesh regions, glass rungs, a consumer's own tint). That is a strictly stronger guarantee than the same-side argument, which it also satisfies. Tint and shade are exact-hue operations - every channel difference scales by the same factor, so the HSL hue is preserved in float and only the integer rounding moves it. Max hue drift across all 45 rebuilt values: 2.143 deg, chosen from the 27-neighbourhood of each candidate. That is AT the drift of the reviewed pair in css/glass.css:155 (2.143 deg) and under its dark twin at :416 (4.038 deg). The 0.299 deg figure quoted in the V732-A header above was achievable because the accent family is saturated; on a near-neutral slate a plus-or-minus-1 rounding on rgb(201,203,208) moves HSL hue about 4 deg for a sub-JND colour change, so 0.3 deg is a property of the metric there, not of the colour. COBALT LIGHT is the one inverted block - its inks are near-white and its grounds are electric blue, so its plates go DEEP, exactly as --g-red-bg rgba(90,10,29,.3), --g-amber-bg rgba(96,68,0,.6) and --g-fill-sunken rgba(9,16,80,.3) already do in that same block. Its slate plate is pinned to rgb(9,16,80), byte-equal to the rgb of its own --g-fill-3 and --g-fill-sunken, the resolution R6-19 / R6-23b / V721-2 already used there: contrast 16.084 on every rung, hue drift 0.751 deg. CHIP VISIBILITY, HONESTLY. dE76 of the tint against the bare rung DROPS in 16 of the 20 slate blocks (e.g. tahoe dark 8.53 to 3.86) and in 4 of the 25 violet ones. That is not a regression that could have been engineered away: the old plate reads strongly precisely BECAUSE it is the ink, i.e. maximally far from every ground - which is the same fact that makes it fail contrast. Any rule-compliant plate must sit on the grounds' side of the ink, hence near them. The right yardstick is the reviewed, correct-by-construction pair in css/glass.css, whose min dE76 across the same six rungs is 0.72 light and 0.83 dark; every value here is 3.6 to 29.4, i.e. 4x to 35x that baseline, and all are far above the roughly 2.3 just-noticeable step. Violet mostly IMPROVES (up to +16.3) because it is chromatic. NOT FIXED HERE, ON PURPOSE. (1) --g-text-3 on --g-slate-bg, the js/task-timeline.js .tltl-off pairing -- ** HANDOFF COMPLETED in v734: the orchestrator moved that ONE consumer's ink to --g-text-2, which measures 0/36 on the new plate. The app now has ZERO --g-text-3-on-slate-bg consumers, so the pairing's score below is moot rather than outstanding. ** The original reasoning, kept because it is the correct rule: fails 36 of 36 today and CANNOT be fixed from this file: bare --g-text-3 on the six rungs already measures 4.5003 at its worst (graphite light, canvas), so the plate's ceiling is 4.50 and 11 of the 12 light blocks cannot carry that ink at all. It needs a quieter-ink decision at the consumer, not a colour - handed off. (2) --g-blue-bg keeps the legacy shape here, but the V732-C premise that it has no consumer is now falsified the same way violet's was: v2/payments.css:2091 .v2p-badge.is-blue is emitted by STATUS_TONE.upcoming and TYPE_TONE.Commission at v2/payments.js:1756-1757. Left alone only because it sits outside this mandate - it should be the next one-line-per-block edit. Script: the 36-block x 6-rung source-over sweep in this session's scratchpad. ============================================================================ */ /* ============================================================================ 01 STUDIO — Refined liquid glass. Tinted ground, real specular rims, the house red. worst body-ink contrast — light 4.85:1 · dark 4.59:1 ============================================================================ */ :root[data-ui-theme="studio"], [data-ui-theme="studio"] { color-scheme: light; --g-theme-name: "Studio"; --g-theme-blurb: "Refined liquid glass. Tinted ground, real specular rims, the house red."; /* ground */ --g-canvas: #e3e8f4; --g-mesh: radial-gradient(52% 42% at 12% 6%,rgba(196,43,34,.17),transparent 68%),radial-gradient(60% 48% at 88% 12%,rgba(31,95,174,.22),transparent 70%),radial-gradient(54% 60% at 78% 96%,rgba(101,73,172,.17),transparent 70%),radial-gradient(46% 40% at 22% 88%,rgba(18,112,59,.12),transparent 70%),radial-gradient(80% 60% at 50% 40%,rgba(255,255,255,.4),transparent 75%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #eef1f8; --g-solid-2: #f4f6fb; --g-solid-3: #f8f9fc; --g-solid-4: #fbfcfd; --g-solid-sunken: #e6eaf5; /* ink */ --g-text: #0e1116; --g-text-2: #454c5c; --g-text-3: #5c6474; --g-text-4: #a1a6b1; --g-text-on-accent: #ffffff; --g-placeholder: #737a88; /* the needle */ /* V732-A INK MOVE: was #c42b22, scaled x0.98 (pure scalar scale, so HSL hue drift is 0.063 deg; L* 43.62 to 42.72). The house red is untouched as a FILL — --g-accent-fill / -strong / -press / -glow are byte-unchanged — this is the ink tier only, per css/glass.css:138. Bare worst rung 4.606 to 4.762, which is what lets the rebuilt pale plate below clear the bar on its own (contrast 4.62 with this ink, so the composite can never fall under it at any alpha or on any ground) while the chip still reads dE76 9.6 against its own ground. See THE PLATE RULE at the top of this file. */ --g-accent: #c02a21; --g-accent-strong: #a9251d; --g-accent-fill: #c42b22; --g-accent-press: #99221b; --g-accent-soft: rgba(255, 221, 219, 0.65); --g-accent-softer: rgba(255, 238, 237, 0.61); --g-accent-glow: rgba(196, 43, 34, 0.3); /* status */ --g-green: #12703b; --g-green-bg: #D6F5E0; --g-text-on-green: #edfaf3; --g-amber: #8a5300; --g-amber-bg: #FCEBCF; --g-text-on-amber: #faf5ed; --g-blue: #154584; --g-blue-bg: rgba(21, 69, 132, 0.14); --g-violet: #491584; --g-violet-bg: rgba(73, 21, 132, 0.14); --g-red: #aa261e; --g-red-bg: rgba(250, 214, 212, 0.67); --g-text-on-red: #faeeed; --g-slate: #454c5c; --g-slate-bg: rgba(69, 76, 92, 0.14); /* the glass ladder */ --g-fill-1: rgba(255, 255, 255, 0.658); --g-fill-2: rgba(255, 255, 255, 0.62); --g-fill-3: rgba(255, 255, 255, 0.734); --g-fill-4: rgba(255, 255, 255, 0.856); --g-fill-nested: rgba(255,255,255,.6); --g-fill-sunken: rgba(14,17,22,.05); --g-fill-hover: rgba(14,20,34,.04); --g-fill-press: rgba(14,17,22,.05); --g-fill-sel: rgba(255, 221, 219, 0.65); /* blur (constant per rung, NEVER animated) */ --g-blur-1: blur(22px) saturate(180%); --g-blur-2: blur(20px) saturate(180%); --g-blur-3: blur(28px) saturate(190%); --g-blur-4: blur(35px) saturate(190%); --g-blur-scrim: blur(8px) saturate(115%); /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(177deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.08) 38%,rgba(255,255,255,0) 70%); --g-sheen-2: linear-gradient(177deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.08) 38%,rgba(255,255,255,0) 70%); --g-sheen-3: linear-gradient(177deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.08) 38%,rgba(255,255,255,0) 70%); --g-sheen-4: linear-gradient(177deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.08) 38%,rgba(255,255,255,0) 70%); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: inset 0 0 0 1px rgba(14,20,34,.1), inset 0 1px 0 rgba(255,255,255,.9); --g-edge-2: inset 0 0 0 1px rgba(14,20,34,.08), inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(14,20,34,.04); --g-edge-3: inset 0 0 0 1px rgba(14,20,34,.09), inset 0 1.5px 0 rgba(255,255,255,.97); --g-edge-4: inset 0 0 0 1px rgba(14,20,34,.09), inset 0 1.5px 0 rgba(255,255,255,.97); --g-hairline: rgba(14,20,34,.09); --g-hairline-strong: rgba(14,20,34,.09); /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 1px 2px rgba(14,20,34,.06); --g-shadow-2: 0 1px 2px rgba(14,20,34,.05), 0 16px 32px -18px rgba(14,20,34,.3); --g-shadow-3: 0 2px 5px rgba(14,20,34,.08), 0 26px 56px -18px rgba(14,20,34,.4); --g-shadow-4: 0 2px 5px rgba(14,20,34,.08), 0 26px 56px -18px rgba(14,20,34,.4); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 1px 2px rgba(14,20,34,.06); --g-e2: 0 1px 2px rgba(14,20,34,.05), 0 16px 32px -18px rgba(14,20,34,.3); --g-e3: 0 2px 5px rgba(14,20,34,.08), 0 26px 56px -18px rgba(14,20,34,.4); --g-e4: 0 2px 5px rgba(14,20,34,.08), 0 26px 56px -18px rgba(14,20,34,.4); --g-lift: 0 2px 5px rgba(14,20,34,.08), 0 26px 56px -18px rgba(14,20,34,.4); /* scrim */ --g-scrim: rgba(41, 42, 44, 0.34); --g-scrim-strong: rgba(41, 42, 44, 0.5); /* radii */ --g-r-xs: 7px; --g-r-sm: 9px; --g-r-md: 11px; --g-r-lg: 16px; --g-r-xl: 20px; --g-r-2xl: 26px; --g-r-ctl: 11px; --g-r-card: 16px; --g-r-chrome: 16px; --g-r-menu: 14px; --g-r-sheet: 20px; --g-r-modal: 20px; --g-r-inner: 11px; /* space + control sizing */ --g-pad-card: 19px; --g-pad-card-tight: 13px; --g-pad-sheet: 23px; --g-pad-page: 19px; --g-gap: 14px; --g-ctl-h: 38px; --g-ctl-h-sm: 30px; --g-ctl-h-lg: 46px; --g-row-h: 44px; /* focus */ --g-focus-color: rgba(196, 43, 34, 0.65); --g-focus-halo: rgba(196, 43, 34, 0.18); --g-focus-ring: 0 0 0 3.5px rgba(196,43,34,.28); /* feedback */ --g-skel: rgba(14, 17, 22, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(14, 17, 22, 0.2); --g-scroll-thumb-hover: rgba(14, 17, 22, 0.34); --g-grabber: rgba(14, 17, 22, 0.32); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 0px; --g-border-c: transparent; --g-btn-primary-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(151,22,15,.35),0 7px 16px -6px rgba(196,43,34,.5); --g-btn-primary-shadow-hover: inset 0 1px 0 rgba(255,255,255,.25),0 2px 3px rgba(151,22,15,.3),0 10px 22px -6px rgba(196,43,34,.55); --g-btn-primary-shadow-press: inset 0 1px 3px rgba(80,10,5,.4); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } html[data-ui-theme="studio"][data-theme="dark"], [data-ui-theme="studio"][data-theme="dark"] { color-scheme: dark; --g-theme-name: "Studio"; --g-theme-blurb: "Refined liquid glass. Tinted ground, real specular rims, the house red."; /* ground */ --g-canvas: #0c0e13; --g-mesh: radial-gradient(52% 42% at 12% 6%,rgba(228,87,76,.15),transparent 68%),radial-gradient(60% 48% at 88% 12%,rgba(64,132,214,.17),transparent 70%),radial-gradient(54% 60% at 78% 96%,rgba(129,102,204,.15),transparent 70%),radial-gradient(46% 40% at 22% 88%,rgba(36,150,86,.1),transparent 70%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #11141b; --g-solid-2: #13161d; --g-solid-3: #1c1f26; --g-solid-4: #26282f; --g-solid-sunken: #0c0e13; /* ink */ --g-text: #f1f3f8; --g-text-2: #a7adbb; --g-text-3: #89909f; --g-text-4: #545965; --g-text-on-accent: #260b08; --g-placeholder: #777e8b; /* the needle */ --g-accent: #df6c65; --g-accent-strong: #dc5c56; --g-accent-fill: #d95149; --g-accent-press: #d0564f; --g-accent-soft: rgba(65, 4, 1, 0.42); --g-accent-softer: rgba(65, 4, 1, 0.23); --g-accent-glow: rgba(214, 66, 58, 0.34); /* status */ --g-green: #5ad695; --g-green-bg: rgba(52,199,123,.16); --g-text-on-green: #081f13; --g-amber: #f0b45c; --g-amber-bg: rgba(255,183,64,.15); --g-text-on-amber: #1f1508; --g-blue: #83ace2; --g-blue-bg: rgba(131, 172, 226, 0.16); --g-violet: #af83e2; --g-violet-bg: rgb(50, 36, 66); --g-red: #f2857c; --g-red-bg: rgba(103, 8, 0, 0.25); --g-text-on-red: #1f0908; --g-slate: #a7adbb; --g-slate-bg: rgba(167, 173, 187, 0.16); /* the glass ladder */ --g-fill-1: rgba(24, 28, 38, 0.595); --g-fill-2: rgba(24, 28, 38, 0.55); --g-fill-3: rgba(24, 28, 38, 0.685); --g-fill-4: rgba(24, 28, 38, 0.829); --g-fill-nested: rgba(255,255,255,.08); --g-fill-sunken: rgba(0,0,0,.28); --g-fill-hover: rgba(255,255,255,.045); --g-fill-press: rgba(255,255,255,.06); --g-fill-sel: rgba(65, 4, 1, 0.45); /* blur (constant per rung, NEVER animated) */ --g-blur-1: blur(22px) saturate(180%); --g-blur-2: blur(20px) saturate(180%); --g-blur-3: blur(28px) saturate(190%); --g-blur-4: blur(35px) saturate(190%); --g-blur-scrim: blur(8px) saturate(115%); /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(177deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.015) 40%,rgba(255,255,255,0) 70%); --g-sheen-2: linear-gradient(177deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.015) 40%,rgba(255,255,255,0) 70%); --g-sheen-3: linear-gradient(177deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.015) 40%,rgba(255,255,255,0) 70%); --g-sheen-4: linear-gradient(177deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.015) 40%,rgba(255,255,255,0) 70%); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: inset 0 0 0 1px rgba(255,255,255,.11), inset 0 1px 0 rgba(255,255,255,.13); --g-edge-2: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1.5px 0 rgba(255,255,255,.14); --g-edge-3: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1.5px 0 rgba(255,255,255,.16); --g-edge-4: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1.5px 0 rgba(255,255,255,.16); --g-hairline: rgba(255,255,255,.09); --g-hairline-strong: rgba(255,255,255,.09); /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 18px 36px -18px rgba(0,0,0,.6); --g-shadow-2: 0 1px 2px rgba(0,0,0,.3), 0 18px 36px -18px rgba(0,0,0,.6); --g-shadow-3: 0 2px 6px rgba(0,0,0,.4), 0 30px 60px -18px rgba(0,0,0,.75); --g-shadow-4: 0 2px 6px rgba(0,0,0,.4), 0 30px 60px -18px rgba(0,0,0,.75); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 1px 2px rgba(0,0,0,.3), 0 18px 36px -18px rgba(0,0,0,.6); --g-e2: 0 1px 2px rgba(0,0,0,.3), 0 18px 36px -18px rgba(0,0,0,.6); --g-e3: 0 2px 6px rgba(0,0,0,.4), 0 30px 60px -18px rgba(0,0,0,.75); --g-e4: 0 2px 6px rgba(0,0,0,.4), 0 30px 60px -18px rgba(0,0,0,.75); --g-lift: 0 2px 6px rgba(0,0,0,.4), 0 30px 60px -18px rgba(0,0,0,.75); /* scrim */ --g-scrim: rgba(0, 0, 0, 0.58); --g-scrim-strong: rgba(0, 0, 0, 0.74); /* radii */ --g-r-xs: 7px; --g-r-sm: 9px; --g-r-md: 11px; --g-r-lg: 16px; --g-r-xl: 20px; --g-r-2xl: 26px; --g-r-ctl: 11px; --g-r-card: 16px; --g-r-chrome: 16px; --g-r-menu: 14px; --g-r-sheet: 20px; --g-r-modal: 20px; --g-r-inner: 11px; /* space + control sizing */ --g-pad-card: 19px; --g-pad-card-tight: 13px; --g-pad-sheet: 23px; --g-pad-page: 19px; --g-gap: 14px; --g-ctl-h: 38px; --g-ctl-h-sm: 30px; --g-ctl-h-lg: 46px; --g-row-h: 44px; /* focus */ --g-focus-color: rgba(223, 108, 101, 0.75); --g-focus-halo: rgba(223, 108, 101, 0.22); --g-focus-ring: 0 0 0 3.5px rgba(228,87,76,.35); /* feedback */ --g-skel: rgba(255, 255, 255, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(255, 255, 255, 0.20); --g-scroll-thumb-hover: rgba(255, 255, 255, 0.34); --g-grabber: rgba(235, 235, 245, 0.34); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 0px; --g-border-c: transparent; --g-btn-primary-shadow: inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.4),0 8px 18px -6px rgba(214,66,58,.45); --g-btn-primary-shadow-hover: inset 0 1px 0 rgba(255,255,255,.3),0 2px 3px rgba(0,0,0,.35),0 11px 24px -6px rgba(214,66,58,.5); --g-btn-primary-shadow-press: inset 0 1px 3px rgba(0,0,0,.5); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } @media (prefers-color-scheme: dark) { html[data-ui-theme="studio"]:not([data-theme="light"]), [data-ui-theme="studio"]:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --g-theme-name: "Studio"; --g-theme-blurb: "Refined liquid glass. Tinted ground, real specular rims, the house red."; /* ground */ --g-canvas: #0c0e13; --g-mesh: radial-gradient(52% 42% at 12% 6%,rgba(228,87,76,.15),transparent 68%),radial-gradient(60% 48% at 88% 12%,rgba(64,132,214,.17),transparent 70%),radial-gradient(54% 60% at 78% 96%,rgba(129,102,204,.15),transparent 70%),radial-gradient(46% 40% at 22% 88%,rgba(36,150,86,.1),transparent 70%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #11141b; --g-solid-2: #13161d; --g-solid-3: #1c1f26; --g-solid-4: #26282f; --g-solid-sunken: #0c0e13; /* ink */ --g-text: #f1f3f8; --g-text-2: #a7adbb; --g-text-3: #89909f; --g-text-4: #545965; --g-text-on-accent: #260b08; --g-placeholder: #777e8b; /* the needle */ --g-accent: #df6c65; --g-accent-strong: #dc5c56; --g-accent-fill: #d95149; --g-accent-press: #d0564f; --g-accent-soft: rgba(65, 4, 1, 0.42); --g-accent-softer: rgba(65, 4, 1, 0.23); --g-accent-glow: rgba(214, 66, 58, 0.34); /* status */ --g-green: #5ad695; --g-green-bg: rgba(52,199,123,.16); --g-text-on-green: #081f13; --g-amber: #f0b45c; --g-amber-bg: rgba(255,183,64,.15); --g-text-on-amber: #1f1508; --g-blue: #83ace2; --g-blue-bg: rgba(131, 172, 226, 0.16); --g-violet: #af83e2; --g-violet-bg: rgb(50, 36, 66); --g-red: #f2857c; --g-red-bg: rgba(103, 8, 0, 0.25); --g-text-on-red: #1f0908; --g-slate: #a7adbb; --g-slate-bg: rgba(167, 173, 187, 0.16); /* the glass ladder */ --g-fill-1: rgba(24, 28, 38, 0.595); --g-fill-2: rgba(24, 28, 38, 0.55); --g-fill-3: rgba(24, 28, 38, 0.685); --g-fill-4: rgba(24, 28, 38, 0.829); --g-fill-nested: rgba(255,255,255,.08); --g-fill-sunken: rgba(0,0,0,.28); --g-fill-hover: rgba(255,255,255,.045); --g-fill-press: rgba(255,255,255,.06); --g-fill-sel: rgba(65, 4, 1, 0.45); /* blur (constant per rung, NEVER animated) */ --g-blur-1: blur(22px) saturate(180%); --g-blur-2: blur(20px) saturate(180%); --g-blur-3: blur(28px) saturate(190%); --g-blur-4: blur(35px) saturate(190%); --g-blur-scrim: blur(8px) saturate(115%); /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(177deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.015) 40%,rgba(255,255,255,0) 70%); --g-sheen-2: linear-gradient(177deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.015) 40%,rgba(255,255,255,0) 70%); --g-sheen-3: linear-gradient(177deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.015) 40%,rgba(255,255,255,0) 70%); --g-sheen-4: linear-gradient(177deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.015) 40%,rgba(255,255,255,0) 70%); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: inset 0 0 0 1px rgba(255,255,255,.11), inset 0 1px 0 rgba(255,255,255,.13); --g-edge-2: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1.5px 0 rgba(255,255,255,.14); --g-edge-3: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1.5px 0 rgba(255,255,255,.16); --g-edge-4: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1.5px 0 rgba(255,255,255,.16); --g-hairline: rgba(255,255,255,.09); --g-hairline-strong: rgba(255,255,255,.09); /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 18px 36px -18px rgba(0,0,0,.6); --g-shadow-2: 0 1px 2px rgba(0,0,0,.3), 0 18px 36px -18px rgba(0,0,0,.6); --g-shadow-3: 0 2px 6px rgba(0,0,0,.4), 0 30px 60px -18px rgba(0,0,0,.75); --g-shadow-4: 0 2px 6px rgba(0,0,0,.4), 0 30px 60px -18px rgba(0,0,0,.75); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 1px 2px rgba(0,0,0,.3), 0 18px 36px -18px rgba(0,0,0,.6); --g-e2: 0 1px 2px rgba(0,0,0,.3), 0 18px 36px -18px rgba(0,0,0,.6); --g-e3: 0 2px 6px rgba(0,0,0,.4), 0 30px 60px -18px rgba(0,0,0,.75); --g-e4: 0 2px 6px rgba(0,0,0,.4), 0 30px 60px -18px rgba(0,0,0,.75); --g-lift: 0 2px 6px rgba(0,0,0,.4), 0 30px 60px -18px rgba(0,0,0,.75); /* scrim */ --g-scrim: rgba(0, 0, 0, 0.58); --g-scrim-strong: rgba(0, 0, 0, 0.74); /* radii */ --g-r-xs: 7px; --g-r-sm: 9px; --g-r-md: 11px; --g-r-lg: 16px; --g-r-xl: 20px; --g-r-2xl: 26px; --g-r-ctl: 11px; --g-r-card: 16px; --g-r-chrome: 16px; --g-r-menu: 14px; --g-r-sheet: 20px; --g-r-modal: 20px; --g-r-inner: 11px; /* space + control sizing */ --g-pad-card: 19px; --g-pad-card-tight: 13px; --g-pad-sheet: 23px; --g-pad-page: 19px; --g-gap: 14px; --g-ctl-h: 38px; --g-ctl-h-sm: 30px; --g-ctl-h-lg: 46px; --g-row-h: 44px; /* focus */ --g-focus-color: rgba(223, 108, 101, 0.75); --g-focus-halo: rgba(223, 108, 101, 0.22); --g-focus-ring: 0 0 0 3.5px rgba(228,87,76,.35); /* feedback */ --g-skel: rgba(255, 255, 255, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(255, 255, 255, 0.20); --g-scroll-thumb-hover: rgba(255, 255, 255, 0.34); --g-grabber: rgba(235, 235, 245, 0.34); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 0px; --g-border-c: transparent; --g-btn-primary-shadow: inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.4),0 8px 18px -6px rgba(214,66,58,.45); --g-btn-primary-shadow-hover: inset 0 1px 0 rgba(255,255,255,.3),0 2px 3px rgba(0,0,0,.35),0 11px 24px -6px rgba(214,66,58,.5); --g-btn-primary-shadow-press: inset 0 1px 3px rgba(0,0,0,.5); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } } /* ============================================================================ 02 TAHOE — macOS Tahoe Control Center. Pill controls, deep frost, system blue. worst body-ink contrast — light 4.53:1 · dark 4.55:1 ============================================================================ */ :root[data-ui-theme="tahoe"], [data-ui-theme="tahoe"] { color-scheme: light; --g-theme-name: "Tahoe"; --g-theme-blurb: "macOS Tahoe Control Center. Pill controls, deep frost, system blue."; /* ground */ --g-canvas: #c9cdd8; --g-mesh: radial-gradient(60% 55% at 20% 15%,rgba(108,128,172,.42),transparent 70%),radial-gradient(55% 50% at 85% 80%,rgba(140,128,170,.36),transparent 70%),radial-gradient(45% 40% at 70% 20%,rgba(255,255,255,.4),transparent 72%),linear-gradient(180deg,rgba(255,255,255,.14),rgba(20,25,45,.06)); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #dbdde6; --g-solid-2: #e4e6ed; --g-solid-3: #edeff3; --g-solid-4: #f5f6f8; --g-solid-sunken: #cdd1db; /* ink */ --g-text: #111318; --g-text-2: #4b5162; --g-text-3: #525766; --g-text-4: #9498a3; --g-text-on-accent: #ffffff; --g-placeholder: #686d7a; /* the needle */ --g-accent: #0654a3; --g-accent-strong: #0972db; --g-accent-fill: #0072e6; --g-accent-press: #0867c7; --g-accent-soft: rgba(183, 219, 255, 0.56); --g-accent-softer: rgba(183, 219, 255, 0.26); --g-accent-glow: rgba(10, 132, 255, 0.3); /* status */ --g-green: #145f29; --g-green-bg: rgba(52,199,89,.16); --g-text-on-green: #edfaf1; --g-amber: #794601; --g-amber-bg: rgba(255,149,0,.15); --g-text-on-amber: #faf4ed; --g-blue: #154584; --g-blue-bg: rgba(21, 69, 132, 0.14); --g-violet: #491584; --g-violet-bg: rgba(73, 21, 132, 0.14); --g-red: #88241b; --g-red-bg: rgba(255, 177, 170, 0.3); --g-text-on-red: #faeeed; --g-slate: #4b5162; --g-slate-bg: rgb(203, 204, 207); /* the glass ladder */ --g-fill-1: rgba(250, 251, 254, 0.595); --g-fill-2: rgba(250, 251, 254, 0.55); --g-fill-3: rgba(250, 251, 254, 0.685); --g-fill-4: rgba(250, 251, 254, 0.829); --g-fill-nested: rgba(255,255,255,.55); --g-fill-sunken: rgba(118,130,160,.12); --g-fill-hover: rgba(20,25,45,.04); --g-fill-press: rgba(20,25,45,.06); --g-fill-sel: rgba(183, 219, 255, 0.56); /* blur (constant per rung, NEVER animated) */ --g-blur-1: blur(34px) saturate(190%); --g-blur-2: blur(30px) saturate(190%); --g-blur-3: blur(36px) saturate(200%); --g-blur-4: blur(45px) saturate(200%); --g-blur-scrim: blur(8px) saturate(115%); /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 55%); --g-sheen-2: linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 55%); --g-sheen-3: linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 55%); --g-sheen-4: linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 55%); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: inset 0 0 0 1px rgba(255,255,255,.5), inset 0 1px 0 rgba(255,255,255,.95); --g-edge-2: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 1.5px 0 rgba(255,255,255,.95); --g-edge-3: inset 0 0 0 1px rgba(255,255,255,.45), inset 0 1.5px 0 rgba(255,255,255,.97); --g-edge-4: inset 0 0 0 1px rgba(255,255,255,.45), inset 0 1.5px 0 rgba(255,255,255,.97); --g-hairline: rgba(20,25,45,.08); --g-hairline-strong: rgba(20,25,45,.08); /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 1px 3px rgba(20,25,45,.1); --g-shadow-2: 0 2px 5px rgba(20,25,45,.07), 0 22px 44px -20px rgba(20,25,45,.4); --g-shadow-3: 0 3px 8px rgba(20,25,45,.1), 0 30px 64px -20px rgba(20,25,45,.5); --g-shadow-4: 0 3px 8px rgba(20,25,45,.1), 0 30px 64px -20px rgba(20,25,45,.5); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 1px 3px rgba(20,25,45,.1); --g-e2: 0 2px 5px rgba(20,25,45,.07), 0 22px 44px -20px rgba(20,25,45,.4); --g-e3: 0 3px 8px rgba(20,25,45,.1), 0 30px 64px -20px rgba(20,25,45,.5); --g-e4: 0 3px 8px rgba(20,25,45,.1), 0 30px 64px -20px rgba(20,25,45,.5); --g-lift: 0 3px 8px rgba(20,25,45,.1), 0 30px 64px -20px rgba(20,25,45,.5); /* scrim */ --g-scrim: rgba(36, 37, 39, 0.34); --g-scrim-strong: rgba(36, 37, 39, 0.5); /* radii */ --g-r-xs: 999px; --g-r-sm: 999px; --g-r-md: 999px; --g-r-lg: 22px; --g-r-xl: 28px; --g-r-2xl: 35px; --g-r-ctl: 999px; --g-r-card: 22px; --g-r-chrome: 22px; --g-r-menu: 18px; --g-r-sheet: 28px; --g-r-modal: 28px; --g-r-inner: 14px; /* space + control sizing */ --g-pad-card: 20px; --g-pad-card-tight: 14px; --g-pad-sheet: 24px; --g-pad-page: 20px; --g-gap: 13px; --g-ctl-h: 42px; --g-ctl-h-sm: 33px; --g-ctl-h-lg: 51px; --g-row-h: 49px; /* focus */ --g-focus-color: rgba(6, 84, 163, 0.65); --g-focus-halo: rgba(6, 84, 163, 0.18); --g-focus-ring: 0 0 0 4px rgba(10,132,255,.3); /* feedback */ --g-skel: rgba(17, 19, 24, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(17, 19, 24, 0.2); --g-scroll-thumb-hover: rgba(17, 19, 24, 0.34); --g-grabber: rgba(17, 19, 24, 0.32); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 0px; --g-border-c: transparent; --g-btn-primary-shadow: inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px rgba(0,60,140,.3),0 8px 18px -6px rgba(10,132,255,.5); --g-btn-primary-shadow-hover: inset 0 1px 0 rgba(255,255,255,.35),0 2px 4px rgba(0,60,140,.25),0 11px 24px -6px rgba(10,132,255,.55); --g-btn-primary-shadow-press: inset 0 1px 3px rgba(0,40,100,.45); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } html[data-ui-theme="tahoe"][data-theme="dark"], [data-ui-theme="tahoe"][data-theme="dark"] { color-scheme: dark; --g-theme-name: "Tahoe"; --g-theme-blurb: "macOS Tahoe Control Center. Pill controls, deep frost, system blue."; /* ground */ --g-canvas: #151619; --g-mesh: radial-gradient(60% 55% at 20% 15%,rgba(95,115,165,.3),transparent 70%),radial-gradient(55% 50% at 85% 80%,rgba(120,105,160,.26),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.2)); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #202227; --g-solid-2: #24262c; --g-solid-3: #2c2e34; --g-solid-4: #35373c; --g-solid-sunken: #17181c; /* ink */ --g-text: #f4f5f8; --g-text-2: #aaafbe; --g-text-3: #9ba0ad; --g-text-4: #656973; --g-text-on-accent: #071322; --g-placeholder: #898d99; /* the needle */ --g-accent: #4aa4ff; --g-accent-strong: #2c95ff; --g-accent-fill: #0a84ff; --g-accent-press: #0a7df1; --g-accent-soft: rgba(0, 45, 91, 0.48); --g-accent-softer: rgba(0, 45, 91, 0.23); --g-accent-glow: rgba(10, 132, 255, 0.34); /* status */ --g-green: #5be08a; --g-green-bg: rgba(48,209,88,.18); --g-text-on-green: #081f10; --g-amber: #f5b45a; --g-amber-bg: rgba(255,159,10,.16); --g-text-on-amber: #1f1508; --g-blue: #83ace2; --g-blue-bg: rgba(131, 172, 226, 0.16); --g-violet: #b78fe5; --g-violet-bg: rgb(61, 46, 77); --g-red: #ff796d; --g-red-bg: rgba(100, 8, 0, 0.26); --g-text-on-red: #1f0908; --g-slate: #aaafbe; --g-slate-bg: rgb(61, 63, 70); /* the glass ladder */ --g-fill-1: rgba(50, 53, 62, 0.55); --g-fill-2: rgba(50, 53, 62, 0.5); --g-fill-3: rgba(50, 53, 62, 0.65); --g-fill-4: rgba(50, 53, 62, 0.81); --g-fill-nested: rgba(255,255,255,.1); --g-fill-sunken: rgba(0,0,0,.3); --g-fill-hover: rgba(255,255,255,.05); --g-fill-press: rgba(255,255,255,.07); --g-fill-sel: rgba(0, 45, 91, 0.54); /* blur (constant per rung, NEVER animated) */ --g-blur-1: blur(34px) saturate(190%); --g-blur-2: blur(30px) saturate(190%); --g-blur-3: blur(36px) saturate(200%); --g-blur-4: blur(45px) saturate(200%); --g-blur-scrim: blur(8px) saturate(115%); /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,0) 55%); --g-sheen-2: linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,0) 55%); --g-sheen-3: linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,0) 55%); --g-sheen-4: linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,0) 55%); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.16); --g-edge-2: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1.5px 0 rgba(255,255,255,.16); --g-edge-3: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 1.5px 0 rgba(255,255,255,.2); --g-edge-4: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 1.5px 0 rgba(255,255,255,.2); --g-hairline: rgba(255,255,255,.09); --g-hairline-strong: rgba(255,255,255,.09); /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 2px 6px rgba(0,0,0,.35), 0 24px 48px -20px rgba(0,0,0,.7); --g-shadow-2: 0 2px 6px rgba(0,0,0,.35), 0 24px 48px -20px rgba(0,0,0,.7); --g-shadow-3: 0 3px 9px rgba(0,0,0,.4), 0 32px 68px -20px rgba(0,0,0,.8); --g-shadow-4: 0 3px 9px rgba(0,0,0,.4), 0 32px 68px -20px rgba(0,0,0,.8); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 2px 6px rgba(0,0,0,.35), 0 24px 48px -20px rgba(0,0,0,.7); --g-e2: 0 2px 6px rgba(0,0,0,.35), 0 24px 48px -20px rgba(0,0,0,.7); --g-e3: 0 3px 9px rgba(0,0,0,.4), 0 32px 68px -20px rgba(0,0,0,.8); --g-e4: 0 3px 9px rgba(0,0,0,.4), 0 32px 68px -20px rgba(0,0,0,.8); --g-lift: 0 3px 9px rgba(0,0,0,.4), 0 32px 68px -20px rgba(0,0,0,.8); /* scrim */ --g-scrim: rgba(0, 0, 0, 0.58); --g-scrim-strong: rgba(0, 0, 0, 0.74); /* radii */ --g-r-xs: 999px; --g-r-sm: 999px; --g-r-md: 999px; --g-r-lg: 22px; --g-r-xl: 28px; --g-r-2xl: 35px; --g-r-ctl: 999px; --g-r-card: 22px; --g-r-chrome: 22px; --g-r-menu: 18px; --g-r-sheet: 28px; --g-r-modal: 28px; --g-r-inner: 14px; /* space + control sizing */ --g-pad-card: 20px; --g-pad-card-tight: 14px; --g-pad-sheet: 24px; --g-pad-page: 20px; --g-gap: 13px; --g-ctl-h: 42px; --g-ctl-h-sm: 33px; --g-ctl-h-lg: 51px; --g-row-h: 49px; /* focus */ --g-focus-color: rgba(74, 164, 255, 0.75); --g-focus-halo: rgba(74, 164, 255, 0.22); --g-focus-ring: 0 0 0 4px rgba(10,132,255,.3); /* feedback */ --g-skel: rgba(255, 255, 255, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(255, 255, 255, 0.20); --g-scroll-thumb-hover: rgba(255, 255, 255, 0.34); --g-grabber: rgba(235, 235, 245, 0.34); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 0px; --g-border-c: transparent; --g-btn-primary-shadow: inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px rgba(0,60,140,.3),0 8px 18px -6px rgba(10,132,255,.5); --g-btn-primary-shadow-hover: inset 0 1px 0 rgba(255,255,255,.35),0 2px 4px rgba(0,60,140,.25),0 11px 24px -6px rgba(10,132,255,.55); --g-btn-primary-shadow-press: inset 0 1px 3px rgba(0,40,100,.45); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } @media (prefers-color-scheme: dark) { html[data-ui-theme="tahoe"]:not([data-theme="light"]), [data-ui-theme="tahoe"]:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --g-theme-name: "Tahoe"; --g-theme-blurb: "macOS Tahoe Control Center. Pill controls, deep frost, system blue."; /* ground */ --g-canvas: #151619; --g-mesh: radial-gradient(60% 55% at 20% 15%,rgba(95,115,165,.3),transparent 70%),radial-gradient(55% 50% at 85% 80%,rgba(120,105,160,.26),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.2)); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #202227; --g-solid-2: #24262c; --g-solid-3: #2c2e34; --g-solid-4: #35373c; --g-solid-sunken: #17181c; /* ink */ --g-text: #f4f5f8; --g-text-2: #aaafbe; --g-text-3: #9ba0ad; --g-text-4: #656973; --g-text-on-accent: #071322; --g-placeholder: #898d99; /* the needle */ --g-accent: #4aa4ff; --g-accent-strong: #2c95ff; --g-accent-fill: #0a84ff; --g-accent-press: #0a7df1; --g-accent-soft: rgba(0, 45, 91, 0.48); --g-accent-softer: rgba(0, 45, 91, 0.23); --g-accent-glow: rgba(10, 132, 255, 0.34); /* status */ --g-green: #5be08a; --g-green-bg: rgba(48,209,88,.18); --g-text-on-green: #081f10; --g-amber: #f5b45a; --g-amber-bg: rgba(255,159,10,.16); --g-text-on-amber: #1f1508; --g-blue: #83ace2; --g-blue-bg: rgba(131, 172, 226, 0.16); --g-violet: #b78fe5; --g-violet-bg: rgb(61, 46, 77); --g-red: #ff796d; --g-red-bg: rgba(100, 8, 0, 0.26); --g-text-on-red: #1f0908; --g-slate: #aaafbe; --g-slate-bg: rgb(61, 63, 70); /* the glass ladder */ --g-fill-1: rgba(50, 53, 62, 0.55); --g-fill-2: rgba(50, 53, 62, 0.5); --g-fill-3: rgba(50, 53, 62, 0.65); --g-fill-4: rgba(50, 53, 62, 0.81); --g-fill-nested: rgba(255,255,255,.1); --g-fill-sunken: rgba(0,0,0,.3); --g-fill-hover: rgba(255,255,255,.05); --g-fill-press: rgba(255,255,255,.07); --g-fill-sel: rgba(0, 45, 91, 0.54); /* blur (constant per rung, NEVER animated) */ --g-blur-1: blur(34px) saturate(190%); --g-blur-2: blur(30px) saturate(190%); --g-blur-3: blur(36px) saturate(200%); --g-blur-4: blur(45px) saturate(200%); --g-blur-scrim: blur(8px) saturate(115%); /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,0) 55%); --g-sheen-2: linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,0) 55%); --g-sheen-3: linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,0) 55%); --g-sheen-4: linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,0) 55%); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.16); --g-edge-2: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1.5px 0 rgba(255,255,255,.16); --g-edge-3: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 1.5px 0 rgba(255,255,255,.2); --g-edge-4: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 1.5px 0 rgba(255,255,255,.2); --g-hairline: rgba(255,255,255,.09); --g-hairline-strong: rgba(255,255,255,.09); /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 2px 6px rgba(0,0,0,.35), 0 24px 48px -20px rgba(0,0,0,.7); --g-shadow-2: 0 2px 6px rgba(0,0,0,.35), 0 24px 48px -20px rgba(0,0,0,.7); --g-shadow-3: 0 3px 9px rgba(0,0,0,.4), 0 32px 68px -20px rgba(0,0,0,.8); --g-shadow-4: 0 3px 9px rgba(0,0,0,.4), 0 32px 68px -20px rgba(0,0,0,.8); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 2px 6px rgba(0,0,0,.35), 0 24px 48px -20px rgba(0,0,0,.7); --g-e2: 0 2px 6px rgba(0,0,0,.35), 0 24px 48px -20px rgba(0,0,0,.7); --g-e3: 0 3px 9px rgba(0,0,0,.4), 0 32px 68px -20px rgba(0,0,0,.8); --g-e4: 0 3px 9px rgba(0,0,0,.4), 0 32px 68px -20px rgba(0,0,0,.8); --g-lift: 0 3px 9px rgba(0,0,0,.4), 0 32px 68px -20px rgba(0,0,0,.8); /* scrim */ --g-scrim: rgba(0, 0, 0, 0.58); --g-scrim-strong: rgba(0, 0, 0, 0.74); /* radii */ --g-r-xs: 999px; --g-r-sm: 999px; --g-r-md: 999px; --g-r-lg: 22px; --g-r-xl: 28px; --g-r-2xl: 35px; --g-r-ctl: 999px; --g-r-card: 22px; --g-r-chrome: 22px; --g-r-menu: 18px; --g-r-sheet: 28px; --g-r-modal: 28px; --g-r-inner: 14px; /* space + control sizing */ --g-pad-card: 20px; --g-pad-card-tight: 14px; --g-pad-sheet: 24px; --g-pad-page: 20px; --g-gap: 13px; --g-ctl-h: 42px; --g-ctl-h-sm: 33px; --g-ctl-h-lg: 51px; --g-row-h: 49px; /* focus */ --g-focus-color: rgba(74, 164, 255, 0.75); --g-focus-halo: rgba(74, 164, 255, 0.22); --g-focus-ring: 0 0 0 4px rgba(10,132,255,.3); /* feedback */ --g-skel: rgba(255, 255, 255, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(255, 255, 255, 0.20); --g-scroll-thumb-hover: rgba(255, 255, 255, 0.34); --g-grabber: rgba(235, 235, 245, 0.34); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 0px; --g-border-c: transparent; --g-btn-primary-shadow: inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px rgba(0,60,140,.3),0 8px 18px -6px rgba(10,132,255,.5); --g-btn-primary-shadow-hover: inset 0 1px 0 rgba(255,255,255,.35),0 2px 4px rgba(0,60,140,.25),0 11px 24px -6px rgba(10,132,255,.55); --g-btn-primary-shadow-press: inset 0 1px 3px rgba(0,40,100,.45); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } } /* ============================================================================ 03 AURORA — A slow-moving colour field behind frosted panes. The showpiece. worst body-ink contrast — light 4.63:1 · dark 4.64:1 ============================================================================ */ :root[data-ui-theme="aurora"], [data-ui-theme="aurora"] { color-scheme: light; --g-theme-name: "Aurora"; --g-theme-blurb: "A slow-moving colour field behind frosted panes. The showpiece."; /* ground */ --g-canvas: #e9ecfb; --g-mesh: radial-gradient(38% 34% at 22% 28%,rgba(130,100,255,.40),transparent 70%),radial-gradient(34% 30% at 78% 22%,rgba(90,200,255,.38),transparent 70%),radial-gradient(36% 34% at 74% 78%,rgba(255,115,185,.36),transparent 70%),radial-gradient(30% 28% at 34% 76%,rgba(255,180,110,.30),transparent 70%),radial-gradient(26% 24% at 55% 45%,rgba(150,255,220,.26),transparent 70%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #eff1fc; --g-solid-2: #f2f4fd; /* R6-27b (v713, the R6-23b pattern): glass.css section 3 maps fill-3 to solid-3 in reduced-transparency / lite mode; #f6f8fd was dL* +1.3 off solid-2 — the a11y mode kept the invisible hover. Opaque composite of the new fill-3 over the canvas (dL* -3.0 vs solid-2, text-3 4.59:1). */ --g-solid-3: #e9ebf7; --g-solid-4: #fafbfe; --g-solid-sunken: #eaedfb; /* ink */ --g-text: #191632; --g-text-2: #4e4b70; --g-text-3: #696688; --g-text-4: #a6a6bd; --g-text-on-accent: #ffffff; --g-placeholder: #7d7b9a; /* the needle */ /* V732-A INK MOVE: was #6d51e0, scaled x0.91 (hue drift 0.210 deg, L* 44.97 to 41.07). The largest of the four because this theme's grounds ARE the accent hue — every ground from #e9ebf7 to #fafbfe is violet-tinted — so a same-hue plate has almost no chroma to trade on: at the old ink the best safe plate reached only dE76 2.3 against the grounds, i.e. an invisible selected state. Bare worst rung 4.532 to 5.231; the plate now holds dE76 10.9, unchanged from what ships today. */ --g-accent: #634acc; --g-accent-strong: #6b4fdb; --g-accent-fill: #7756ff; --g-accent-press: #6148c7; --g-accent-soft: rgba(225, 218, 254, 0.86); --g-accent-softer: rgba(225, 218, 254, 0.39); --g-accent-glow: rgba(124, 92, 255, 0.3); /* status */ --g-green: #0b6e4f; --g-green-bg: rgba(35,180,130,.14); --g-text-on-green: #edfaf6; --g-amber: #9c4e11; --g-amber-bg: rgba(240,130,60,.13); --g-text-on-amber: #faf3ed; --g-blue: #154584; --g-blue-bg: rgba(21, 69, 132, 0.14); --g-violet: #491584; --g-violet-bg: rgba(73, 21, 132, 0.14); --g-red: #a92b52; --g-red-bg: rgba(255, 219, 230, 0.76); --g-text-on-red: #faedf1; --g-slate: #4e4b70; --g-slate-bg: rgba(78, 75, 112, 0.14); /* the glass ladder */ --g-fill-1: rgba(255, 255, 255, 0.46); --g-fill-2: rgba(255, 255, 255, 0.4); /* R6-27 (v713): was rgba(255,255,255,.58) — dL* +1.2 off fill-2 over the #e9ecfb canvas, a near-invisible hover step (white over this lavender canvas caps low, so the step goes DARKER, the halo-light v712 direction). One step of frosted lavender-gray: dL* -2.9 vs fill-2 — the text-3 floor (#696688 must stay >=4.5 resting on menus/sheets) caps the step short of the ~4.5 family norm. Tiers over canvas: --g-text 14.73 / --g-text-2 6.90 / --g-text-3 4.59; nested over fill-2: 14.81 / 6.94 / 4.62 — every tier >=4.5. */ --g-fill-3: rgba(233, 235, 247, 0.92); --g-fill-4: rgba(255, 255, 255, 0.772); --g-fill-nested: rgba(255,255,255,.5); --g-fill-sunken: rgba(255,255,255,.45); --g-fill-hover: rgba(255,255,255,.3); --g-fill-press: rgba(255,255,255,.45); --g-fill-sel: rgba(225, 218, 254, 0.86); /* blur (constant per rung, NEVER animated) */ --g-blur-1: blur(29px) saturate(200%); --g-blur-2: blur(26px) saturate(200%); --g-blur-3: blur(34px) saturate(210%); --g-blur-4: blur(43px) saturate(210%); --g-blur-scrim: blur(8px) saturate(115%); /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(168deg,rgba(255,255,255,.5),rgba(255,255,255,.06) 45%,rgba(255,255,255,0) 70%); --g-sheen-2: linear-gradient(168deg,rgba(255,255,255,.5),rgba(255,255,255,.06) 45%,rgba(255,255,255,0) 70%); --g-sheen-3: linear-gradient(168deg,rgba(255,255,255,.5),rgba(255,255,255,.06) 45%,rgba(255,255,255,0) 70%); --g-sheen-4: linear-gradient(168deg,rgba(255,255,255,.5),rgba(255,255,255,.06) 45%,rgba(255,255,255,0) 70%); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: inset 0 0 0 1px rgba(255,255,255,.7), inset 0 1px 0 rgba(255,255,255,.9); --g-edge-2: inset 0 0 0 1px rgba(255,255,255,.6), inset 0 1.5px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(120,90,220,.08); --g-edge-3: inset 0 0 0 1px rgba(255,255,255,.7), inset 0 1.5px 0 rgba(255,255,255,.92); --g-edge-4: inset 0 0 0 1px rgba(255,255,255,.7), inset 0 1.5px 0 rgba(255,255,255,.92); --g-hairline: rgba(80,70,150,.1); --g-hairline-strong: rgba(80,70,150,.1); /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 1px 4px rgba(90,70,180,.12); --g-shadow-2: 0 2px 6px rgba(90,70,180,.08), 0 24px 52px -22px rgba(110,80,210,.45); --g-shadow-3: 0 3px 8px rgba(90,70,180,.1), 0 30px 64px -20px rgba(110,80,210,.5); --g-shadow-4: 0 3px 8px rgba(90,70,180,.1), 0 30px 64px -20px rgba(110,80,210,.5); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 1px 4px rgba(90,70,180,.12); --g-e2: 0 2px 6px rgba(90,70,180,.08), 0 24px 52px -22px rgba(110,80,210,.45); --g-e3: 0 3px 8px rgba(90,70,180,.1), 0 30px 64px -20px rgba(110,80,210,.5); --g-e4: 0 3px 8px rgba(90,70,180,.1), 0 30px 64px -20px rgba(110,80,210,.5); --g-lift: 0 3px 8px rgba(90,70,180,.1), 0 30px 64px -20px rgba(110,80,210,.5); /* scrim */ --g-scrim: rgba(42, 42, 45, 0.34); --g-scrim-strong: rgba(42, 42, 45, 0.5); /* radii */ --g-r-xs: 999px; --g-r-sm: 999px; --g-r-md: 999px; --g-r-lg: 26px; --g-r-xl: 33px; --g-r-2xl: 42px; --g-r-ctl: 999px; --g-r-card: 26px; --g-r-chrome: 26px; --g-r-menu: 20px; --g-r-sheet: 33px; --g-r-modal: 33px; --g-r-inner: 18px; /* space + control sizing */ --g-pad-card: 21px; --g-pad-card-tight: 15px; --g-pad-sheet: 25px; --g-pad-page: 21px; --g-gap: 15px; --g-ctl-h: 42px; --g-ctl-h-sm: 33px; --g-ctl-h-lg: 51px; --g-row-h: 49px; /* focus */ --g-focus-color: rgba(109, 81, 224, 0.65); --g-focus-halo: rgba(109, 81, 224, 0.18); --g-focus-ring: 0 0 0 4px rgba(140,100,255,.3); /* feedback */ --g-skel: rgba(25, 22, 50, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(25, 22, 50, 0.2); --g-scroll-thumb-hover: rgba(25, 22, 50, 0.34); --g-grabber: rgba(25, 22, 50, 0.32); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 0px; --g-border-c: transparent; --g-btn-primary-shadow: inset 0 1px 0 rgba(255,255,255,.4),0 2px 5px rgba(110,70,220,.3),0 10px 24px -8px rgba(190,80,190,.55); --g-btn-primary-shadow-hover: inset 0 1px 0 rgba(255,255,255,.4),0 3px 7px rgba(110,70,220,.28),0 14px 30px -8px rgba(190,80,190,.6); --g-btn-primary-shadow-press: inset 0 1px 3px rgba(70,30,140,.45); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } html[data-ui-theme="aurora"][data-theme="dark"], [data-ui-theme="aurora"][data-theme="dark"] { color-scheme: dark; --g-theme-name: "Aurora"; --g-theme-blurb: "A slow-moving colour field behind frosted panes. The showpiece."; /* ground */ --g-canvas: #0a0918; --g-mesh: radial-gradient(38% 34% at 22% 28%,rgba(120,85,255,.50),transparent 70%),radial-gradient(34% 30% at 78% 22%,rgba(50,190,255,.42),transparent 70%),radial-gradient(36% 34% at 74% 78%,rgba(255,90,175,.40),transparent 70%),radial-gradient(30% 28% at 34% 76%,rgba(90,255,190,.24),transparent 70%),radial-gradient(26% 24% at 55% 45%,rgba(255,150,90,.20),transparent 70%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #100e23; --g-solid-2: #121027; --g-solid-3: #1b1a30; --g-solid-4: #252338; --g-solid-sunken: #0c0a19; /* ink */ --g-text: #f2f0fc; --g-text-2: #aba7cc; --g-text-3: #8d8aaf; --g-text-4: #565372; --g-text-on-accent: #140a2e; --g-placeholder: #7b789b; /* the needle */ --g-accent: #9176ff; --g-accent-strong: #8e73ff; --g-accent-fill: #8162ff; --g-accent-press: #816dd2; --g-accent-soft: rgba(19, 0, 96, 0.3); --g-accent-softer: rgba(19, 0, 96, 0.14); --g-accent-glow: rgba(124, 92, 255, 0.34); /* status */ --g-green: #5fe8bb; --g-green-bg: rgba(60,220,170,.15); --g-text-on-green: #081f17; --g-amber: #ffb683; --g-amber-bg: rgba(255,160,90,.14); --g-text-on-amber: #1f1108; --g-blue: #83ace2; --g-blue-bg: rgba(131, 172, 226, 0.16); --g-violet: #af83e2; --g-violet-bg: rgb(52, 38, 68); --g-red: #ff7ba3; --g-red-bg: rgba(255, 123, 163, 0.16); --g-text-on-red: #1f080f; --g-slate: #aba7cc; --g-slate-bg: rgba(171, 167, 204, 0.16); /* the glass ladder */ --g-fill-1: rgba(28, 25, 58, 0.496); --g-fill-2: rgba(28, 25, 58, 0.44); --g-fill-3: rgba(28, 25, 58, 0.608); --g-fill-4: rgba(28, 25, 58, 0.787); --g-fill-nested: rgba(255,255,255,.09); --g-fill-sunken: rgba(0,0,0,.3); --g-fill-hover: rgba(255,255,255,.05); --g-fill-press: rgba(255,255,255,.07); --g-fill-sel: rgba(19, 0, 96, 0.34); /* blur (constant per rung, NEVER animated) */ --g-blur-1: blur(29px) saturate(200%); --g-blur-2: blur(26px) saturate(200%); --g-blur-3: blur(34px) saturate(210%); --g-blur-4: blur(43px) saturate(210%); --g-blur-scrim: blur(8px) saturate(115%); /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(168deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 45%,rgba(255,255,255,0) 70%); --g-sheen-2: linear-gradient(168deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 45%,rgba(255,255,255,0) 70%); --g-sheen-3: linear-gradient(168deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 45%,rgba(255,255,255,0) 70%); --g-sheen-4: linear-gradient(168deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 45%,rgba(255,255,255,0) 70%); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.2); --g-edge-2: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1.5px 0 rgba(255,255,255,.22); --g-edge-3: inset 0 0 0 1px rgba(255,255,255,.15), inset 0 1.5px 0 rgba(255,255,255,.24); --g-edge-4: inset 0 0 0 1px rgba(255,255,255,.15), inset 0 1.5px 0 rgba(255,255,255,.24); --g-hairline: rgba(255,255,255,.1); --g-hairline-strong: rgba(255,255,255,.1); /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 2px 6px rgba(0,0,0,.35), 0 26px 56px -22px rgba(0,0,0,.7); --g-shadow-2: 0 2px 6px rgba(0,0,0,.35), 0 26px 56px -22px rgba(0,0,0,.7); --g-shadow-3: 0 3px 9px rgba(0,0,0,.4), 0 32px 68px -20px rgba(0,0,0,.8); --g-shadow-4: 0 3px 9px rgba(0,0,0,.4), 0 32px 68px -20px rgba(0,0,0,.8); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 2px 6px rgba(0,0,0,.35), 0 26px 56px -22px rgba(0,0,0,.7); --g-e2: 0 2px 6px rgba(0,0,0,.35), 0 26px 56px -22px rgba(0,0,0,.7); --g-e3: 0 3px 9px rgba(0,0,0,.4), 0 32px 68px -20px rgba(0,0,0,.8); --g-e4: 0 3px 9px rgba(0,0,0,.4), 0 32px 68px -20px rgba(0,0,0,.8); --g-lift: 0 3px 9px rgba(0,0,0,.4), 0 32px 68px -20px rgba(0,0,0,.8); /* scrim */ --g-scrim: rgba(0, 0, 0, 0.58); --g-scrim-strong: rgba(0, 0, 0, 0.74); /* radii */ --g-r-xs: 999px; --g-r-sm: 999px; --g-r-md: 999px; --g-r-lg: 26px; --g-r-xl: 33px; --g-r-2xl: 42px; --g-r-ctl: 999px; --g-r-card: 26px; --g-r-chrome: 26px; --g-r-menu: 20px; --g-r-sheet: 33px; --g-r-modal: 33px; --g-r-inner: 18px; /* space + control sizing */ --g-pad-card: 21px; --g-pad-card-tight: 15px; --g-pad-sheet: 25px; --g-pad-page: 21px; --g-gap: 15px; --g-ctl-h: 42px; --g-ctl-h-sm: 33px; --g-ctl-h-lg: 51px; --g-row-h: 49px; /* focus */ --g-focus-color: rgba(145, 118, 255, 0.75); --g-focus-halo: rgba(145, 118, 255, 0.22); --g-focus-ring: 0 0 0 4px rgba(140,100,255,.3); /* feedback */ --g-skel: rgba(255, 255, 255, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(255, 255, 255, 0.20); --g-scroll-thumb-hover: rgba(255, 255, 255, 0.34); --g-grabber: rgba(235, 235, 245, 0.34); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 0px; --g-border-c: transparent; --g-btn-primary-shadow: inset 0 1px 0 rgba(255,255,255,.4),0 2px 5px rgba(110,70,220,.3),0 10px 24px -8px rgba(190,80,190,.55); --g-btn-primary-shadow-hover: inset 0 1px 0 rgba(255,255,255,.4),0 3px 7px rgba(110,70,220,.28),0 14px 30px -8px rgba(190,80,190,.6); --g-btn-primary-shadow-press: inset 0 1px 3px rgba(70,30,140,.45); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } @media (prefers-color-scheme: dark) { html[data-ui-theme="aurora"]:not([data-theme="light"]), [data-ui-theme="aurora"]:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --g-theme-name: "Aurora"; --g-theme-blurb: "A slow-moving colour field behind frosted panes. The showpiece."; /* ground */ --g-canvas: #0a0918; --g-mesh: radial-gradient(38% 34% at 22% 28%,rgba(120,85,255,.50),transparent 70%),radial-gradient(34% 30% at 78% 22%,rgba(50,190,255,.42),transparent 70%),radial-gradient(36% 34% at 74% 78%,rgba(255,90,175,.40),transparent 70%),radial-gradient(30% 28% at 34% 76%,rgba(90,255,190,.24),transparent 70%),radial-gradient(26% 24% at 55% 45%,rgba(255,150,90,.20),transparent 70%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #100e23; --g-solid-2: #121027; --g-solid-3: #1b1a30; --g-solid-4: #252338; --g-solid-sunken: #0c0a19; /* ink */ --g-text: #f2f0fc; --g-text-2: #aba7cc; --g-text-3: #8d8aaf; --g-text-4: #565372; --g-text-on-accent: #140a2e; --g-placeholder: #7b789b; /* the needle */ --g-accent: #9176ff; --g-accent-strong: #8e73ff; --g-accent-fill: #8162ff; --g-accent-press: #816dd2; --g-accent-soft: rgba(19, 0, 96, 0.3); --g-accent-softer: rgba(19, 0, 96, 0.14); --g-accent-glow: rgba(124, 92, 255, 0.34); /* status */ --g-green: #5fe8bb; --g-green-bg: rgba(60,220,170,.15); --g-text-on-green: #081f17; --g-amber: #ffb683; --g-amber-bg: rgba(255,160,90,.14); --g-text-on-amber: #1f1108; --g-blue: #83ace2; --g-blue-bg: rgba(131, 172, 226, 0.16); --g-violet: #af83e2; --g-violet-bg: rgb(52, 38, 68); --g-red: #ff7ba3; --g-red-bg: rgba(255, 123, 163, 0.16); --g-text-on-red: #1f080f; --g-slate: #aba7cc; --g-slate-bg: rgba(171, 167, 204, 0.16); /* the glass ladder */ --g-fill-1: rgba(28, 25, 58, 0.496); --g-fill-2: rgba(28, 25, 58, 0.44); --g-fill-3: rgba(28, 25, 58, 0.608); --g-fill-4: rgba(28, 25, 58, 0.787); --g-fill-nested: rgba(255,255,255,.09); --g-fill-sunken: rgba(0,0,0,.3); --g-fill-hover: rgba(255,255,255,.05); --g-fill-press: rgba(255,255,255,.07); --g-fill-sel: rgba(19, 0, 96, 0.34); /* blur (constant per rung, NEVER animated) */ --g-blur-1: blur(29px) saturate(200%); --g-blur-2: blur(26px) saturate(200%); --g-blur-3: blur(34px) saturate(210%); --g-blur-4: blur(43px) saturate(210%); --g-blur-scrim: blur(8px) saturate(115%); /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(168deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 45%,rgba(255,255,255,0) 70%); --g-sheen-2: linear-gradient(168deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 45%,rgba(255,255,255,0) 70%); --g-sheen-3: linear-gradient(168deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 45%,rgba(255,255,255,0) 70%); --g-sheen-4: linear-gradient(168deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 45%,rgba(255,255,255,0) 70%); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.2); --g-edge-2: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1.5px 0 rgba(255,255,255,.22); --g-edge-3: inset 0 0 0 1px rgba(255,255,255,.15), inset 0 1.5px 0 rgba(255,255,255,.24); --g-edge-4: inset 0 0 0 1px rgba(255,255,255,.15), inset 0 1.5px 0 rgba(255,255,255,.24); --g-hairline: rgba(255,255,255,.1); --g-hairline-strong: rgba(255,255,255,.1); /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 2px 6px rgba(0,0,0,.35), 0 26px 56px -22px rgba(0,0,0,.7); --g-shadow-2: 0 2px 6px rgba(0,0,0,.35), 0 26px 56px -22px rgba(0,0,0,.7); --g-shadow-3: 0 3px 9px rgba(0,0,0,.4), 0 32px 68px -20px rgba(0,0,0,.8); --g-shadow-4: 0 3px 9px rgba(0,0,0,.4), 0 32px 68px -20px rgba(0,0,0,.8); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 2px 6px rgba(0,0,0,.35), 0 26px 56px -22px rgba(0,0,0,.7); --g-e2: 0 2px 6px rgba(0,0,0,.35), 0 26px 56px -22px rgba(0,0,0,.7); --g-e3: 0 3px 9px rgba(0,0,0,.4), 0 32px 68px -20px rgba(0,0,0,.8); --g-e4: 0 3px 9px rgba(0,0,0,.4), 0 32px 68px -20px rgba(0,0,0,.8); --g-lift: 0 3px 9px rgba(0,0,0,.4), 0 32px 68px -20px rgba(0,0,0,.8); /* scrim */ --g-scrim: rgba(0, 0, 0, 0.58); --g-scrim-strong: rgba(0, 0, 0, 0.74); /* radii */ --g-r-xs: 999px; --g-r-sm: 999px; --g-r-md: 999px; --g-r-lg: 26px; --g-r-xl: 33px; --g-r-2xl: 42px; --g-r-ctl: 999px; --g-r-card: 26px; --g-r-chrome: 26px; --g-r-menu: 20px; --g-r-sheet: 33px; --g-r-modal: 33px; --g-r-inner: 18px; /* space + control sizing */ --g-pad-card: 21px; --g-pad-card-tight: 15px; --g-pad-sheet: 25px; --g-pad-page: 21px; --g-gap: 15px; --g-ctl-h: 42px; --g-ctl-h-sm: 33px; --g-ctl-h-lg: 51px; --g-row-h: 49px; /* focus */ --g-focus-color: rgba(145, 118, 255, 0.75); --g-focus-halo: rgba(145, 118, 255, 0.22); --g-focus-ring: 0 0 0 4px rgba(140,100,255,.3); /* feedback */ --g-skel: rgba(255, 255, 255, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(255, 255, 255, 0.20); --g-scroll-thumb-hover: rgba(255, 255, 255, 0.34); --g-grabber: rgba(235, 235, 245, 0.34); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 0px; --g-border-c: transparent; --g-btn-primary-shadow: inset 0 1px 0 rgba(255,255,255,.4),0 2px 5px rgba(110,70,220,.3),0 10px 24px -8px rgba(190,80,190,.55); --g-btn-primary-shadow-hover: inset 0 1px 0 rgba(255,255,255,.4),0 3px 7px rgba(110,70,220,.28),0 14px 30px -8px rgba(190,80,190,.6); --g-btn-primary-shadow-press: inset 0 1px 3px rgba(70,30,140,.45); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } } /* ============================================================================ 04 HALO — Warm paper white, near-black actions, an iridescent rim on every pane. worst body-ink contrast — light 4.59:1 · dark 4.58:1 ============================================================================ */ :root[data-ui-theme="halo"], [data-ui-theme="halo"] { color-scheme: light; --g-theme-name: "Halo"; --g-theme-blurb: "Warm paper white, near-black actions, an iridescent rim on every pane."; /* ground */ --g-canvas: #f3f2f0; --g-mesh: radial-gradient(40% 34% at 10% 10%,rgba(120,160,255,.09),transparent 70%),radial-gradient(36% 30% at 92% 20%,rgba(255,140,200,.08),transparent 70%),radial-gradient(42% 36% at 80% 95%,rgba(110,230,190,.09),transparent 70%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #f9f9f8; --g-solid-2: #fcfcfc; /* R6-23b: glass.css §3 maps fill-3 → solid-3 in reduced-transparency / lite mode; #fdfdfd was ΔL* +0.3 off solid-2 — the a11y mode kept the invisible hover. Opaque composite of the new fill-3 over the canvas (ΔL* −4.1). */ --g-solid-3: #eff0f3; --g-solid-4: #fefefe; --g-solid-sunken: #f4f4f2; /* ink */ --g-text: #1a1c24; --g-text-2: #545766; --g-text-3: #6b6d7a; --g-text-4: #acaeb4; --g-text-on-accent: #ffffff; --g-placeholder: #80838e; /* the needle */ --g-accent: #14161f; --g-accent-strong: #11131b; --g-accent-fill: #14161f; --g-accent-press: #101118; --g-accent-soft: rgba(20, 22, 31, 0.12); --g-accent-softer: rgba(20, 22, 31, 0.055); --g-accent-glow: rgba(20, 22, 31, 0.3); /* status */ --g-green: #0d7656; --g-green-bg: rgba(70,200,160,.13); --g-text-on-green: #edfaf6; --g-amber: #a34e1b; --g-amber-bg: rgba(255,150,110,.13); --g-text-on-amber: #faf2ed; --g-blue: #154584; --g-blue-bg: rgba(21, 69, 132, 0.14); --g-violet: #491584; --g-violet-bg: rgba(73, 21, 132, 0.14); --g-red: #ac334b; --g-red-bg: rgba(254, 218, 225, 0.72); --g-text-on-red: #fbf1f3; --g-slate: #545766; --g-slate-bg: rgba(84, 87, 102, 0.14); /* the glass ladder */ --g-fill-1: rgba(255, 255, 255, 0.802); --g-fill-2: rgba(255, 255, 255, 0.78); /* R6-23 (same class as Ink/Ledger light, R6-18 v711): was rgba(255,255,255,.846) — ΔL* +0.3 off fill-2 over the #f3f2f0 canvas, an invisible hover ramp (white-on-near-white caps at +1.1 even fully opaque, so the step must go DARKER, the ledger/ink-light direction). One step of cool frosted gray: ΔL* −4.1 vs fill-2 (family norm ~4.5). Menus/sheets rest on fill-3 (glass.css §12): --g-text 15.0:1 · --g-text-2 6.3:1 · --g-text-3 4.52:1 over canvas, 4.56:1 nested over fill-2 — every tier ≥4.5. */ --g-fill-3: rgba(240, 240, 243, 0.9); --g-fill-4: rgba(255, 255, 255, 0.916); --g-fill-nested: rgba(255,255,255,.85); --g-fill-sunken: rgba(255,255,255,.9); --g-fill-hover: rgba(120,160,255,.06); --g-fill-press: rgba(120,160,255,.09); --g-fill-sel: rgba(20, 22, 31, 0.12); /* blur (constant per rung, NEVER animated) */ --g-blur-1: blur(16px) saturate(150%); --g-blur-2: blur(14px) saturate(150%); --g-blur-3: blur(22px) saturate(170%); --g-blur-4: blur(28px) saturate(170%); --g-blur-scrim: blur(8px) saturate(115%); /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(100deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.55) 36%,rgba(255,255,255,0) 52%); --g-sheen-2: linear-gradient(100deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.55) 36%,rgba(255,255,255,0) 52%); --g-sheen-3: linear-gradient(100deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.55) 36%,rgba(255,255,255,0) 52%); --g-sheen-4: linear-gradient(100deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.55) 36%,rgba(255,255,255,0) 52%); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: inset 1px 0 0 rgba(120,160,255,.35), inset -1px 0 0 rgba(255,130,195,.32), inset 0 1px 0 rgba(255,255,255,.98), inset 0 0 0 1px rgba(30,38,66,.06); --g-edge-2: inset 2px 0 0 rgba(110,155,255,.62), inset -2px 0 0 rgba(255,120,190,.55), inset 0 -2px 0 rgba(70,215,175,.6), inset 0 2px 0 rgba(255,255,255,.98), inset 0 0 0 1px rgba(30,38,66,.05); --g-edge-3: inset 1.5px 0 0 rgba(120,160,255,.55), inset -1.5px 0 0 rgba(255,130,195,.5), inset 0 -1.5px 0 rgba(90,220,180,.55), inset 0 1.5px 0 rgba(255,255,255,.98), inset 0 0 0 1px rgba(30,38,66,.05); --g-edge-4: inset 1.5px 0 0 rgba(120,160,255,.55), inset -1.5px 0 0 rgba(255,130,195,.5), inset 0 -1.5px 0 rgba(90,220,180,.55), inset 0 1.5px 0 rgba(255,255,255,.98), inset 0 0 0 1px rgba(30,38,66,.05); --g-hairline: rgba(30,38,66,.08); --g-hairline-strong: rgba(30,38,66,.08); /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 1px 3px rgba(30,38,66,.07); --g-shadow-2: 0 2px 5px rgba(30,38,66,.05), 0 18px 40px -20px rgba(80,90,140,.35); --g-shadow-3: 0 3px 8px rgba(30,38,66,.07), 0 28px 60px -20px rgba(80,90,140,.45); --g-shadow-4: 0 3px 8px rgba(30,38,66,.07), 0 28px 60px -20px rgba(80,90,140,.45); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 1px 3px rgba(30,38,66,.07); --g-e2: 0 2px 5px rgba(30,38,66,.05), 0 18px 40px -20px rgba(80,90,140,.35); --g-e3: 0 3px 8px rgba(30,38,66,.07), 0 28px 60px -20px rgba(80,90,140,.45); --g-e4: 0 3px 8px rgba(30,38,66,.07), 0 28px 60px -20px rgba(80,90,140,.45); --g-lift: 0 3px 8px rgba(30,38,66,.07), 0 28px 60px -20px rgba(80,90,140,.45); /* scrim */ --g-scrim: rgba(44, 44, 43, 0.34); --g-scrim-strong: rgba(44, 44, 43, 0.5); /* radii */ --g-r-xs: 999px; --g-r-sm: 999px; --g-r-md: 999px; --g-r-lg: 20px; --g-r-xl: 25px; --g-r-2xl: 32px; --g-r-ctl: 999px; --g-r-card: 20px; --g-r-chrome: 20px; --g-r-menu: 16px; --g-r-sheet: 25px; --g-r-modal: 25px; --g-r-inner: 13px; /* space + control sizing */ --g-pad-card: 20px; --g-pad-card-tight: 14px; --g-pad-sheet: 24px; --g-pad-page: 20px; --g-gap: 14px; --g-ctl-h: 38px; --g-ctl-h-sm: 30px; --g-ctl-h-lg: 46px; --g-row-h: 44px; /* focus */ --g-focus-color: rgba(20, 22, 31, 0.65); --g-focus-halo: rgba(20, 22, 31, 0.18); --g-focus-ring: 0 0 0 1.5px rgba(120,160,255,.8),0 0 0 4.5px rgba(255,130,195,.3); /* feedback */ --g-skel: rgba(26, 28, 36, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(26, 28, 36, 0.2); --g-scroll-thumb-hover: rgba(26, 28, 36, 0.34); --g-grabber: rgba(26, 28, 36, 0.32); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 0px; --g-border-c: transparent; --g-btn-primary-shadow: inset 1px 0 0 rgba(120,160,255,.55),inset -1px 0 0 rgba(255,130,195,.5),inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(20,22,31,.3),0 8px 20px -8px rgba(20,22,31,.5); --g-btn-primary-shadow-hover: inset 1px 0 0 rgba(120,160,255,.7),inset -1px 0 0 rgba(255,130,195,.65),inset 0 1px 0 rgba(255,255,255,.3),0 2px 4px rgba(20,22,31,.25),0 12px 26px -8px rgba(20,22,31,.55); --g-btn-primary-shadow-press: inset 0 1px 3px rgba(0,0,0,.5); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } html[data-ui-theme="halo"][data-theme="dark"], [data-ui-theme="halo"][data-theme="dark"] { color-scheme: dark; --g-theme-name: "Halo"; --g-theme-blurb: "Warm paper white, near-black actions, an iridescent rim on every pane."; /* ground */ --g-canvas: #0f1015; --g-mesh: radial-gradient(40% 34% at 10% 10%,rgba(120,160,255,.13),transparent 70%),radial-gradient(36% 30% at 92% 20%,rgba(255,140,200,.11),transparent 70%),radial-gradient(42% 36% at 80% 95%,rgba(110,230,190,.1),transparent 70%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #16181f; --g-solid-2: #191b23; --g-solid-3: #22242c; --g-solid-4: #2b2d34; --g-solid-sunken: #101117; /* ink */ --g-text: #f2f3f7; --g-text-2: #a5a8b8; --g-text-3: #9294a4; --g-text-4: #5b5d6a; --g-text-on-accent: #14161f; --g-placeholder: #808290; /* the needle */ --g-accent: #f4f5f9; --g-accent-strong: #f6f6fa; --g-accent-fill: #f4f5f9; --g-accent-press: #bebfc2; --g-accent-soft: rgba(244, 245, 249, 0.16); --g-accent-softer: rgba(244, 245, 249, 0.075); --g-accent-glow: rgba(244, 245, 249, 0.34); /* status */ --g-green: #63e5bc; --g-green-bg: rgba(70,220,175,.14); --g-text-on-green: #081f17; --g-amber: #ffae85; --g-amber-bg: rgba(255,160,120,.13); --g-text-on-amber: #1f0f08; --g-blue: #83ace2; --g-blue-bg: rgba(131, 172, 226, 0.16); --g-violet: #af83e2; --g-violet-bg: rgb(52, 38, 68); --g-red: #ff8098; --g-red-bg: rgba(111, 0, 21, 0.23); --g-text-on-red: #1f080c; --g-slate: #a5a8b8; --g-slate-bg: rgb(57, 58, 63); /* the glass ladder */ --g-fill-1: rgba(30, 32, 42, 0.694); --g-fill-2: rgba(30, 32, 42, 0.66); /* R6-27 (v713): was rgba(30,32,42,.762) — dL* +0.8 off fill-2 over the #0f1015 canvas, a near-invisible hover step. Lift the base a step and firm the alpha: dL* +4.2 vs fill-2 (family norm ~4.4, ink/ledger dark). Menus/sheets rest on fill-3 — tiers over canvas: --g-text 14.11 / --g-text-2 6.63 / --g-text-3 5.21; nested over fill-2: 13.66 / 6.42 / 5.05 — every tier >=4.5. Solid twin untouched: the #191b23 to #22242c solid ramp is already dL* +4.4. */ --g-fill-3: rgba(38, 41, 53, 0.76); --g-fill-4: rgba(30, 32, 42, 0.871); --g-fill-nested: rgba(255,255,255,.07); --g-fill-sunken: rgba(0,0,0,.32); --g-fill-hover: rgba(130,168,255,.08); --g-fill-press: rgba(130,168,255,.11); --g-fill-sel: rgba(244, 245, 249, 0.18); /* blur (constant per rung, NEVER animated) */ --g-blur-1: blur(16px) saturate(150%); --g-blur-2: blur(14px) saturate(150%); --g-blur-3: blur(22px) saturate(170%); --g-blur-4: blur(28px) saturate(170%); --g-blur-scrim: blur(8px) saturate(115%); /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(100deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.1) 36%,rgba(255,255,255,0) 52%); --g-sheen-2: linear-gradient(100deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.1) 36%,rgba(255,255,255,0) 52%); --g-sheen-3: linear-gradient(100deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.1) 36%,rgba(255,255,255,0) 52%); --g-sheen-4: linear-gradient(100deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.1) 36%,rgba(255,255,255,0) 52%); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: inset 1px 0 0 rgba(130,168,255,.4), inset -1px 0 0 rgba(255,140,205,.36), inset 0 1px 0 rgba(255,255,255,.2); --g-edge-2: inset 1.5px 0 0 rgba(130,168,255,.6), inset -1.5px 0 0 rgba(255,140,205,.55), inset 0 -1.5px 0 rgba(95,230,190,.6), inset 0 1.5px 0 rgba(255,255,255,.3); --g-edge-3: inset 1.5px 0 0 rgba(130,168,255,.65), inset -1.5px 0 0 rgba(255,140,205,.6), inset 0 -1.5px 0 rgba(95,230,190,.65), inset 0 1.5px 0 rgba(255,255,255,.32); --g-edge-4: inset 1.5px 0 0 rgba(130,168,255,.65), inset -1.5px 0 0 rgba(255,140,205,.6), inset 0 -1.5px 0 rgba(95,230,190,.65), inset 0 1.5px 0 rgba(255,255,255,.32); --g-hairline: rgba(255,255,255,.09); --g-hairline-strong: rgba(255,255,255,.09); /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 2px 6px rgba(0,0,0,.35), 0 20px 44px -20px rgba(0,0,0,.7); --g-shadow-2: 0 2px 6px rgba(0,0,0,.35), 0 20px 44px -20px rgba(0,0,0,.7); --g-shadow-3: 0 3px 9px rgba(0,0,0,.4), 0 30px 64px -20px rgba(0,0,0,.8); --g-shadow-4: 0 3px 9px rgba(0,0,0,.4), 0 30px 64px -20px rgba(0,0,0,.8); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 2px 6px rgba(0,0,0,.35), 0 20px 44px -20px rgba(0,0,0,.7); --g-e2: 0 2px 6px rgba(0,0,0,.35), 0 20px 44px -20px rgba(0,0,0,.7); --g-e3: 0 3px 9px rgba(0,0,0,.4), 0 30px 64px -20px rgba(0,0,0,.8); --g-e4: 0 3px 9px rgba(0,0,0,.4), 0 30px 64px -20px rgba(0,0,0,.8); --g-lift: 0 3px 9px rgba(0,0,0,.4), 0 30px 64px -20px rgba(0,0,0,.8); /* scrim */ --g-scrim: rgba(0, 0, 0, 0.58); --g-scrim-strong: rgba(0, 0, 0, 0.74); /* radii */ --g-r-xs: 999px; --g-r-sm: 999px; --g-r-md: 999px; --g-r-lg: 20px; --g-r-xl: 25px; --g-r-2xl: 32px; --g-r-ctl: 999px; --g-r-card: 20px; --g-r-chrome: 20px; --g-r-menu: 16px; --g-r-sheet: 25px; --g-r-modal: 25px; --g-r-inner: 13px; /* space + control sizing */ --g-pad-card: 20px; --g-pad-card-tight: 14px; --g-pad-sheet: 24px; --g-pad-page: 20px; --g-gap: 14px; --g-ctl-h: 38px; --g-ctl-h-sm: 30px; --g-ctl-h-lg: 46px; --g-row-h: 44px; /* focus */ --g-focus-color: rgba(244, 245, 249, 0.75); --g-focus-halo: rgba(244, 245, 249, 0.22); --g-focus-ring: 0 0 0 1.5px rgba(120,160,255,.8),0 0 0 4.5px rgba(255,130,195,.3); /* feedback */ --g-skel: rgba(255, 255, 255, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(255, 255, 255, 0.20); --g-scroll-thumb-hover: rgba(255, 255, 255, 0.34); --g-grabber: rgba(235, 235, 245, 0.34); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 0px; --g-border-c: transparent; --g-btn-primary-shadow: inset 1px 0 0 rgba(120,160,255,.6),inset -1px 0 0 rgba(255,130,195,.55),0 1px 2px rgba(0,0,0,.4),0 8px 20px -8px rgba(255,255,255,.15); --g-btn-primary-shadow-hover: inset 1px 0 0 rgba(120,160,255,.8),inset -1px 0 0 rgba(255,130,195,.7),0 2px 4px rgba(0,0,0,.35),0 12px 26px -8px rgba(255,255,255,.2); --g-btn-primary-shadow-press: inset 0 1px 3px rgba(0,0,0,.25); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } @media (prefers-color-scheme: dark) { html[data-ui-theme="halo"]:not([data-theme="light"]), [data-ui-theme="halo"]:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --g-theme-name: "Halo"; --g-theme-blurb: "Warm paper white, near-black actions, an iridescent rim on every pane."; /* ground */ --g-canvas: #0f1015; --g-mesh: radial-gradient(40% 34% at 10% 10%,rgba(120,160,255,.13),transparent 70%),radial-gradient(36% 30% at 92% 20%,rgba(255,140,200,.11),transparent 70%),radial-gradient(42% 36% at 80% 95%,rgba(110,230,190,.1),transparent 70%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #16181f; --g-solid-2: #191b23; --g-solid-3: #22242c; --g-solid-4: #2b2d34; --g-solid-sunken: #101117; /* ink */ --g-text: #f2f3f7; --g-text-2: #a5a8b8; --g-text-3: #9294a4; --g-text-4: #5b5d6a; --g-text-on-accent: #14161f; --g-placeholder: #808290; /* the needle */ --g-accent: #f4f5f9; --g-accent-strong: #f6f6fa; --g-accent-fill: #f4f5f9; --g-accent-press: #bebfc2; --g-accent-soft: rgba(244, 245, 249, 0.16); --g-accent-softer: rgba(244, 245, 249, 0.075); --g-accent-glow: rgba(244, 245, 249, 0.34); /* status */ --g-green: #63e5bc; --g-green-bg: rgba(70,220,175,.14); --g-text-on-green: #081f17; --g-amber: #ffae85; --g-amber-bg: rgba(255,160,120,.13); --g-text-on-amber: #1f0f08; --g-blue: #83ace2; --g-blue-bg: rgba(131, 172, 226, 0.16); --g-violet: #af83e2; --g-violet-bg: rgb(52, 38, 68); --g-red: #ff8098; --g-red-bg: rgba(111, 0, 21, 0.23); --g-text-on-red: #1f080c; --g-slate: #a5a8b8; --g-slate-bg: rgb(57, 58, 63); /* the glass ladder */ --g-fill-1: rgba(30, 32, 42, 0.694); --g-fill-2: rgba(30, 32, 42, 0.66); /* R6-27 (v713): was rgba(30,32,42,.762) — dL* +0.8 off fill-2 over the #0f1015 canvas, a near-invisible hover step. Lift the base a step and firm the alpha: dL* +4.2 vs fill-2 (family norm ~4.4, ink/ledger dark). Menus/sheets rest on fill-3 — tiers over canvas: --g-text 14.11 / --g-text-2 6.63 / --g-text-3 5.21; nested over fill-2: 13.66 / 6.42 / 5.05 — every tier >=4.5. Solid twin untouched: the #191b23 to #22242c solid ramp is already dL* +4.4. */ --g-fill-3: rgba(38, 41, 53, 0.76); --g-fill-4: rgba(30, 32, 42, 0.871); --g-fill-nested: rgba(255,255,255,.07); --g-fill-sunken: rgba(0,0,0,.32); --g-fill-hover: rgba(130,168,255,.08); --g-fill-press: rgba(130,168,255,.11); --g-fill-sel: rgba(244, 245, 249, 0.18); /* blur (constant per rung, NEVER animated) */ --g-blur-1: blur(16px) saturate(150%); --g-blur-2: blur(14px) saturate(150%); --g-blur-3: blur(22px) saturate(170%); --g-blur-4: blur(28px) saturate(170%); --g-blur-scrim: blur(8px) saturate(115%); /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(100deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.1) 36%,rgba(255,255,255,0) 52%); --g-sheen-2: linear-gradient(100deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.1) 36%,rgba(255,255,255,0) 52%); --g-sheen-3: linear-gradient(100deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.1) 36%,rgba(255,255,255,0) 52%); --g-sheen-4: linear-gradient(100deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.1) 36%,rgba(255,255,255,0) 52%); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: inset 1px 0 0 rgba(130,168,255,.4), inset -1px 0 0 rgba(255,140,205,.36), inset 0 1px 0 rgba(255,255,255,.2); --g-edge-2: inset 1.5px 0 0 rgba(130,168,255,.6), inset -1.5px 0 0 rgba(255,140,205,.55), inset 0 -1.5px 0 rgba(95,230,190,.6), inset 0 1.5px 0 rgba(255,255,255,.3); --g-edge-3: inset 1.5px 0 0 rgba(130,168,255,.65), inset -1.5px 0 0 rgba(255,140,205,.6), inset 0 -1.5px 0 rgba(95,230,190,.65), inset 0 1.5px 0 rgba(255,255,255,.32); --g-edge-4: inset 1.5px 0 0 rgba(130,168,255,.65), inset -1.5px 0 0 rgba(255,140,205,.6), inset 0 -1.5px 0 rgba(95,230,190,.65), inset 0 1.5px 0 rgba(255,255,255,.32); --g-hairline: rgba(255,255,255,.09); --g-hairline-strong: rgba(255,255,255,.09); /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 2px 6px rgba(0,0,0,.35), 0 20px 44px -20px rgba(0,0,0,.7); --g-shadow-2: 0 2px 6px rgba(0,0,0,.35), 0 20px 44px -20px rgba(0,0,0,.7); --g-shadow-3: 0 3px 9px rgba(0,0,0,.4), 0 30px 64px -20px rgba(0,0,0,.8); --g-shadow-4: 0 3px 9px rgba(0,0,0,.4), 0 30px 64px -20px rgba(0,0,0,.8); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 2px 6px rgba(0,0,0,.35), 0 20px 44px -20px rgba(0,0,0,.7); --g-e2: 0 2px 6px rgba(0,0,0,.35), 0 20px 44px -20px rgba(0,0,0,.7); --g-e3: 0 3px 9px rgba(0,0,0,.4), 0 30px 64px -20px rgba(0,0,0,.8); --g-e4: 0 3px 9px rgba(0,0,0,.4), 0 30px 64px -20px rgba(0,0,0,.8); --g-lift: 0 3px 9px rgba(0,0,0,.4), 0 30px 64px -20px rgba(0,0,0,.8); /* scrim */ --g-scrim: rgba(0, 0, 0, 0.58); --g-scrim-strong: rgba(0, 0, 0, 0.74); /* radii */ --g-r-xs: 999px; --g-r-sm: 999px; --g-r-md: 999px; --g-r-lg: 20px; --g-r-xl: 25px; --g-r-2xl: 32px; --g-r-ctl: 999px; --g-r-card: 20px; --g-r-chrome: 20px; --g-r-menu: 16px; --g-r-sheet: 25px; --g-r-modal: 25px; --g-r-inner: 13px; /* space + control sizing */ --g-pad-card: 20px; --g-pad-card-tight: 14px; --g-pad-sheet: 24px; --g-pad-page: 20px; --g-gap: 14px; --g-ctl-h: 38px; --g-ctl-h-sm: 30px; --g-ctl-h-lg: 46px; --g-row-h: 44px; /* focus */ --g-focus-color: rgba(244, 245, 249, 0.75); --g-focus-halo: rgba(244, 245, 249, 0.22); --g-focus-ring: 0 0 0 1.5px rgba(120,160,255,.8),0 0 0 4.5px rgba(255,130,195,.3); /* feedback */ --g-skel: rgba(255, 255, 255, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(255, 255, 255, 0.20); --g-scroll-thumb-hover: rgba(255, 255, 255, 0.34); --g-grabber: rgba(235, 235, 245, 0.34); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 0px; --g-border-c: transparent; --g-btn-primary-shadow: inset 1px 0 0 rgba(120,160,255,.6),inset -1px 0 0 rgba(255,130,195,.55),0 1px 2px rgba(0,0,0,.4),0 8px 20px -8px rgba(255,255,255,.15); --g-btn-primary-shadow-hover: inset 1px 0 0 rgba(120,160,255,.8),inset -1px 0 0 rgba(255,130,195,.7),0 2px 4px rgba(0,0,0,.35),0 12px 26px -8px rgba(255,255,255,.2); --g-btn-primary-shadow-press: inset 0 1px 3px rgba(0,0,0,.25); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } } /* ============================================================================ 05 COBALT — Full-bleed electric blue. White type, white buttons, nothing timid. worst body-ink contrast — light 4.55:1 · dark 4.50:1 ============================================================================ */ :root[data-ui-theme="cobalt"], [data-ui-theme="cobalt"] { color-scheme: dark; --g-theme-name: "Cobalt"; --g-theme-blurb: "Full-bleed electric blue. White type, white buttons, nothing timid."; /* ground */ --g-canvas: #2140e0; --g-mesh: radial-gradient(70% 55% at 30% 0%,rgba(150,180,255,.55),transparent 70%),radial-gradient(50% 45% at 90% 85%,rgba(10,18,90,.5),transparent 72%),radial-gradient(45% 40% at 8% 90%,rgba(90,220,255,.22),transparent 70%),linear-gradient(165deg,#2E4CEC 0%,#1D34C8 60%,#1729AE 100%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #3850cd; --g-solid-2: #3e59e4; /* R6-23b: glass.css §3 maps fill-3 → solid-3 in reduced-transparency / lite mode; #425ce5 was ΔL* +1.0 off solid-2 while the R6-19 v711 fill-3 ramp is −12.9 — the a11y mode lost the deep hover. This is the exact opaque composite of fill-3 rgba(9,16,80,.22) over the #2140e0 canvas (solid-2 is already the fill-2 composite): ΔL* −13.0, white text 9.05:1. */ --g-solid-3: #1c35c0; --g-solid-4: #465fe5; --g-solid-sunken: #283a94; /* ink */ --g-text: #ffffff; --g-text-2: #f4f5fd; /* V731-2 CEILING NOTE — DO NOT "fix" sweep findings F4 / F5 / F6 by moving this value. It was measured and refused, in both directions. Read this before the next sweep files the same rows again. This block passes its bar: bare on all six opaque rungs, worst 4.88 on --g-solid-2, with solid-3 7.90 and solid-4 4.55. What v731 filed is a set of TRANSLUCENT-rung readings — 3.85 on the F4 body labels, 2.69 on the seven Home quick-action tiles, 2.88 across the calendar upcoming strip — and none of them is an ink defect. Cobalt light is the one INVERTED theme: an electric-blue ground under near-white ink, with a WHITE glass ladder (--g-fill-1 alpha .217, --g-fill-2 .13, --g-fill-4 .669). Every glass rung therefore washes the ground UP toward the ink instead of away from it, which is the opposite of what the other eleven themes do. R6-19 and R6-23b already hit this wall on rung 3 and answered it by taking that rung DEEP; rungs 1, 2 and 4 are the theme's actual look and were left white on purpose. THE CEILING. Contrast depends on the ink only through its relative luminance, so the best ANY colour in sRGB can do against a fixed set of grounds is a computable number. For this block it is 5.21 on the bare six rungs (reached at pure white); 4.01 once --g-fill-nested joins the set; 3.48 once --g-fill-1 joins; 1.75 with the whole fill ladder. Below 4.5 means NO ink passes — not this token, not --g-text-2, not --g-text #ffffff, not any of the 16.7M sRGB values. Moving consumers to a "token that already holds" is therefore not an escape either: on fill-4 over solid-2 the three tiers read 1.43 / 1.51 / 1.64, and on fill-2 over fill-1 over solid-2 they read 2.64 / 2.79 / 3.03. THE SWEEP PROVES THIS AGAINST ITSELF. Two of the rows it filed under F6 — .cal-upn-today-v and .cal-tg-empty-t, both at 3.30 — are --g-text consumers, not muted-tier ones. 3.30 for #ffffff implies a painted ground at luminance 0.26818, and this token on that same ground computes 2.88, byte-matching the four muted-tier rows filed alongside them. So the whole strip shares one ground whose ceiling is 3.30, with pure white already sitting on it. Same shape on the pixel-verified pair: F5's ground is luminance 0.29050, where white reaches 3.08; F4's is 0.18791, where white reaches 4.41. WHY NOT MOVE IT ANYWAY. Brighter buys at most +0.39 on F5, +0.56 on F4 and +0.51 on the nested rung — every one still short of 4.5 — and costs the tier: the gap to --g-text is already only 1.146 and would go to 1.000, i.e. the muted tier would BE body copy. Darker raises nothing that was filed (every filed ground is brighter than this ink) and walks the bare-rung worst case down from 4.88. v729's #eceffc is the better of two bad directions, and it stays. THE REAL FIX IS THE GROUND, and it is not this token's to make: either the surfaces stop being translucent white over a bright mesh region, or this block's fill-1 / fill-2 ladder goes deep the way rung 3 already did — a change to the theme's signature look, gated above this lane. Handed off, not guessed at. Script: .agents/mission/sweeps/green-pair-measure.js --ink text-3 --veil fill-1 (and fill-2 / fill-nested / fill-4). */ --g-text-3: #eceffc; --g-text-4: #9eabf1; --g-text-on-accent: #1d34c8; --g-placeholder: #d2d8f9; /* the needle */ --g-accent: #ffffff; --g-accent-strong: #ffffff; --g-accent-fill: #ffffff; --g-accent-press: #c7c7c7; --g-accent-soft: rgba(9, 16, 80, 0.76); --g-accent-softer: rgba(9, 16, 80, 0.37); --g-accent-glow: rgba(255, 255, 255, 0.34); /* status */ --g-green: #ebfff5; /* V721-7: the GREEN TWIN of the V721-2 red case, same theme, same shape. cobalt LIGHT is the inverted theme — --g-green is #ffffff, the brightest ink it owns, so a same-family mint veil at 18% washes the electric-blue ground UP toward the ink: 4.21:1 on --g-solid-2 (the literal ground of .ig-health-row .g-solid-2) and 3.97:1 on --g-solid-4. No lighter green exists and no consumer-side lever is left (measured and refused in js/integrations.js and js/funnel.js). So the veil goes DEEP, exactly as the red pair above and --g-fill-3 / --g-fill-sunken already do in this block. Derived from the red twin, not guessed: same hue family (157.24° — byte-equal to cobalt DARK's --g-green #a8ffde, 0.54° off the old veil's own base), same alpha (.3), and the base lightness solved so the composited step MATCHES the red's ΔL* on solid-2 exactly (−9.98 vs −9.98); chip-vs-card separation lands on the red's number too, 1.328 → 1.447. Measured after: canvas 9.94 · solid-1 9.09 · solid-2 8.10 · solid-3 11.52 · solid-4 7.67 · sunken 12.04. White --g-text on this panel: 4.21 → 8.10. --g-text-on-green is untouched — it pairs with the SOLID --g-green fill (.clock-btn.work.is-stop), not with this veil. */ /* V724-2 (v726) — the same pair again: V721-7 above passed CONTRAST and failed MEANING. Measured on prod v724: the composited chip landed CIELAB ΔE76 11.64 from the live neutral chip rgb(40,58,148), ΔL* 0.15, Δh +1.36° — the SAME hue direction the canvas itself already takes off neutral (+4.3°) — and --g-green was byte-equal to --g-text, so the "Online" chip and the "Not connected" chip rendered as one navy pill. The RED twin below is the proof of the correct shape: PINK-TINTED ink, and a chip that swings +6.09° AWAY from neutral at ΔE76 17.95. The green pair now takes both of those properties. Derived, not guessed: INK #ffffff → #ebfff5. Chromatic signal matched to the red ink exactly: ΔE00 from pure white is 9.94 for #ffeaef and 9.94 for #ebfff5. Its Lab hue 163.0° IS this theme's own green identity — cobalt DARK's --g-green #a8ffde sits at 167.2°, and the V721-7 veil sat at 163.3°. So the ink finally carries green signal instead of being a second copy of --g-text. VEIL rgba(4,33,22,.3) → rgba(2,68,45,.52). The veil's own HUE barely moves (163.3° → 161.4°, −1.9° — hue-drift discipline holds on the token itself). What moves is CHROMA 14.96 → 27.09 and ALPHA .30 → .52. Alpha is the lever because this veil is DARK: over an electric-blue ground, MORE veil buys separation AND contrast at the same time, so the two goals stop fighting. Proven, not assumed — at α .30 nothing in the green band reaches the hue target while holding the chip near 8.10, and the α .30 values that do reach ΔE 17.5 drag the ratio down to 5.8. At .52 the chip's ratio on solid-2 is held at 8.10, byte-equal to what v724 shipped. Measured after, ink on the composited veil: canvas 9.45 · solid-1 8.75 · solid-2 8.10 · solid-3 10.43 · solid-4 7.79 · sunken 10.56. ΔE76 vs the neutral chip: canvas 18.51 · solid-1 30.31 · solid-2 26.88 · sunken 40.30 — the MINIMUM across the enforced grounds is 18.51, which clears the red twin's best single ground (17.95) and buries its own minimum (5.88). Chip hue now sits −12.17° from neutral, opposite side from the canvas, twice red's magnitude. --g-text-on-green #131313 on the SOLID ink fill: 18.58 → 17.83 (4 consumers — .clock-btn.work.is-stop plus three sops.css badges). Bare ink with no veil, worst enforced ground: 5.59 → 5.37. Script: .agents/mission/sweeps/green-pair-deltae.js (ΔE) + green-pair-measure.js (the 36-block enforced-set sweep, still 0 of 36 failures after this edit). */ --g-green-bg: rgba(2,68,45,.52); --g-text-on-green: #131313; --g-amber: #faedd8; /* V726-a: the THIRD status pair in this block, and the last one still broken. cobalt LIGHT is the inverted theme, so its status inks are near-white — and --g-amber was literally #ffffff, byte-equal to BOTH --g-text AND --g-accent. The "warning" chip rendered as the same white type as body copy, carrying zero chromatic signal, and it sat at 4.4796 on --g-solid-2, UNDER the 4.5 bar (filed as 4.50). --g-solid-4 was worse still at 4.21. Why the VEIL had to move too, even though it separated fine on its own. The old veil rgba(255,200,100,.2) LIGHTENS the electric-blue ground (dL* +6.12 on solid-2) and the ink was already the brightest colour this theme owns. Measured: with a PURE WHITE ink that veil tops out at 4.48 on solid-2, and every alpha is worse or pointless — a=.15 gives 4.76 but the tint dies, a=.25 gives 4.20. Any tint on the ink only pulls it further down. The opposite shape, a dark ink on a light chip (what the other eleven light themes do), is dead here because bare-ink consumers put --g-amber straight on the blue grounds with no veil at all — .g-t-amber, .ppf-stalled-days, .cp-dlv-due.is-soon, .sop-status.sop-offline, .act-meter-label--warn — where a dark amber measures 1.01 to 1.82. Near-white ink over a DEEP veil is the only shape left, which is exactly what --g-red-bg and --g-green-bg already do in this block. INK #ffffff to #faedd8. Chromatic signal matched to its two siblings exactly: dE00 from pure white is 9.94 for --g-red #ffeaef, 9.94 for --g-green #ebfff5, and 9.94 here. Its Lab hue 85.26 deg IS this theme's own amber identity — cobalt DARK's --g-amber #ffdfa3 sits at 85.19 deg. VEIL rgba(255,200,100,.2) to rgba(96,68,0,.6). Hue drift on the token is only +0.23 deg (81.0 to 81.2), tighter than the green pair's -1.9 and level with the red pair. Darkness is derived, not guessed: dL* on solid-2 lands -10.35, between red's -9.98 and green's -11.12. Alpha is the lever for the same reason the green fix gave — over an electric-blue ground a DEEP veil buys separation AND contrast together instead of trading them. Measured after, ink on the composited veil: canvas 8.25 - solid-1 7.54 - solid-2 7.10 - solid-3 8.88 - solid-4 6.84 - sunken 8.71. Worst enforced 4.4796 to 7.1006; solid-4 4.21 to 6.84. dE76 vs the live neutral chip rgb(40,58,148), minimum across the enforced grounds: 42.43 — the green fix's own minimum is 18.51 and its bar was 15. Against the other two chips on the same grounds: min 27.57 vs the fixed green, min 48.06 vs red. Bare ink with no veil, worst enforced ground: 5.59 to 4.84 (the red ink's own is 4.87). --g-text-on-amber #131313 on the SOLID ink fill: 18.58 to 16.08 — one consumer, .cp-gal-chip-pend in js/client-portal.js. HONEST LIMIT: the chip no longer reads as a LIGHT warm pill. It is now a dark, desaturated warm slate, distinguished from red (violet) and green (teal) by lightness and chroma rather than by carrying amber hue. Flipping the chip's Lab b* positive over a ground sitting at b* -83 needs alpha .70, which makes the pill nearly opaque and breaks the glass language the other two chips keep. Same ceiling the green fix documented and accepted. The three other light themes that failed this sweep (tahoe 4.33, aurora 4.33, graphite 4.25 — all on canvas) took the V721-7 shape instead: ink darkened only, at zero HSL hue drift. Scripts: sweeps/green-pair-measure.js --pair amber (the 36-block enforced sweep) and sweeps/green-pair-deltae.js --pair amber (the dE separation companion). */ --g-amber-bg: rgba(96,68,0,.6); --g-text-on-amber: #131313; --g-blue: #e9f0fa; --g-blue-bg: rgba(233, 240, 250, 0.16); --g-violet: #f4eefb; --g-violet-bg: rgb(107, 104, 111); --g-red: #ffeaef; /* V721-2: cobalt LIGHT is the inverted theme — its --g-red is a near-white ink on an electric-blue ground, so a same-hue veil at 16% washes the ground UP toward the ink: 3.70:1 on --g-solid-2 (the literal ground of .ppf-scorecard .g-solid-2) and 3.48:1 on --g-solid-4. No lighter red exists (#ffeaef is already near white) and dropping the alpha to 0.04 — the only value that clears — erases the tint (ΔL 0.013 vs 0.059). So the veil goes DEEP instead, exactly as --g-fill-3 / --g-fill-sunken already do in this block (R6-19 / R6-23b). Same hue as the red (345.8° vs 345.7°), same perceptual step as the old light veil (ΔL 0.058), chip-vs-card separation improves 1.31 → 1.45. Measured after: canvas 8.69 · solid-1 7.90 · solid-2 7.04 · solid-3 10.03 · solid-4 6.66 · sunken 10.43. White --g-text on this panel: 4.26 → 8.10. */ --g-red-bg: rgba(90, 10, 29, 0.3); --g-text-on-red: #1f080d; --g-slate: #f4f5fd; --g-slate-bg: rgb(9, 16, 80); /* the glass ladder */ --g-fill-1: rgba(255, 255, 255, 0.217); --g-fill-2: rgba(255, 255, 255, 0.13); /* R6-19 v711: was rgba(255,255,255,.391) — white --g-text washed to 3.14:1 on the home-stat hover (2.65:1 when a menu/sheet floats over a fill-2 card). No white alpha can work here: ≥4.5:1 over a card needs a≤.11 (ramp becomes invisible vs fill-2 .13), a visible ramp needs a≥.20 (3.8:1 over a card). So rung 3 goes DEEP instead — same family as --g-fill-sunken rgba(9,16,80,.3): white text 9.0:1 over canvas · 7.3:1 over a card, hover ΔL* −12.9 (unmissable), item hover/press on the pane stay +4.3/+6.2 L*. */ --g-fill-3: rgba(9, 16, 80, 0.22); --g-fill-4: rgba(255, 255, 255, 0.669); --g-fill-nested: rgba(255,255,255,.14); --g-fill-sunken: rgba(9,16,80,.3); --g-fill-hover: rgba(255,255,255,.07); --g-fill-press: rgba(255,255,255,.1); --g-fill-sel: rgba(9, 16, 80, 0.85); /* blur (constant per rung, NEVER animated) */ --g-blur-1: blur(27px) saturate(160%); --g-blur-2: blur(24px) saturate(160%); --g-blur-3: blur(32px) saturate(180%); --g-blur-4: blur(40px) saturate(180%); --g-blur-scrim: blur(8px) saturate(115%); /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(172deg,rgba(255,255,255,.22),rgba(255,255,255,.04) 40%,rgba(255,255,255,0) 70%); --g-sheen-2: linear-gradient(172deg,rgba(255,255,255,.22),rgba(255,255,255,.04) 40%,rgba(255,255,255,0) 70%); --g-sheen-3: linear-gradient(172deg,rgba(255,255,255,.22),rgba(255,255,255,.04) 40%,rgba(255,255,255,0) 70%); --g-sheen-4: linear-gradient(172deg,rgba(255,255,255,.22),rgba(255,255,255,.04) 40%,rgba(255,255,255,0) 70%); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: inset 0 0 0 1px rgba(255,255,255,.35), inset 0 1px 0 rgba(255,255,255,.45); --g-edge-2: inset 0 0 0 1px rgba(255,255,255,.28), inset 0 1.5px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(10,18,90,.25); --g-edge-3: inset 0 0 0 1px rgba(255,255,255,.32), inset 0 1.5px 0 rgba(255,255,255,.55); --g-edge-4: inset 0 0 0 1px rgba(255,255,255,.32), inset 0 1.5px 0 rgba(255,255,255,.55); --g-hairline: rgba(255,255,255,.16); --g-hairline-strong: rgba(255,255,255,.16); /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 2px 6px rgba(8,14,70,.25), 0 22px 44px -18px rgba(8,14,70,.55); --g-shadow-2: 0 2px 6px rgba(8,14,70,.25), 0 22px 44px -18px rgba(8,14,70,.55); --g-shadow-3: 0 3px 9px rgba(8,14,70,.3), 0 30px 60px -18px rgba(8,14,70,.65); --g-shadow-4: 0 3px 9px rgba(8,14,70,.3), 0 30px 60px -18px rgba(8,14,70,.65); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 2px 6px rgba(8,14,70,.25), 0 22px 44px -18px rgba(8,14,70,.55); --g-e2: 0 2px 6px rgba(8,14,70,.25), 0 22px 44px -18px rgba(8,14,70,.55); --g-e3: 0 3px 9px rgba(8,14,70,.3), 0 30px 60px -18px rgba(8,14,70,.65); --g-e4: 0 3px 9px rgba(8,14,70,.3), 0 30px 60px -18px rgba(8,14,70,.65); --g-lift: 0 3px 9px rgba(8,14,70,.3), 0 30px 60px -18px rgba(8,14,70,.65); /* scrim */ --g-scrim: rgba(0, 0, 0, 0.58); --g-scrim-strong: rgba(0, 0, 0, 0.74); /* radii */ --g-r-xs: 7px; --g-r-sm: 10px; --g-r-md: 12px; --g-r-lg: 20px; --g-r-xl: 25px; --g-r-2xl: 32px; --g-r-ctl: 12px; --g-r-card: 20px; --g-r-chrome: 20px; --g-r-menu: 16px; --g-r-sheet: 25px; --g-r-modal: 25px; --g-r-inner: 12px; /* space + control sizing */ --g-pad-card: 20px; --g-pad-card-tight: 14px; --g-pad-sheet: 24px; --g-pad-page: 20px; --g-gap: 14px; --g-ctl-h: 38px; --g-ctl-h-sm: 30px; --g-ctl-h-lg: 46px; --g-row-h: 44px; /* focus */ --g-focus-color: rgba(255, 255, 255, 0.75); --g-focus-halo: rgba(255, 255, 255, 0.22); --g-focus-ring: 0 0 0 3.5px rgba(255,255,255,.35); /* feedback */ --g-skel: rgba(255, 255, 255, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(255, 255, 255, 0.20); --g-scroll-thumb-hover: rgba(255, 255, 255, 0.34); --g-grabber: rgba(235, 235, 245, 0.34); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 0px; --g-border-c: transparent; --g-btn-primary-shadow: inset 0 -1px 0 rgba(30,50,180,.15),0 2px 5px rgba(8,14,70,.35),0 10px 24px -8px rgba(8,14,70,.5); --g-btn-primary-shadow-hover: 0 3px 7px rgba(8,14,70,.3),0 14px 30px -8px rgba(8,14,70,.55),0 0 0 4px rgba(255,255,255,.15); --g-btn-primary-shadow-press: inset 0 1px 3px rgba(30,50,180,.3); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } html[data-ui-theme="cobalt"][data-theme="dark"], [data-ui-theme="cobalt"][data-theme="dark"] { color-scheme: dark; --g-theme-name: "Cobalt"; --g-theme-blurb: "Full-bleed electric blue. White type, white buttons, nothing timid."; /* ground */ --g-canvas: #060a22; --g-mesh: radial-gradient(80% 50% at 50% 108%,rgba(45,80,255,.55),transparent 72%),radial-gradient(45% 38% at 12% 6%,rgba(30,50,160,.45),transparent 70%),radial-gradient(30% 26% at 85% 22%,rgba(90,140,255,.2),transparent 70%),linear-gradient(180deg,#070B26,#050818); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #0b1239; --g-solid-2: #0c143f; --g-solid-3: #161d47; --g-solid-4: #20274e; --g-solid-sunken: #080d29; /* ink */ --g-text: #ffffff; --g-text-2: #bbbdc9; /* V731-1 RUNG DECISION (fixes sweep v731 F7 + F7b): was #8c8fa4. V721-2 left --g-solid-3 / --g-solid-4 unenforced for the ink family because "no measured consumer sits there". That premise has now been falsified twice — V724-3 (v729) on ledger/light, and this sweep on cobalt/dark — so it is retired here: THE NEW BAR for --g-text-3 is (a) bare on ALL SIX opaque rungs — canvas, solid-1, solid-2, solid-3, solid-4, solid-sunken — solid-3 and solid-4 promoted from WATCH to ENFORCED, and (b) --g-fill-nested over those same six. (b) is not a hypothetical stack: glass.css section 3 case (a), the no-backdrop-filter path that also covers print and old WebKit, remaps fill-1..4 onto solid-1..4 but leaves --g-fill-nested TRANSLUCENT, so "nested tint over an opaque rung" is the literal computed ground there. The reduced-transparency and glass-lite paths remap --g-fill-nested onto --g-solid-2, which the bare set already covers. Both filed findings are that rung. F7 (calendar upcoming strip, 4.02) is this ink on --g-fill-3 over --g-solid-4 — the model reproduces 4.02 to the cent. F7b (.dops-statuscfg-ct, 4.09, the V724-3 family's third sighting) is this ink on --g-fill-nested over the .dops-statuscfg --g-fill-2 control. THE INK IS THE LEVER, NOT THE PAPER — same finding as V724-3. Every fill token in this block stays byte-identical, so the R6-19 / R6-23b ramps are untouched, and one value fixes every rung at once. Measured after, before->after: bare canvas 6.13->7.48 · s1 5.67->6.93 · s2 5.54->6.76 · s3 5.06->6.17 · s4 4.50->5.50 · sunken 5.98->7.30 fnested canvas 5.26->6.42 · s1 4.75->5.80 · s2 4.62->5.64 · s3 4.17->5.09 · s4 3.70->4.52 · sunken 5.09->6.21 nested>f2 canvas 4.63->5.65 · s1 4.24->5.18 · s2 4.15->5.06 · s3 3.83->4.67 · s4 3.50->4.27 · sunken 4.49->5.48 Every OTHER translucent rung improves too and all but one now clear: fill-1 4.18->5.10, fill-2 4.25->5.19, fill-3 4.02->4.91, fill-4 3.78->4.61, sunken 5.57->6.80, hover 3.88->4.74, press 3.73->4.56. The one that stays under is --g-fill-sel 2.54->3.10 — a SELECTION tint, which paints --g-text not the muted tier; left alone deliberately rather than dragged into the bar. HSL hue drift 0.0000 deg (232.5000 both sides — the move is a lightness step, saturation 0.1165->0.1379). L* 59.80->65.87, dL* +6.07. Tier ladder holds and re-centres: gap to --g-text-2 1.707->1.399 — this block had the LARGEST text-2 gap in the whole family, so the lift is paid for out of slack the theme already had, and 1.399 still sits above the family median 1.31 and above tahoe/dark 1.19, graphite/dark 1.19, pop/dark 1.26. Gap to --g-text-4 2.182->2.663 and to --g-text 3.191->2.615, so the muted tier moves toward body copy and away from the faint tier — the correct direction for a tier that was being read as noise. NOT DONE HERE, ON PURPOSE: cobalt LIGHT (findings F4/F5/F6). See the ceiling note above that block's --g-text-3 — no ink value can fix those, so none was invented. Script: .agents/mission/sweeps/green-pair-measure.js --ink text-3 [--veil fill-nested]. */ --g-text-3: #9c9fb4; --g-text-4: #525876; --g-text-on-accent: #101a70; --g-placeholder: #797d95; /* the needle */ --g-accent: #ffffff; --g-accent-strong: #ffffff; --g-accent-fill: #ffffff; --g-accent-press: #c7c7c7; --g-accent-soft: rgba(255, 255, 255, 0.16); --g-accent-softer: rgba(255, 255, 255, 0.075); --g-accent-glow: rgba(255, 255, 255, 0.34); /* status */ --g-green: #a8ffde; --g-green-bg: rgba(120,255,205,.18); --g-text-on-green: #081f16; --g-amber: #ffdfa3; --g-amber-bg: rgba(255,200,100,.2); --g-text-on-amber: #1f1708; --g-blue: #83ace2; --g-blue-bg: rgba(131, 172, 226, 0.16); --g-violet: #af83e2; --g-violet-bg: rgb(44, 34, 55); --g-red: #ffb0c2; --g-red-bg: rgba(255, 176, 194, 0.16); --g-text-on-red: #1f080d; --g-slate: #bbbdc9; --g-slate-bg: rgba(187, 189, 201, 0.16); /* the glass ladder */ --g-fill-1: rgba(30, 48, 145, 0.334); --g-fill-2: rgba(30, 48, 145, 0.26); --g-fill-3: rgba(30, 48, 145, 0.482); --g-fill-4: rgba(30, 48, 145, 0.719); --g-fill-nested: rgba(120,150,255,.12); --g-fill-sunken: rgba(0,0,15,.45); --g-fill-hover: rgba(140,170,255,.08); --g-fill-press: rgba(140,170,255,.1); --g-fill-sel: rgba(255, 255, 255, 0.18); /* blur (constant per rung, NEVER animated) */ --g-blur-1: blur(27px) saturate(160%); --g-blur-2: blur(24px) saturate(160%); --g-blur-3: blur(32px) saturate(180%); --g-blur-4: blur(40px) saturate(180%); --g-blur-scrim: blur(8px) saturate(115%); /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(172deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 40%,rgba(255,255,255,0) 70%); --g-sheen-2: linear-gradient(172deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 40%,rgba(255,255,255,0) 70%); --g-sheen-3: linear-gradient(172deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 40%,rgba(255,255,255,0) 70%); --g-sheen-4: linear-gradient(172deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 40%,rgba(255,255,255,0) 70%); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: inset 0 0 0 1px rgba(140,170,255,.3), inset 0 1px 0 rgba(200,215,255,.3); --g-edge-2: inset 0 0 0 1px rgba(140,170,255,.28), inset 0 1.5px 0 rgba(200,215,255,.35); --g-edge-3: inset 0 0 0 1px rgba(140,170,255,.3), inset 0 1.5px 0 rgba(200,215,255,.4); --g-edge-4: inset 0 0 0 1px rgba(140,170,255,.3), inset 0 1.5px 0 rgba(200,215,255,.4); --g-hairline: rgba(140,170,255,.16); --g-hairline-strong: rgba(140,170,255,.16); /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 2px 6px rgba(0,0,10,.4), 0 24px 48px -18px rgba(0,0,20,.75); --g-shadow-2: 0 2px 6px rgba(0,0,10,.4), 0 24px 48px -18px rgba(0,0,20,.75); --g-shadow-3: 0 3px 9px rgba(0,0,10,.5), 0 32px 64px -18px rgba(0,0,20,.85); --g-shadow-4: 0 3px 9px rgba(0,0,10,.5), 0 32px 64px -18px rgba(0,0,20,.85); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 2px 6px rgba(0,0,10,.4), 0 24px 48px -18px rgba(0,0,20,.75); --g-e2: 0 2px 6px rgba(0,0,10,.4), 0 24px 48px -18px rgba(0,0,20,.75); --g-e3: 0 3px 9px rgba(0,0,10,.5), 0 32px 64px -18px rgba(0,0,20,.85); --g-e4: 0 3px 9px rgba(0,0,10,.5), 0 32px 64px -18px rgba(0,0,20,.85); --g-lift: 0 3px 9px rgba(0,0,10,.5), 0 32px 64px -18px rgba(0,0,20,.85); /* scrim */ --g-scrim: rgba(0, 0, 0, 0.58); --g-scrim-strong: rgba(0, 0, 0, 0.74); /* radii */ --g-r-xs: 7px; --g-r-sm: 10px; --g-r-md: 12px; --g-r-lg: 20px; --g-r-xl: 25px; --g-r-2xl: 32px; --g-r-ctl: 12px; --g-r-card: 20px; --g-r-chrome: 20px; --g-r-menu: 16px; --g-r-sheet: 25px; --g-r-modal: 25px; --g-r-inner: 12px; /* space + control sizing */ --g-pad-card: 20px; --g-pad-card-tight: 14px; --g-pad-sheet: 24px; --g-pad-page: 20px; --g-gap: 14px; --g-ctl-h: 38px; --g-ctl-h-sm: 30px; --g-ctl-h-lg: 46px; --g-row-h: 44px; /* focus */ --g-focus-color: rgba(255, 255, 255, 0.75); --g-focus-halo: rgba(255, 255, 255, 0.22); --g-focus-ring: 0 0 0 3.5px rgba(255,255,255,.35); /* feedback */ --g-skel: rgba(255, 255, 255, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(255, 255, 255, 0.20); --g-scroll-thumb-hover: rgba(255, 255, 255, 0.34); --g-grabber: rgba(235, 235, 245, 0.34); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 0px; --g-border-c: transparent; --g-btn-primary-shadow: inset 0 -1px 0 rgba(30,50,180,.15),0 2px 5px rgba(8,14,70,.35),0 10px 24px -8px rgba(8,14,70,.5); --g-btn-primary-shadow-hover: 0 3px 7px rgba(8,14,70,.3),0 14px 30px -8px rgba(8,14,70,.55),0 0 0 4px rgba(255,255,255,.15); --g-btn-primary-shadow-press: inset 0 1px 3px rgba(30,50,180,.3); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } @media (prefers-color-scheme: dark) { html[data-ui-theme="cobalt"]:not([data-theme="light"]), [data-ui-theme="cobalt"]:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --g-theme-name: "Cobalt"; --g-theme-blurb: "Full-bleed electric blue. White type, white buttons, nothing timid."; /* ground */ --g-canvas: #060a22; --g-mesh: radial-gradient(80% 50% at 50% 108%,rgba(45,80,255,.55),transparent 72%),radial-gradient(45% 38% at 12% 6%,rgba(30,50,160,.45),transparent 70%),radial-gradient(30% 26% at 85% 22%,rgba(90,140,255,.2),transparent 70%),linear-gradient(180deg,#070B26,#050818); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #0b1239; --g-solid-2: #0c143f; --g-solid-3: #161d47; --g-solid-4: #20274e; --g-solid-sunken: #080d29; /* ink */ --g-text: #ffffff; --g-text-2: #bbbdc9; /* V731-1: byte-identical to the dark block above, where the rung decision and the full before-after table live. Edit the two together or not at all. */ --g-text-3: #9c9fb4; --g-text-4: #525876; --g-text-on-accent: #101a70; --g-placeholder: #797d95; /* the needle */ --g-accent: #ffffff; --g-accent-strong: #ffffff; --g-accent-fill: #ffffff; --g-accent-press: #c7c7c7; --g-accent-soft: rgba(255, 255, 255, 0.16); --g-accent-softer: rgba(255, 255, 255, 0.075); --g-accent-glow: rgba(255, 255, 255, 0.34); /* status */ --g-green: #a8ffde; --g-green-bg: rgba(120,255,205,.18); --g-text-on-green: #081f16; --g-amber: #ffdfa3; --g-amber-bg: rgba(255,200,100,.2); --g-text-on-amber: #1f1708; --g-blue: #83ace2; --g-blue-bg: rgba(131, 172, 226, 0.16); --g-violet: #af83e2; --g-violet-bg: rgb(44, 34, 55); --g-red: #ffb0c2; --g-red-bg: rgba(255, 176, 194, 0.16); --g-text-on-red: #1f080d; --g-slate: #bbbdc9; --g-slate-bg: rgba(187, 189, 201, 0.16); /* the glass ladder */ --g-fill-1: rgba(30, 48, 145, 0.334); --g-fill-2: rgba(30, 48, 145, 0.26); --g-fill-3: rgba(30, 48, 145, 0.482); --g-fill-4: rgba(30, 48, 145, 0.719); --g-fill-nested: rgba(120,150,255,.12); --g-fill-sunken: rgba(0,0,15,.45); --g-fill-hover: rgba(140,170,255,.08); --g-fill-press: rgba(140,170,255,.1); --g-fill-sel: rgba(255, 255, 255, 0.18); /* blur (constant per rung, NEVER animated) */ --g-blur-1: blur(27px) saturate(160%); --g-blur-2: blur(24px) saturate(160%); --g-blur-3: blur(32px) saturate(180%); --g-blur-4: blur(40px) saturate(180%); --g-blur-scrim: blur(8px) saturate(115%); /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(172deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 40%,rgba(255,255,255,0) 70%); --g-sheen-2: linear-gradient(172deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 40%,rgba(255,255,255,0) 70%); --g-sheen-3: linear-gradient(172deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 40%,rgba(255,255,255,0) 70%); --g-sheen-4: linear-gradient(172deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 40%,rgba(255,255,255,0) 70%); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: inset 0 0 0 1px rgba(140,170,255,.3), inset 0 1px 0 rgba(200,215,255,.3); --g-edge-2: inset 0 0 0 1px rgba(140,170,255,.28), inset 0 1.5px 0 rgba(200,215,255,.35); --g-edge-3: inset 0 0 0 1px rgba(140,170,255,.3), inset 0 1.5px 0 rgba(200,215,255,.4); --g-edge-4: inset 0 0 0 1px rgba(140,170,255,.3), inset 0 1.5px 0 rgba(200,215,255,.4); --g-hairline: rgba(140,170,255,.16); --g-hairline-strong: rgba(140,170,255,.16); /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 2px 6px rgba(0,0,10,.4), 0 24px 48px -18px rgba(0,0,20,.75); --g-shadow-2: 0 2px 6px rgba(0,0,10,.4), 0 24px 48px -18px rgba(0,0,20,.75); --g-shadow-3: 0 3px 9px rgba(0,0,10,.5), 0 32px 64px -18px rgba(0,0,20,.85); --g-shadow-4: 0 3px 9px rgba(0,0,10,.5), 0 32px 64px -18px rgba(0,0,20,.85); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 2px 6px rgba(0,0,10,.4), 0 24px 48px -18px rgba(0,0,20,.75); --g-e2: 0 2px 6px rgba(0,0,10,.4), 0 24px 48px -18px rgba(0,0,20,.75); --g-e3: 0 3px 9px rgba(0,0,10,.5), 0 32px 64px -18px rgba(0,0,20,.85); --g-e4: 0 3px 9px rgba(0,0,10,.5), 0 32px 64px -18px rgba(0,0,20,.85); --g-lift: 0 3px 9px rgba(0,0,10,.5), 0 32px 64px -18px rgba(0,0,20,.85); /* scrim */ --g-scrim: rgba(0, 0, 0, 0.58); --g-scrim-strong: rgba(0, 0, 0, 0.74); /* radii */ --g-r-xs: 7px; --g-r-sm: 10px; --g-r-md: 12px; --g-r-lg: 20px; --g-r-xl: 25px; --g-r-2xl: 32px; --g-r-ctl: 12px; --g-r-card: 20px; --g-r-chrome: 20px; --g-r-menu: 16px; --g-r-sheet: 25px; --g-r-modal: 25px; --g-r-inner: 12px; /* space + control sizing */ --g-pad-card: 20px; --g-pad-card-tight: 14px; --g-pad-sheet: 24px; --g-pad-page: 20px; --g-gap: 14px; --g-ctl-h: 38px; --g-ctl-h-sm: 30px; --g-ctl-h-lg: 46px; --g-row-h: 44px; /* focus */ --g-focus-color: rgba(255, 255, 255, 0.75); --g-focus-halo: rgba(255, 255, 255, 0.22); --g-focus-ring: 0 0 0 3.5px rgba(255,255,255,.35); /* feedback */ --g-skel: rgba(255, 255, 255, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(255, 255, 255, 0.20); --g-scroll-thumb-hover: rgba(255, 255, 255, 0.34); --g-grabber: rgba(235, 235, 245, 0.34); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 0px; --g-border-c: transparent; --g-btn-primary-shadow: inset 0 -1px 0 rgba(30,50,180,.15),0 2px 5px rgba(8,14,70,.35),0 10px 24px -8px rgba(8,14,70,.5); --g-btn-primary-shadow-hover: 0 3px 7px rgba(8,14,70,.3),0 14px 30px -8px rgba(8,14,70,.55),0 0 0 4px rgba(255,255,255,.15); --g-btn-primary-shadow-press: inset 0 1px 3px rgba(30,50,180,.3); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } } /* ============================================================================ 06 LEDGER — Off-white paper, hairline rules, black ink, one acid-lime highlight. worst body-ink contrast — light 4.59:1 · dark 4.59:1 ============================================================================ */ :root[data-ui-theme="ledger"], [data-ui-theme="ledger"] { color-scheme: light; --g-theme-name: "Ledger"; --g-theme-blurb: "Off-white paper, hairline rules, black ink, one acid-lime highlight."; /* ground */ --g-canvas: #fafaf6; --g-mesh: radial-gradient(70% 45% at 50% 0%,rgba(214,232,150,.14),transparent 70%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #fdfdfc; --g-solid-2: #ffffff; /* R6-23b: glass.css §3 maps fill-3 → solid-3 in reduced-transparency / lite mode; #ffffff == solid-2 meant the a11y mode kept the ZERO hover ramp the R6-18 v711 fill-3 fix removed. Matches fill-3's paper tone (ΔL* −4.7). */ --g-solid-3: #f2f2ea; --g-solid-4: #ffffff; --g-solid-sunken: #fbfbf7; /* ink */ --g-text: #181810; --g-text-2: #5c5c50; /* V724-3 RUNG DECISION: was #737367 — the ONE value in the whole --g-text-3 family that failed a SOLID rung, 4.26:1 on --g-solid-3 #f2f2ea. That rung is not theoretical: glass.css §3 remaps --g-fill-3 onto --g-solid-3 under prefers-reduced-transparency and under the lite escape hatch, so an accessibility-mode user reads the muted tier at 4.26 on every fill-3 surface in this theme. R6-18 v711 (its comment is further down this block) measured the same number and called 4.26 the least-harm point — but it only ever treated the PAPER as the lever and held the ink fixed. Moving the INK instead solves the same constraint strictly better: the paper stays byte-identical, so R6-18's ΔL* −4.7 hover ramp is untouched, and the muted tier clears the bar. This is the MINIMUM move that clears — 3.1% darker, hue drift 0.000° (a pure scalar scale of a 60° grey). Measured after: solid-3 4.26→4.52 · canvas 4.59→4.86 · solid-1 4.71→4.99 · solid-2 and solid-4 4.80→5.08 · sunken 4.62→4.90. Tier ladder holds — gap to --g-text-2 1.89→1.62, gap to --g-text-4 2.55→2.82. Every other block in the family already cleared solid-3 AND solid-4 (family minimum elsewhere 4.50), so enforcing those two rungs for --g-text-3 costs exactly this one line. Script: .agents/mission/sweeps/green-pair-measure.js --ink text-3 */ --g-text-3: #6f6f64; --g-text-4: #b2b2ac; --g-text-on-accent: #f4f5dc; --g-placeholder: #88887e; /* the needle */ --g-accent: #191a12; --g-accent-strong: #16160f; --g-accent-fill: #191a12; --g-accent-press: #14140e; --g-accent-soft: rgba(25, 26, 18, 0.12); --g-accent-softer: rgba(25, 26, 18, 0.055); --g-accent-glow: rgba(25, 26, 18, 0.3); /* status */ --g-green: #4c7000; --g-green-bg: #DDF25A; --g-text-on-green: #f6faed; --g-amber: #776444; --g-amber-bg: #F4EFE2; --g-text-on-amber: #f7f4f0; --g-blue: #154584; --g-blue-bg: rgba(21, 69, 132, 0.14); --g-violet: #491584; --g-violet-bg: rgba(73, 21, 132, 0.14); --g-red: #b03426; --g-red-bg: rgba(255, 221, 217, 0.77); --g-text-on-red: #faeeed; --g-slate: #5c5c50; --g-slate-bg: rgba(92, 92, 80, 0.14); /* the glass ladder */ --g-fill-1: #fdfdfc; --g-fill-2: #ffffff; /* R6-18 v711 (same class as Ink light): was #ffffff (== fill-2) — invisible hover ramp on the four home surfaces. ΔL* 4.7 vs white (ledger-dark's own step is 4.5). --g-text 15.9:1 · --g-text-2 6.0:1. The muted-tier note that used to close this comment is SUPERSEDED by V724-3 (see the --g-text-3 comment above in this block). It was RIGHT that no visibly-darker paper can hold the old #737367 ink at ≥4.5, and WRONG that 4.26 was therefore the least-harm point — the ink was the free lever all along. The paper below is byte-unchanged; the muted ink is now #6f6f64 and reads 4.52:1 on it. */ --g-fill-3: #f2f2ea; --g-fill-4: #ffffff; --g-fill-nested: #F4F4EC; --g-fill-sunken: #FFFFFF; --g-fill-hover: #F7F7F0; --g-fill-press: #F4F4EC; --g-fill-sel: rgba(25, 26, 18, 0.12); /* blur (constant per rung, NEVER animated) */ --g-blur-1: none; --g-blur-2: none; --g-blur-3: none; --g-blur-4: none; --g-blur-scrim: none; /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-2: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-3: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-4: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: 0 0 0 0 rgba(0,0,0,0); --g-edge-2: 0 0 0 0 rgba(0,0,0,0); --g-edge-3: 0 0 0 0 rgba(0,0,0,0); --g-edge-4: 0 0 0 0 rgba(0,0,0,0); --g-hairline: #EDECE4; --g-hairline-strong: #E9E8E0; /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 1px 2px rgba(24,24,16,.05); --g-shadow-2: 0 1px 2px rgba(24,24,16,.04); --g-shadow-3: 0 2px 4px rgba(24,24,16,.05), 0 18px 44px -14px rgba(24,24,16,.22); --g-shadow-4: 0 2px 4px rgba(24,24,16,.05), 0 18px 44px -14px rgba(24,24,16,.22); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 1px 2px rgba(24,24,16,.05); --g-e2: 0 1px 2px rgba(24,24,16,.04); --g-e3: 0 2px 4px rgba(24,24,16,.05), 0 18px 44px -14px rgba(24,24,16,.22); --g-e4: 0 2px 4px rgba(24,24,16,.05), 0 18px 44px -14px rgba(24,24,16,.22); --g-lift: 0 2px 4px rgba(24,24,16,.05), 0 18px 44px -14px rgba(24,24,16,.22); /* scrim */ --g-scrim: rgba(45, 45, 44, 0.34); --g-scrim-strong: rgba(45, 45, 44, 0.5); /* radii */ --g-r-xs: 6px; --g-r-sm: 9px; --g-r-md: 10px; --g-r-lg: 14px; --g-r-xl: 18px; --g-r-2xl: 22px; --g-r-ctl: 10px; --g-r-card: 14px; --g-r-chrome: 14px; --g-r-menu: 12px; --g-r-sheet: 18px; --g-r-modal: 18px; --g-r-inner: 10px; /* space + control sizing */ --g-pad-card: 22px; --g-pad-card-tight: 15px; --g-pad-sheet: 26px; --g-pad-page: 22px; --g-gap: 16px; --g-ctl-h: 38px; --g-ctl-h-sm: 30px; --g-ctl-h-lg: 46px; --g-row-h: 44px; /* focus */ --g-focus-color: rgba(25, 26, 18, 0.65); --g-focus-halo: rgba(25, 26, 18, 0.18); --g-focus-ring: 0 0 0 3.5px rgba(190,220,60,.45); /* feedback */ --g-skel: rgba(24, 24, 16, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(24, 24, 16, 0.2); --g-scroll-thumb-hover: rgba(24, 24, 16, 0.34); --g-grabber: rgba(24, 24, 16, 0.32); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 1px; --g-border-c: #E9E8E0; --g-btn-primary-shadow: 0 1px 2px rgba(24,24,16,.25),0 6px 14px -6px rgba(24,24,16,.35); --g-btn-primary-shadow-hover: 0 2px 3px rgba(24,24,16,.2),0 9px 20px -6px rgba(24,24,16,.4); --g-btn-primary-shadow-press: 0 1px 1px rgba(24,24,16,.3); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } html[data-ui-theme="ledger"][data-theme="dark"], [data-ui-theme="ledger"][data-theme="dark"] { color-scheme: dark; --g-theme-name: "Ledger"; --g-theme-blurb: "Off-white paper, hairline rules, black ink, one acid-lime highlight."; /* ground */ --g-canvas: #0d0e0a; --g-mesh: radial-gradient(70% 45% at 50% 0%,rgba(198,233,64,.06),transparent 70%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #141510; --g-solid-2: #161712; --g-solid-3: #1f201b; --g-solid-4: #292a25; --g-solid-sunken: #0e0f0c; /* ink */ --g-text: #f2f2ea; --g-text-2: #a8a899; --g-text-3: #929285; --g-text-4: #5a5b51; --g-text-on-accent: #1a1e02; --g-placeholder: #808074; /* the needle */ --g-accent: #ddf25a; --g-accent-strong: #e2f471; --g-accent-fill: #ddf25a; --g-accent-press: #acbd46; --g-accent-soft: rgba(221, 242, 90, 0.16); --g-accent-softer: rgba(221, 242, 90, 0.075); --g-accent-glow: rgba(221, 242, 90, 0.34); /* status */ --g-green: #c6e940; --g-green-bg: #2A3005; --g-text-on-green: #1a1f08; --g-amber: #b7a784; --g-amber-bg: #211E15; --g-text-on-amber: #18150e; --g-blue: #83ace2; --g-blue-bg: rgba(131, 172, 226, 0.16); --g-violet: #af83e2; --g-violet-bg: rgb(50, 36, 66); --g-red: #e86a56; --g-red-bg: rgba(66, 9, 0, 0.42); --g-text-on-red: #1f0b08; --g-slate: #a8a899; --g-slate-bg: rgb(58, 58, 51); /* the glass ladder */ --g-fill-1: #141510; --g-fill-2: #161712; --g-fill-3: #1f201b; --g-fill-4: #292a25; --g-fill-nested: #1E1F18; --g-fill-sunken: #111209; --g-fill-hover: #191A12; --g-fill-press: #22231A; --g-fill-sel: rgba(221, 242, 90, 0.18); /* blur (constant per rung, NEVER animated) */ --g-blur-1: none; --g-blur-2: none; --g-blur-3: none; --g-blur-4: none; --g-blur-scrim: none; /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-2: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-3: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-4: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: 0 0 0 0 rgba(0,0,0,0); --g-edge-2: 0 0 0 0 rgba(0,0,0,0); --g-edge-3: 0 0 0 0 rgba(0,0,0,0); --g-edge-4: 0 0 0 0 rgba(0,0,0,0); --g-hairline: #232419; --g-hairline-strong: #26271E; /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 1px 2px rgba(0,0,0,.3); --g-shadow-2: 0 1px 2px rgba(0,0,0,.3); --g-shadow-3: 0 2px 5px rgba(0,0,0,.4), 0 22px 52px -14px rgba(0,0,0,.7); --g-shadow-4: 0 2px 5px rgba(0,0,0,.4), 0 22px 52px -14px rgba(0,0,0,.7); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 1px 2px rgba(0,0,0,.3); --g-e2: 0 1px 2px rgba(0,0,0,.3); --g-e3: 0 2px 5px rgba(0,0,0,.4), 0 22px 52px -14px rgba(0,0,0,.7); --g-e4: 0 2px 5px rgba(0,0,0,.4), 0 22px 52px -14px rgba(0,0,0,.7); --g-lift: 0 2px 5px rgba(0,0,0,.4), 0 22px 52px -14px rgba(0,0,0,.7); /* scrim */ --g-scrim: rgba(0, 0, 0, 0.58); --g-scrim-strong: rgba(0, 0, 0, 0.74); /* radii */ --g-r-xs: 6px; --g-r-sm: 9px; --g-r-md: 10px; --g-r-lg: 14px; --g-r-xl: 18px; --g-r-2xl: 22px; --g-r-ctl: 10px; --g-r-card: 14px; --g-r-chrome: 14px; --g-r-menu: 12px; --g-r-sheet: 18px; --g-r-modal: 18px; --g-r-inner: 10px; /* space + control sizing */ --g-pad-card: 22px; --g-pad-card-tight: 15px; --g-pad-sheet: 26px; --g-pad-page: 22px; --g-gap: 16px; --g-ctl-h: 38px; --g-ctl-h-sm: 30px; --g-ctl-h-lg: 46px; --g-row-h: 44px; /* focus */ --g-focus-color: rgba(221, 242, 90, 0.75); --g-focus-halo: rgba(221, 242, 90, 0.22); --g-focus-ring: 0 0 0 3.5px rgba(190,220,60,.45); /* feedback */ --g-skel: rgba(255, 255, 255, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(255, 255, 255, 0.20); --g-scroll-thumb-hover: rgba(255, 255, 255, 0.34); --g-grabber: rgba(235, 235, 245, 0.34); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 1px; --g-border-c: #26271E; --g-btn-primary-shadow: 0 1px 2px rgba(0,0,0,.4),0 8px 18px -6px rgba(221,242,90,.25); --g-btn-primary-shadow-hover: 0 2px 3px rgba(0,0,0,.35),0 11px 24px -6px rgba(221,242,90,.3); --g-btn-primary-shadow-press: 0 1px 1px rgba(0,0,0,.4); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } @media (prefers-color-scheme: dark) { html[data-ui-theme="ledger"]:not([data-theme="light"]), [data-ui-theme="ledger"]:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --g-theme-name: "Ledger"; --g-theme-blurb: "Off-white paper, hairline rules, black ink, one acid-lime highlight."; /* ground */ --g-canvas: #0d0e0a; --g-mesh: radial-gradient(70% 45% at 50% 0%,rgba(198,233,64,.06),transparent 70%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #141510; --g-solid-2: #161712; --g-solid-3: #1f201b; --g-solid-4: #292a25; --g-solid-sunken: #0e0f0c; /* ink */ --g-text: #f2f2ea; --g-text-2: #a8a899; --g-text-3: #929285; --g-text-4: #5a5b51; --g-text-on-accent: #1a1e02; --g-placeholder: #808074; /* the needle */ --g-accent: #ddf25a; --g-accent-strong: #e2f471; --g-accent-fill: #ddf25a; --g-accent-press: #acbd46; --g-accent-soft: rgba(221, 242, 90, 0.16); --g-accent-softer: rgba(221, 242, 90, 0.075); --g-accent-glow: rgba(221, 242, 90, 0.34); /* status */ --g-green: #c6e940; --g-green-bg: #2A3005; --g-text-on-green: #1a1f08; --g-amber: #b7a784; --g-amber-bg: #211E15; --g-text-on-amber: #18150e; --g-blue: #83ace2; --g-blue-bg: rgba(131, 172, 226, 0.16); --g-violet: #af83e2; --g-violet-bg: rgb(50, 36, 66); --g-red: #e86a56; --g-red-bg: rgba(66, 9, 0, 0.42); --g-text-on-red: #1f0b08; --g-slate: #a8a899; --g-slate-bg: rgb(58, 58, 51); /* the glass ladder */ --g-fill-1: #141510; --g-fill-2: #161712; --g-fill-3: #1f201b; --g-fill-4: #292a25; --g-fill-nested: #1E1F18; --g-fill-sunken: #111209; --g-fill-hover: #191A12; --g-fill-press: #22231A; --g-fill-sel: rgba(221, 242, 90, 0.18); /* blur (constant per rung, NEVER animated) */ --g-blur-1: none; --g-blur-2: none; --g-blur-3: none; --g-blur-4: none; --g-blur-scrim: none; /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-2: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-3: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-4: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: 0 0 0 0 rgba(0,0,0,0); --g-edge-2: 0 0 0 0 rgba(0,0,0,0); --g-edge-3: 0 0 0 0 rgba(0,0,0,0); --g-edge-4: 0 0 0 0 rgba(0,0,0,0); --g-hairline: #232419; --g-hairline-strong: #26271E; /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 1px 2px rgba(0,0,0,.3); --g-shadow-2: 0 1px 2px rgba(0,0,0,.3); --g-shadow-3: 0 2px 5px rgba(0,0,0,.4), 0 22px 52px -14px rgba(0,0,0,.7); --g-shadow-4: 0 2px 5px rgba(0,0,0,.4), 0 22px 52px -14px rgba(0,0,0,.7); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 1px 2px rgba(0,0,0,.3); --g-e2: 0 1px 2px rgba(0,0,0,.3); --g-e3: 0 2px 5px rgba(0,0,0,.4), 0 22px 52px -14px rgba(0,0,0,.7); --g-e4: 0 2px 5px rgba(0,0,0,.4), 0 22px 52px -14px rgba(0,0,0,.7); --g-lift: 0 2px 5px rgba(0,0,0,.4), 0 22px 52px -14px rgba(0,0,0,.7); /* scrim */ --g-scrim: rgba(0, 0, 0, 0.58); --g-scrim-strong: rgba(0, 0, 0, 0.74); /* radii */ --g-r-xs: 6px; --g-r-sm: 9px; --g-r-md: 10px; --g-r-lg: 14px; --g-r-xl: 18px; --g-r-2xl: 22px; --g-r-ctl: 10px; --g-r-card: 14px; --g-r-chrome: 14px; --g-r-menu: 12px; --g-r-sheet: 18px; --g-r-modal: 18px; --g-r-inner: 10px; /* space + control sizing */ --g-pad-card: 22px; --g-pad-card-tight: 15px; --g-pad-sheet: 26px; --g-pad-page: 22px; --g-gap: 16px; --g-ctl-h: 38px; --g-ctl-h-sm: 30px; --g-ctl-h-lg: 46px; --g-row-h: 44px; /* focus */ --g-focus-color: rgba(221, 242, 90, 0.75); --g-focus-halo: rgba(221, 242, 90, 0.22); --g-focus-ring: 0 0 0 3.5px rgba(190,220,60,.45); /* feedback */ --g-skel: rgba(255, 255, 255, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(255, 255, 255, 0.20); --g-scroll-thumb-hover: rgba(255, 255, 255, 0.34); --g-grabber: rgba(235, 235, 245, 0.34); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 1px; --g-border-c: #26271E; --g-btn-primary-shadow: 0 1px 2px rgba(0,0,0,.4),0 8px 18px -6px rgba(221,242,90,.25); --g-btn-primary-shadow-hover: 0 2px 3px rgba(0,0,0,.35),0 11px 24px -6px rgba(221,242,90,.3); --g-btn-primary-shadow-press: 0 1px 1px rgba(0,0,0,.4); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } } /* ============================================================================ 07 GRAPHITE — Dense, tight, monospaced. Linear/Notion energy — maximum data per inch. worst body-ink contrast — light 4.50:1 · dark 4.53:1 ============================================================================ */ :root[data-ui-theme="graphite"], [data-ui-theme="graphite"] { color-scheme: light; --g-theme-name: "Graphite"; --g-theme-blurb: "Dense, tight, monospaced. Linear/Notion energy — maximum data per inch."; /* ground */ --g-canvas: #ecedf0; --g-mesh: linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 30%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #f6f6f8; --g-solid-2: #fbfbfd; /* R6-23b: glass.css §3 maps fill-3 → solid-3 in reduced-transparency / lite mode; #fcfcfe was ΔL* +0.3 off solid-2 — the a11y mode kept the invisible hover. Matches the new (already opaque) fill-3 (ΔL* −4.6). */ --g-solid-3: #eceef1; --g-solid-4: #fdfdfe; --g-solid-sunken: #eeeff2; /* ink */ --g-text: #16181d; --g-text-2: #4b505c; --g-text-3: #666c79; --g-text-4: #a9acb4; --g-text-on-accent: #ffffff; --g-placeholder: #7d818d; /* the needle */ /* V732-A INK MOVE: was #2960e6, scaled x0.95 (hue drift 0.127 deg, L* 45.01 to 42.81). Bare worst rung 4.588 to 4.975. Same reason as studio and aurora: at the old ink no plate on the far side could clear 4.90 and still read, so the selected state had to choose between contrast and visibility. --g-accent-fill #2e6bff is byte-unchanged, so buttons keep the theme's blue. */ --g-accent: #275bdb; --g-accent-strong: #285cdb; --g-accent-fill: #2e6bff; --g-accent-press: #2453c7; --g-accent-soft: rgba(219, 229, 253, 0.94); --g-accent-softer: rgba(228, 236, 255, 0.59); --g-accent-glow: rgba(46, 107, 255, 0.3); /* status */ --g-green: #0d733a; --g-green-bg: rgba(20,150,80,.09); --g-text-on-green: #edfaf3; --g-amber: #8d5a05; --g-amber-bg: rgba(200,120,10,.09); --g-text-on-amber: #faf5ed; --g-blue: #154584; --g-blue-bg: rgba(21, 69, 132, 0.14); --g-violet: #491584; --g-violet-bg: rgba(73, 21, 132, 0.14); --g-red: #ae2b21; --g-red-bg: rgba(250, 222, 220, 0.94); --g-text-on-red: #faeeed; --g-slate: #4b505c; --g-slate-bg: rgba(75, 80, 92, 0.14); /* the glass ladder */ --g-fill-1: #f6f6f8; --g-fill-2: #fbfbfd; /* R6-23 (same class as Ink/Ledger light, R6-18 v711): was #fcfcfe — ΔL* +0.3 off fill-2, an invisible hover ramp (headroom above #fbfbfd is only +1.4, so the step goes DARKER, the ledger/ink-light direction). ΔL* −4.6 vs fill-2 (graphite-dark's own step is +4.4). Menus/sheets rest on fill-3: --g-text 15.3:1 · --g-text-2 6.9:1 · --g-text-3 4.53:1 — every tier ≥4.5. Item hover #F2F3F6 sits ΔL* 1.8 off this pane — ink-light's exact norm. */ --g-fill-3: #eceef1; --g-fill-4: #fdfdfe; --g-fill-nested: #F1F2F5; --g-fill-sunken: #FFFFFF; --g-fill-hover: #F2F3F6; --g-fill-press: #F1F2F5; --g-fill-sel: rgba(219, 229, 253, 0.94); /* blur (constant per rung, NEVER animated) */ --g-blur-1: none; --g-blur-2: none; --g-blur-3: none; --g-blur-4: none; --g-blur-scrim: none; /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-2: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-3: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-4: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: 0 0 0 0 rgba(0,0,0,0); --g-edge-2: 0 0 0 0 rgba(0,0,0,0); --g-edge-3: 0 0 0 0 rgba(0,0,0,0); --g-edge-4: 0 0 0 0 rgba(0,0,0,0); --g-hairline: #E6E8EC; --g-hairline-strong: #DDDFE5; /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 1px 2px rgba(18,22,32,.05); --g-shadow-2: 0 1px 2px rgba(18,22,32,.04); --g-shadow-3: 0 2px 4px rgba(18,22,32,.06), 0 14px 36px -12px rgba(18,22,32,.25); --g-shadow-4: 0 2px 4px rgba(18,22,32,.06), 0 14px 36px -12px rgba(18,22,32,.25); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 1px 2px rgba(18,22,32,.05); --g-e2: 0 1px 2px rgba(18,22,32,.04); --g-e3: 0 2px 4px rgba(18,22,32,.06), 0 14px 36px -12px rgba(18,22,32,.25); --g-e4: 0 2px 4px rgba(18,22,32,.06), 0 14px 36px -12px rgba(18,22,32,.25); --g-lift: 0 2px 4px rgba(18,22,32,.06), 0 14px 36px -12px rgba(18,22,32,.25); /* scrim */ --g-scrim: rgba(42, 43, 43, 0.34); --g-scrim-strong: rgba(42, 43, 43, 0.5); /* radii */ --g-r-xs: 4px; --g-r-sm: 6px; --g-r-md: 7px; --g-r-lg: 9px; --g-r-xl: 11px; --g-r-2xl: 14px; --g-r-ctl: 7px; --g-r-card: 9px; --g-r-chrome: 9px; --g-r-menu: 9px; --g-r-sheet: 11px; --g-r-modal: 11px; --g-r-inner: 7px; /* space + control sizing */ --g-pad-card: 14px; --g-pad-card-tight: 10px; --g-pad-sheet: 17px; --g-pad-page: 14px; --g-gap: 10px; --g-ctl-h: 32px; --g-ctl-h-sm: 26px; --g-ctl-h-lg: 40px; --g-row-h: 38px; /* focus */ --g-focus-color: rgba(41, 96, 230, 0.65); --g-focus-halo: rgba(41, 96, 230, 0.18); --g-focus-ring: 0 0 0 3px rgba(46,107,255,.3),0 0 0 1px #2E6BFF; /* feedback */ --g-skel: rgba(22, 24, 29, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(22, 24, 29, 0.2); --g-scroll-thumb-hover: rgba(22, 24, 29, 0.34); --g-grabber: rgba(22, 24, 29, 0.32); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 1px; --g-border-c: #DDDFE5; --g-btn-primary-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(20,50,140,.3); --g-btn-primary-shadow-hover: inset 0 1px 0 rgba(255,255,255,.2),0 2px 5px rgba(20,50,140,.35); --g-btn-primary-shadow-press: inset 0 1px 2px rgba(10,30,90,.4); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } html[data-ui-theme="graphite"][data-theme="dark"], [data-ui-theme="graphite"][data-theme="dark"] { color-scheme: dark; --g-theme-name: "Graphite"; --g-theme-blurb: "Dense, tight, monospaced. Linear/Notion energy — maximum data per inch."; /* ground */ --g-canvas: #101216; --g-mesh: linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 30%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #15171d; --g-solid-2: #171a20; --g-solid-3: #202329; --g-solid-4: #2a2c32; --g-solid-sunken: #0f1115; /* ink */ --g-text: #edeff3; --g-text-2: #9ba1ae; --g-text-3: #8e939e; --g-text-4: #585d65; --g-text-on-accent: #0d1220; --g-placeholder: #7c818b; /* the needle */ --g-accent: #608fff; --g-accent-strong: #588aff; --g-accent-fill: #3d77ff; --g-accent-press: #547bd6; --g-accent-soft: rgba(0, 27, 91, 0.36); --g-accent-softer: rgba(0, 27, 91, 0.18); --g-accent-glow: rgba(61, 119, 255, 0.34); /* status */ --g-green: #43cf7f; --g-green-bg: rgba(40,200,110,.1); --g-text-on-green: #081e12; --g-amber: #e3a44a; --g-amber-bg: rgba(240,160,40,.1); --g-text-on-amber: #1f1508; --g-blue: #83ace2; --g-blue-bg: rgba(131, 172, 226, 0.16); --g-violet: #af83e2; --g-violet-bg: rgb(50, 36, 66); --g-red: #e76f63; --g-red-bg: rgba(73, 7, 0, 0.33); --g-text-on-red: #1f0a08; --g-slate: #9ba1ae; --g-slate-bg: rgb(50, 51, 53); /* the glass ladder */ --g-fill-1: #15171d; --g-fill-2: #171a20; --g-fill-3: #202329; --g-fill-4: #2a2c32; --g-fill-nested: #1E222A; --g-fill-sunken: #121419; --g-fill-hover: #1B1F26; --g-fill-press: #22262F; --g-fill-sel: rgba(0, 27, 91, 0.4); /* blur (constant per rung, NEVER animated) */ --g-blur-1: none; --g-blur-2: none; --g-blur-3: none; --g-blur-4: none; --g-blur-scrim: none; /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-2: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-3: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-4: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: 0 0 0 0 rgba(0,0,0,0); --g-edge-2: 0 0 0 0 rgba(0,0,0,0); --g-edge-3: 0 0 0 0 rgba(0,0,0,0); --g-edge-4: 0 0 0 0 rgba(0,0,0,0); --g-hairline: #20242C; --g-hairline-strong: #252932; /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 1px 2px rgba(0,0,0,.3); --g-shadow-2: 0 1px 2px rgba(0,0,0,.35); --g-shadow-3: 0 2px 5px rgba(0,0,0,.4), 0 16px 40px -12px rgba(0,0,0,.7); --g-shadow-4: 0 2px 5px rgba(0,0,0,.4), 0 16px 40px -12px rgba(0,0,0,.7); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 1px 2px rgba(0,0,0,.3); --g-e2: 0 1px 2px rgba(0,0,0,.35); --g-e3: 0 2px 5px rgba(0,0,0,.4), 0 16px 40px -12px rgba(0,0,0,.7); --g-e4: 0 2px 5px rgba(0,0,0,.4), 0 16px 40px -12px rgba(0,0,0,.7); --g-lift: 0 2px 5px rgba(0,0,0,.4), 0 16px 40px -12px rgba(0,0,0,.7); /* scrim */ --g-scrim: rgba(0, 0, 0, 0.58); --g-scrim-strong: rgba(0, 0, 0, 0.74); /* radii */ --g-r-xs: 4px; --g-r-sm: 6px; --g-r-md: 7px; --g-r-lg: 9px; --g-r-xl: 11px; --g-r-2xl: 14px; --g-r-ctl: 7px; --g-r-card: 9px; --g-r-chrome: 9px; --g-r-menu: 9px; --g-r-sheet: 11px; --g-r-modal: 11px; --g-r-inner: 7px; /* space + control sizing */ --g-pad-card: 14px; --g-pad-card-tight: 10px; --g-pad-sheet: 17px; --g-pad-page: 14px; --g-gap: 10px; --g-ctl-h: 32px; --g-ctl-h-sm: 26px; --g-ctl-h-lg: 40px; --g-row-h: 38px; /* focus */ --g-focus-color: rgba(96, 143, 255, 0.75); --g-focus-halo: rgba(96, 143, 255, 0.22); --g-focus-ring: 0 0 0 3px rgba(46,107,255,.3),0 0 0 1px #2E6BFF; /* feedback */ --g-skel: rgba(255, 255, 255, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(255, 255, 255, 0.20); --g-scroll-thumb-hover: rgba(255, 255, 255, 0.34); --g-grabber: rgba(235, 235, 245, 0.34); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 1px; --g-border-c: #252932; --g-btn-primary-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(20,50,140,.3); --g-btn-primary-shadow-hover: inset 0 1px 0 rgba(255,255,255,.2),0 2px 5px rgba(20,50,140,.35); --g-btn-primary-shadow-press: inset 0 1px 2px rgba(10,30,90,.4); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } @media (prefers-color-scheme: dark) { html[data-ui-theme="graphite"]:not([data-theme="light"]), [data-ui-theme="graphite"]:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --g-theme-name: "Graphite"; --g-theme-blurb: "Dense, tight, monospaced. Linear/Notion energy — maximum data per inch."; /* ground */ --g-canvas: #101216; --g-mesh: linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 30%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #15171d; --g-solid-2: #171a20; --g-solid-3: #202329; --g-solid-4: #2a2c32; --g-solid-sunken: #0f1115; /* ink */ --g-text: #edeff3; --g-text-2: #9ba1ae; --g-text-3: #8e939e; --g-text-4: #585d65; --g-text-on-accent: #0d1220; --g-placeholder: #7c818b; /* the needle */ --g-accent: #608fff; --g-accent-strong: #588aff; --g-accent-fill: #3d77ff; --g-accent-press: #547bd6; --g-accent-soft: rgba(0, 27, 91, 0.36); --g-accent-softer: rgba(0, 27, 91, 0.18); --g-accent-glow: rgba(61, 119, 255, 0.34); /* status */ --g-green: #43cf7f; --g-green-bg: rgba(40,200,110,.1); --g-text-on-green: #081e12; --g-amber: #e3a44a; --g-amber-bg: rgba(240,160,40,.1); --g-text-on-amber: #1f1508; --g-blue: #83ace2; --g-blue-bg: rgba(131, 172, 226, 0.16); --g-violet: #af83e2; --g-violet-bg: rgb(50, 36, 66); --g-red: #e76f63; --g-red-bg: rgba(73, 7, 0, 0.33); --g-text-on-red: #1f0a08; --g-slate: #9ba1ae; --g-slate-bg: rgb(50, 51, 53); /* the glass ladder */ --g-fill-1: #15171d; --g-fill-2: #171a20; --g-fill-3: #202329; --g-fill-4: #2a2c32; --g-fill-nested: #1E222A; --g-fill-sunken: #121419; --g-fill-hover: #1B1F26; --g-fill-press: #22262F; --g-fill-sel: rgba(0, 27, 91, 0.4); /* blur (constant per rung, NEVER animated) */ --g-blur-1: none; --g-blur-2: none; --g-blur-3: none; --g-blur-4: none; --g-blur-scrim: none; /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-2: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-3: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-4: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: 0 0 0 0 rgba(0,0,0,0); --g-edge-2: 0 0 0 0 rgba(0,0,0,0); --g-edge-3: 0 0 0 0 rgba(0,0,0,0); --g-edge-4: 0 0 0 0 rgba(0,0,0,0); --g-hairline: #20242C; --g-hairline-strong: #252932; /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 1px 2px rgba(0,0,0,.3); --g-shadow-2: 0 1px 2px rgba(0,0,0,.35); --g-shadow-3: 0 2px 5px rgba(0,0,0,.4), 0 16px 40px -12px rgba(0,0,0,.7); --g-shadow-4: 0 2px 5px rgba(0,0,0,.4), 0 16px 40px -12px rgba(0,0,0,.7); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 1px 2px rgba(0,0,0,.3); --g-e2: 0 1px 2px rgba(0,0,0,.35); --g-e3: 0 2px 5px rgba(0,0,0,.4), 0 16px 40px -12px rgba(0,0,0,.7); --g-e4: 0 2px 5px rgba(0,0,0,.4), 0 16px 40px -12px rgba(0,0,0,.7); --g-lift: 0 2px 5px rgba(0,0,0,.4), 0 16px 40px -12px rgba(0,0,0,.7); /* scrim */ --g-scrim: rgba(0, 0, 0, 0.58); --g-scrim-strong: rgba(0, 0, 0, 0.74); /* radii */ --g-r-xs: 4px; --g-r-sm: 6px; --g-r-md: 7px; --g-r-lg: 9px; --g-r-xl: 11px; --g-r-2xl: 14px; --g-r-ctl: 7px; --g-r-card: 9px; --g-r-chrome: 9px; --g-r-menu: 9px; --g-r-sheet: 11px; --g-r-modal: 11px; --g-r-inner: 7px; /* space + control sizing */ --g-pad-card: 14px; --g-pad-card-tight: 10px; --g-pad-sheet: 17px; --g-pad-page: 14px; --g-gap: 10px; --g-ctl-h: 32px; --g-ctl-h-sm: 26px; --g-ctl-h-lg: 40px; --g-row-h: 38px; /* focus */ --g-focus-color: rgba(96, 143, 255, 0.75); --g-focus-halo: rgba(96, 143, 255, 0.22); --g-focus-ring: 0 0 0 3px rgba(46,107,255,.3),0 0 0 1px #2E6BFF; /* feedback */ --g-skel: rgba(255, 255, 255, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(255, 255, 255, 0.20); --g-scroll-thumb-hover: rgba(255, 255, 255, 0.34); --g-grabber: rgba(235, 235, 245, 0.34); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 1px; --g-border-c: #252932; --g-btn-primary-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(20,50,140,.3); --g-btn-primary-shadow-hover: inset 0 1px 0 rgba(255,255,255,.2),0 2px 5px rgba(20,50,140,.35); --g-btn-primary-shadow-press: inset 0 1px 2px rgba(10,30,90,.4); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } } /* RUN5 §3 Graphite: the 32/26/40/38px density is a DESKTOP trait — on touch it sits under the 44px iOS tap minimum, and theme.js's FLOORS guard custom scaling only, never theme tokens. Tokens-only floor, scoped to coarse pointers so desktop keeps its data-per-inch. Selector notes: html:root ties the (0,2,1) specificity of the dark/OS-pref blocks above and wins by file order in every mode; the light block is (0,2,0), also beaten. The bare [data-ui-theme] picker-swatch selector is deliberately left out — previews should show the desktop density they advertise. */ @media (pointer: coarse) { html:root[data-ui-theme="graphite"] { --g-ctl-h: 44px; --g-ctl-h-sm: 30px; --g-ctl-h-lg: 46px; --g-row-h: 44px; } } /* ============================================================================ 08 VELLUM — Warm cream stock, serif headlines, terracotta. An editorial hand. worst body-ink contrast — light 4.57:1 · dark 4.65:1 ============================================================================ */ :root[data-ui-theme="vellum"], [data-ui-theme="vellum"] { color-scheme: light; --g-theme-name: "Vellum"; --g-theme-blurb: "Warm cream stock, serif headlines, terracotta. An editorial hand."; /* ground */ --g-canvas: #efe8dc; --g-mesh: radial-gradient(60% 45% at 25% 8%,rgba(255,250,238,.7),transparent 70%),radial-gradient(50% 40% at 85% 90%,rgba(178,146,102,.14),transparent 70%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #f7f2e8; --g-solid-2: #fbf7ef; /* R6-27b (v713, the R6-23b pattern): fill-3 maps to solid-3 in reduced-transparency / lite mode; #fcfaf5 was dL* +1.0 off solid-2. Matches the new (already opaque) fill-3 (dL* -4.5). */ --g-solid-3: #f0eadb; --g-solid-4: #fdfcf9; --g-solid-sunken: #f1eadf; /* ink */ --g-text: #2b2318; --g-text-2: #6b5f4d; --g-text-3: #716754; --g-text-4: #afa89a; --g-text-on-accent: #fdf6ee; --g-placeholder: #867d6c; /* the needle */ --g-accent: #9c4a28; --g-accent-strong: #864022; --g-accent-fill: #9c4a28; --g-accent-press: #7a3a1f; --g-accent-soft: rgba(255, 224, 211, 0.79); --g-accent-softer: rgba(255, 233, 224, 0.58); --g-accent-glow: rgba(156, 74, 40, 0.3); /* status */ --g-green: #5a6e3a; --g-green-bg: #E4EAD2; --g-text-on-green: #f4f7f0; --g-amber: #875d25; --g-amber-bg: #F5E4CB; --g-text-on-amber: #faf4ed; --g-blue: #154584; --g-blue-bg: rgba(21, 69, 132, 0.14); --g-violet: #491584; --g-violet-bg: rgba(73, 21, 132, 0.14); --g-red: #9f3923; --g-red-bg: rgba(255, 217, 209, 0.77); --g-text-on-red: #faefed; --g-slate: #6b5f4d; --g-slate-bg: rgb(227, 225, 222); /* the glass ladder */ --g-fill-1: #f7f2e8; --g-fill-2: #fbf7ef; /* R6-27 (v713, same class as ink/ledger light R6-23): was #fcfaf5 — dL* +1.0 off fill-2, a near-invisible hover step (headroom above #fbf7ef is tiny, so the step goes DARKER, the ledger/ink-light direction). One step of deeper vellum cream: dL* -4.5 vs fill-2 (family norm ~4.5). Menus/sheets rest on fill-3: --g-text 12.90 / --g-text-2 5.19 / --g-text-3 4.64 — every tier >=4.5 (opaque, so canvas and nested composites are equal). */ --g-fill-3: #f0eadb; --g-fill-4: #fdfcf9; --g-fill-nested: rgba(240,232,218,.9); --g-fill-sunken: rgba(255,253,248,.85); --g-fill-hover: rgba(93,72,42,.04); --g-fill-press: #F3EDE0; --g-fill-sel: rgba(255, 224, 211, 0.79); /* blur (constant per rung, NEVER animated) */ --g-blur-1: none; --g-blur-2: none; --g-blur-3: none; --g-blur-4: none; --g-blur-scrim: none; /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 40%); --g-sheen-2: linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 40%); --g-sheen-3: linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 40%); --g-sheen-4: linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 40%); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: 0 0 0 0 rgba(0,0,0,0); --g-edge-2: 0 0 0 0 rgba(0,0,0,0); --g-edge-3: 0 0 0 0 rgba(0,0,0,0); --g-edge-4: 0 0 0 0 rgba(0,0,0,0); --g-hairline: rgba(93,72,42,.1); --g-hairline-strong: rgba(93,72,42,.1); /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 1px 3px rgba(93,72,42,.1), 0 6px 14px -8px rgba(93,72,42,.2); --g-shadow-2: 0 1px 2px rgba(93,72,42,.05), 0 10px 22px -12px rgba(93,72,42,.18), 0 30px 56px -26px rgba(93,72,42,.3); --g-shadow-3: 0 2px 5px rgba(93,72,42,.08), 0 26px 60px -18px rgba(93,72,42,.4); --g-shadow-4: 0 2px 5px rgba(93,72,42,.08), 0 26px 60px -18px rgba(93,72,42,.4); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 1px 3px rgba(93,72,42,.1), 0 6px 14px -8px rgba(93,72,42,.2); --g-e2: 0 1px 2px rgba(93,72,42,.05), 0 10px 22px -12px rgba(93,72,42,.18), 0 30px 56px -26px rgba(93,72,42,.3); --g-e3: 0 2px 5px rgba(93,72,42,.08), 0 26px 60px -18px rgba(93,72,42,.4); --g-e4: 0 2px 5px rgba(93,72,42,.08), 0 26px 60px -18px rgba(93,72,42,.4); --g-lift: 0 2px 5px rgba(93,72,42,.08), 0 26px 60px -18px rgba(93,72,42,.4); /* scrim */ --g-scrim: rgba(43, 42, 40, 0.34); --g-scrim-strong: rgba(43, 42, 40, 0.5); /* radii */ --g-r-xs: 7px; --g-r-sm: 10px; --g-r-md: 12px; --g-r-lg: 18px; --g-r-xl: 23px; --g-r-2xl: 29px; --g-r-ctl: 12px; --g-r-card: 18px; --g-r-chrome: 18px; --g-r-menu: 14px; --g-r-sheet: 23px; --g-r-modal: 23px; --g-r-inner: 12px; /* space + control sizing */ --g-pad-card: 22px; --g-pad-card-tight: 15px; --g-pad-sheet: 26px; --g-pad-page: 22px; --g-gap: 16px; --g-ctl-h: 38px; --g-ctl-h-sm: 30px; --g-ctl-h-lg: 46px; --g-row-h: 44px; /* focus */ --g-focus-color: rgba(156, 74, 40, 0.65); --g-focus-halo: rgba(156, 74, 40, 0.18); --g-focus-ring: 0 0 0 3.5px rgba(156,74,40,.25); /* feedback */ --g-skel: rgba(43, 35, 24, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(43, 35, 24, 0.2); --g-scroll-thumb-hover: rgba(43, 35, 24, 0.34); --g-grabber: rgba(43, 35, 24, 0.32); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 0px; --g-border-c: transparent; --g-btn-primary-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(93,45,20,.3),0 9px 20px -8px rgba(156,74,40,.5); --g-btn-primary-shadow-hover: inset 0 1px 0 rgba(255,255,255,.2),0 2px 4px rgba(93,45,20,.25),0 13px 26px -8px rgba(156,74,40,.55); --g-btn-primary-shadow-press: inset 0 1px 3px rgba(70,32,14,.4); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } html[data-ui-theme="vellum"][data-theme="dark"], [data-ui-theme="vellum"][data-theme="dark"] { color-scheme: dark; --g-theme-name: "Vellum"; --g-theme-blurb: "Warm cream stock, serif headlines, terracotta. An editorial hand."; /* ground */ --g-canvas: #181410; --g-mesh: radial-gradient(60% 45% at 25% 8%,rgba(120,90,50,.16),transparent 70%),radial-gradient(50% 40% at 85% 90%,rgba(60,42,24,.5),transparent 70%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #1f1a13; --g-solid-2: #221d15; --g-solid-3: #2b261e; --g-solid-4: #342f28; --g-solid-sunken: #16130e; /* ink */ --g-text: #f0e8da; --g-text-2: #b0a28a; --g-text-3: #a19887; --g-text-4: #686154; --g-text-on-accent: #241207; --g-placeholder: #8e8676; /* the needle */ --g-accent: #d28360; --g-accent-strong: #d1805c; --g-accent-fill: #c96b42; --g-accent-press: #c26942; --g-accent-soft: rgba(70, 21, 0, 0.37); --g-accent-softer: rgba(70, 21, 0, 0.18); --g-accent-glow: rgba(201, 107, 66, 0.34); /* status */ --g-green: #b7cc85; --g-green-bg: #2C331C; --g-text-on-green: #161b0b; --g-amber: #dbb877; --g-amber-bg: #332812; --g-text-on-amber: #1e1608; --g-blue: #83ace2; --g-blue-bg: rgba(131, 172, 226, 0.16); --g-violet: #af83e2; --g-violet-bg: rgb(50, 36, 66); --g-red: #e17f5f; --g-red-bg: rgba(78, 19, 0, 0.33); --g-text-on-red: #1f0d08; --g-slate: #b0a28a; --g-slate-bg: rgb(59, 54, 44); /* the glass ladder */ --g-fill-1: #1f1a13; --g-fill-2: #221d15; --g-fill-3: #2b261e; --g-fill-4: #342f28; --g-fill-nested: rgba(240,232,218,.07); --g-fill-sunken: rgba(0,0,0,.3); --g-fill-hover: rgba(240,232,218,.04); --g-fill-press: #302921; --g-fill-sel: rgba(70, 21, 0, 0.42); /* blur (constant per rung, NEVER animated) */ --g-blur-1: none; --g-blur-2: none; --g-blur-3: none; --g-blur-4: none; --g-blur-scrim: none; /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 40%); --g-sheen-2: linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 40%); --g-sheen-3: linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 40%); --g-sheen-4: linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 40%); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: inset 0 0 0 1px rgba(240,232,218,.08); --g-edge-2: 0 0 0 0 rgba(0,0,0,0); --g-edge-3: 0 0 0 0 rgba(0,0,0,0); --g-edge-4: 0 0 0 0 rgba(0,0,0,0); --g-hairline: rgba(240,232,218,.09); --g-hairline-strong: rgba(240,232,218,.09); /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 1px 2px rgba(0,0,0,.3); --g-shadow-2: 0 1px 2px rgba(0,0,0,.35), 0 12px 26px -12px rgba(0,0,0,.5), 0 32px 60px -26px rgba(0,0,0,.65); --g-shadow-3: 0 2px 6px rgba(0,0,0,.4), 0 28px 64px -18px rgba(0,0,0,.75); --g-shadow-4: 0 2px 6px rgba(0,0,0,.4), 0 28px 64px -18px rgba(0,0,0,.75); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 1px 2px rgba(0,0,0,.3); --g-e2: 0 1px 2px rgba(0,0,0,.35), 0 12px 26px -12px rgba(0,0,0,.5), 0 32px 60px -26px rgba(0,0,0,.65); --g-e3: 0 2px 6px rgba(0,0,0,.4), 0 28px 64px -18px rgba(0,0,0,.75); --g-e4: 0 2px 6px rgba(0,0,0,.4), 0 28px 64px -18px rgba(0,0,0,.75); --g-lift: 0 2px 6px rgba(0,0,0,.4), 0 28px 64px -18px rgba(0,0,0,.75); /* scrim */ --g-scrim: rgba(0, 0, 0, 0.58); --g-scrim-strong: rgba(0, 0, 0, 0.74); /* radii */ --g-r-xs: 7px; --g-r-sm: 10px; --g-r-md: 12px; --g-r-lg: 18px; --g-r-xl: 23px; --g-r-2xl: 29px; --g-r-ctl: 12px; --g-r-card: 18px; --g-r-chrome: 18px; --g-r-menu: 14px; --g-r-sheet: 23px; --g-r-modal: 23px; --g-r-inner: 12px; /* space + control sizing */ --g-pad-card: 22px; --g-pad-card-tight: 15px; --g-pad-sheet: 26px; --g-pad-page: 22px; --g-gap: 16px; --g-ctl-h: 38px; --g-ctl-h-sm: 30px; --g-ctl-h-lg: 46px; --g-row-h: 44px; /* focus */ --g-focus-color: rgba(210, 131, 96, 0.75); --g-focus-halo: rgba(210, 131, 96, 0.22); --g-focus-ring: 0 0 0 3.5px rgba(156,74,40,.25); /* feedback */ --g-skel: rgba(255, 255, 255, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(255, 255, 255, 0.20); --g-scroll-thumb-hover: rgba(255, 255, 255, 0.34); --g-grabber: rgba(235, 235, 245, 0.34); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 0px; --g-border-c: transparent; --g-btn-primary-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.4),0 10px 22px -8px rgba(201,107,66,.4); --g-btn-primary-shadow-hover: inset 0 1px 0 rgba(255,255,255,.25),0 2px 4px rgba(0,0,0,.35),0 14px 28px -8px rgba(201,107,66,.45); --g-btn-primary-shadow-press: inset 0 1px 3px rgba(0,0,0,.35); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } @media (prefers-color-scheme: dark) { html[data-ui-theme="vellum"]:not([data-theme="light"]), [data-ui-theme="vellum"]:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --g-theme-name: "Vellum"; --g-theme-blurb: "Warm cream stock, serif headlines, terracotta. An editorial hand."; /* ground */ --g-canvas: #181410; --g-mesh: radial-gradient(60% 45% at 25% 8%,rgba(120,90,50,.16),transparent 70%),radial-gradient(50% 40% at 85% 90%,rgba(60,42,24,.5),transparent 70%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #1f1a13; --g-solid-2: #221d15; --g-solid-3: #2b261e; --g-solid-4: #342f28; --g-solid-sunken: #16130e; /* ink */ --g-text: #f0e8da; --g-text-2: #b0a28a; --g-text-3: #a19887; --g-text-4: #686154; --g-text-on-accent: #241207; --g-placeholder: #8e8676; /* the needle */ --g-accent: #d28360; --g-accent-strong: #d1805c; --g-accent-fill: #c96b42; --g-accent-press: #c26942; --g-accent-soft: rgba(70, 21, 0, 0.37); --g-accent-softer: rgba(70, 21, 0, 0.18); --g-accent-glow: rgba(201, 107, 66, 0.34); /* status */ --g-green: #b7cc85; --g-green-bg: #2C331C; --g-text-on-green: #161b0b; --g-amber: #dbb877; --g-amber-bg: #332812; --g-text-on-amber: #1e1608; --g-blue: #83ace2; --g-blue-bg: rgba(131, 172, 226, 0.16); --g-violet: #af83e2; --g-violet-bg: rgb(50, 36, 66); --g-red: #e17f5f; --g-red-bg: rgba(78, 19, 0, 0.33); --g-text-on-red: #1f0d08; --g-slate: #b0a28a; --g-slate-bg: rgb(59, 54, 44); /* the glass ladder */ --g-fill-1: #1f1a13; --g-fill-2: #221d15; --g-fill-3: #2b261e; --g-fill-4: #342f28; --g-fill-nested: rgba(240,232,218,.07); --g-fill-sunken: rgba(0,0,0,.3); --g-fill-hover: rgba(240,232,218,.04); --g-fill-press: #302921; --g-fill-sel: rgba(70, 21, 0, 0.42); /* blur (constant per rung, NEVER animated) */ --g-blur-1: none; --g-blur-2: none; --g-blur-3: none; --g-blur-4: none; --g-blur-scrim: none; /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 40%); --g-sheen-2: linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 40%); --g-sheen-3: linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 40%); --g-sheen-4: linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 40%); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: inset 0 0 0 1px rgba(240,232,218,.08); --g-edge-2: 0 0 0 0 rgba(0,0,0,0); --g-edge-3: 0 0 0 0 rgba(0,0,0,0); --g-edge-4: 0 0 0 0 rgba(0,0,0,0); --g-hairline: rgba(240,232,218,.09); --g-hairline-strong: rgba(240,232,218,.09); /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 1px 2px rgba(0,0,0,.3); --g-shadow-2: 0 1px 2px rgba(0,0,0,.35), 0 12px 26px -12px rgba(0,0,0,.5), 0 32px 60px -26px rgba(0,0,0,.65); --g-shadow-3: 0 2px 6px rgba(0,0,0,.4), 0 28px 64px -18px rgba(0,0,0,.75); --g-shadow-4: 0 2px 6px rgba(0,0,0,.4), 0 28px 64px -18px rgba(0,0,0,.75); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 1px 2px rgba(0,0,0,.3); --g-e2: 0 1px 2px rgba(0,0,0,.35), 0 12px 26px -12px rgba(0,0,0,.5), 0 32px 60px -26px rgba(0,0,0,.65); --g-e3: 0 2px 6px rgba(0,0,0,.4), 0 28px 64px -18px rgba(0,0,0,.75); --g-e4: 0 2px 6px rgba(0,0,0,.4), 0 28px 64px -18px rgba(0,0,0,.75); --g-lift: 0 2px 6px rgba(0,0,0,.4), 0 28px 64px -18px rgba(0,0,0,.75); /* scrim */ --g-scrim: rgba(0, 0, 0, 0.58); --g-scrim-strong: rgba(0, 0, 0, 0.74); /* radii */ --g-r-xs: 7px; --g-r-sm: 10px; --g-r-md: 12px; --g-r-lg: 18px; --g-r-xl: 23px; --g-r-2xl: 29px; --g-r-ctl: 12px; --g-r-card: 18px; --g-r-chrome: 18px; --g-r-menu: 14px; --g-r-sheet: 23px; --g-r-modal: 23px; --g-r-inner: 12px; /* space + control sizing */ --g-pad-card: 22px; --g-pad-card-tight: 15px; --g-pad-sheet: 26px; --g-pad-page: 22px; --g-gap: 16px; --g-ctl-h: 38px; --g-ctl-h-sm: 30px; --g-ctl-h-lg: 46px; --g-row-h: 44px; /* focus */ --g-focus-color: rgba(210, 131, 96, 0.75); --g-focus-halo: rgba(210, 131, 96, 0.22); --g-focus-ring: 0 0 0 3.5px rgba(156,74,40,.25); /* feedback */ --g-skel: rgba(255, 255, 255, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(255, 255, 255, 0.20); --g-scroll-thumb-hover: rgba(255, 255, 255, 0.34); --g-grabber: rgba(235, 235, 245, 0.34); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 0px; --g-border-c: transparent; --g-btn-primary-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.4),0 10px 22px -8px rgba(201,107,66,.4); --g-btn-primary-shadow-hover: inset 0 1px 0 rgba(255,255,255,.25),0 2px 4px rgba(0,0,0,.35),0 14px 28px -8px rgba(201,107,66,.45); --g-btn-primary-shadow-press: inset 0 1px 3px rgba(0,0,0,.35); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } } /* ============================================================================ 09 VERDE — Bank-note green on bone, engraved double rules, gold accents. worst body-ink contrast — light 4.60:1 · dark 4.62:1 ============================================================================ */ :root[data-ui-theme="verde"], [data-ui-theme="verde"] { color-scheme: light; --g-theme-name: "Verde"; --g-theme-blurb: "Bank-note green on bone, engraved double rules, gold accents."; /* ground */ --g-canvas: #f1ede1; --g-mesh: repeating-linear-gradient(0deg,rgba(60,80,60,.016) 0 1px,transparent 1px 3px),radial-gradient(70% 50% at 50% 0%,rgba(255,253,244,.8),transparent 70%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #f6f3e8; --g-solid-2: #f9f6ec; /* R6-27b (v713, the R6-23b pattern): fill-3 maps to solid-3 in reduced-transparency / lite mode; #fbf9f3 was dL* +1.1 off solid-2. Matches the new (already opaque) fill-3 (dL* -3.6). */ --g-solid-3: #efecdd; --g-solid-4: #fdfcf8; --g-solid-sunken: #f2eee3; /* ink */ --g-text: #1c3327; --g-text-2: #48584c; --g-text-3: #616e5f; --g-text-4: #a5ab9f; --g-text-on-accent: #f3efdf; --g-placeholder: #788275; /* the needle */ --g-accent: #1e3a2c; --g-accent-strong: #1a3226; --g-accent-fill: #1e3a2c; --g-accent-press: #172d22; --g-accent-soft: rgba(30, 58, 44, 0.12); --g-accent-softer: rgba(30, 58, 44, 0.055); --g-accent-glow: rgba(30, 58, 44, 0.3); /* status */ --g-green: #3e6032; --g-green-bg: #E6EBD8; --g-text-on-green: #f2f7f0; --g-amber: #826426; --g-amber-bg: #F2E8D2; --g-text-on-amber: #faf6ed; --g-blue: #154584; --g-blue-bg: rgba(21, 69, 132, 0.14); --g-violet: #491584; --g-violet-bg: rgba(73, 21, 132, 0.14); --g-red: #8e3a22; --g-red-bg: rgba(142, 58, 34, 0.14); --g-text-on-red: #faf0ed; --g-slate: #48584c; --g-slate-bg: rgba(72, 88, 76, 0.14); /* the glass ladder */ --g-fill-1: #f6f3e8; --g-fill-2: #f9f6ec; /* R6-27 (v713, same class as ink/ledger light R6-23): was #fbf9f3 — dL* +1.1 off fill-2, a near-invisible hover step (headroom above #f9f6ec is tiny, so the step goes DARKER, the ledger/ink-light direction). One step of deeper parchment: dL* -3.6 vs fill-2 — the text-3 floor (#616e5f must stay >=4.5 resting on menus/sheets) caps the step short of the ~4.5 family norm. Tiers on fill-3: --g-text 11.41 / --g-text-2 6.38 / --g-text-3 4.54 — every tier >=4.5 (opaque, so canvas and nested composites are equal). */ --g-fill-3: #efecdd; --g-fill-4: #fdfcf8; --g-fill-nested: #F3EFE0; --g-fill-sunken: #FDFBF4; --g-fill-hover: rgba(28,51,39,.035); --g-fill-press: rgba(28,51,39,.05); --g-fill-sel: rgba(30, 58, 44, 0.12); /* blur (constant per rung, NEVER animated) */ --g-blur-1: none; --g-blur-2: none; --g-blur-3: none; --g-blur-4: none; --g-blur-scrim: none; /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-2: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-3: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-4: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: 0 0 0 0 rgba(0,0,0,0); --g-edge-2: 0 0 0 0 rgba(0,0,0,0); --g-edge-3: 0 0 0 0 rgba(0,0,0,0); --g-edge-4: 0 0 0 0 rgba(0,0,0,0); --g-hairline: rgba(28,51,39,.14); --g-hairline-strong: rgba(28,51,39,.14); /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 0 0 1px rgba(28,51,39,.45); --g-shadow-2: 0 0 0 1px rgba(28,51,39,.32), 0 1px 3px rgba(28,51,39,.07), 0 12px 26px -16px rgba(28,51,39,.3); --g-shadow-3: 0 0 0 1px rgba(28,51,39,.35), 0 2px 5px rgba(28,51,39,.08), 0 22px 48px -16px rgba(28,51,39,.35); --g-shadow-4: 0 0 0 1px rgba(28,51,39,.35), 0 2px 5px rgba(28,51,39,.08), 0 22px 48px -16px rgba(28,51,39,.35); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 0 0 1px rgba(28,51,39,.45); --g-e2: 0 0 0 1px rgba(28,51,39,.32), 0 1px 3px rgba(28,51,39,.07), 0 12px 26px -16px rgba(28,51,39,.3); --g-e3: 0 0 0 1px rgba(28,51,39,.35), 0 2px 5px rgba(28,51,39,.08), 0 22px 48px -16px rgba(28,51,39,.35); --g-e4: 0 0 0 1px rgba(28,51,39,.35), 0 2px 5px rgba(28,51,39,.08), 0 22px 48px -16px rgba(28,51,39,.35); --g-lift: 0 0 0 1px rgba(28,51,39,.35), 0 2px 5px rgba(28,51,39,.08), 0 22px 48px -16px rgba(28,51,39,.35); /* scrim */ --g-scrim: rgba(43, 43, 41, 0.34); --g-scrim-strong: rgba(43, 43, 41, 0.5); /* radii */ --g-r-xs: 5px; --g-r-sm: 7px; --g-r-md: 8px; --g-r-lg: 10px; --g-r-xl: 13px; --g-r-2xl: 16px; --g-r-ctl: 8px; --g-r-card: 10px; --g-r-chrome: 10px; --g-r-menu: 10px; --g-r-sheet: 13px; --g-r-modal: 13px; --g-r-inner: 8px; /* space + control sizing */ --g-pad-card: 24px; --g-pad-card-tight: 17px; --g-pad-sheet: 29px; --g-pad-page: 24px; --g-gap: 16px; --g-ctl-h: 38px; --g-ctl-h-sm: 30px; --g-ctl-h-lg: 46px; --g-row-h: 44px; /* focus */ --g-focus-color: rgba(30, 58, 44, 0.65); --g-focus-halo: rgba(30, 58, 44, 0.18); --g-focus-ring: 0 0 0 1px #A8823C,0 0 0 4px rgba(168,130,60,.25); /* feedback */ --g-skel: rgba(28, 51, 39, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(28, 51, 39, 0.2); --g-scroll-thumb-hover: rgba(28, 51, 39, 0.34); --g-grabber: rgba(28, 51, 39, 0.32); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 0px; --g-border-c: transparent; --g-btn-primary-shadow: 0 0 0 1px #1E3A2C,0 1px 2px rgba(20,38,28,.35),0 7px 16px -6px rgba(30,58,44,.45); --g-btn-primary-shadow-hover: 0 0 0 1px #1E3A2C,0 2px 4px rgba(20,38,28,.3),0 10px 22px -6px rgba(30,58,44,.5); --g-btn-primary-shadow-press: 0 0 0 1px #162C21,inset 0 1px 3px rgba(0,0,0,.35); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 4px; --g-rule-c: rgba(28,51,39,.14); --g-rule-r: 6px; } html[data-ui-theme="verde"][data-theme="dark"], [data-ui-theme="verde"][data-theme="dark"] { color-scheme: dark; --g-theme-name: "Verde"; --g-theme-blurb: "Bank-note green on bone, engraved double rules, gold accents."; /* ground */ --g-canvas: #0e1611; --g-mesh: repeating-linear-gradient(0deg,rgba(220,235,215,.012) 0 1px,transparent 1px 3px),radial-gradient(70% 50% at 50% 0%,rgba(40,70,52,.3),transparent 70%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #131d17; --g-solid-2: #152019; --g-solid-3: #1e2922; --g-solid-4: #28322b; --g-solid-sunken: #0e1510; /* ink */ --g-text: #eae6d6; --g-text-2: #a9b2a0; --g-text-3: #929b8f; --g-text-4: #5a645a; --g-text-on-accent: #1a150a; --g-placeholder: #7f897e; /* the needle */ --g-accent: #c9a45c; --g-accent-strong: #d1b173; --g-accent-fill: #c9a45c; --g-accent-press: #9d8048; --g-accent-soft: rgba(73, 48, 0, 0.35); --g-accent-softer: rgba(73, 48, 0, 0.16); --g-accent-glow: rgba(201, 164, 92, 0.34); /* status */ --g-green: #a9c778; --g-green-bg: #1E2A1C; --g-text-on-green: #151b0b; --g-amber: #d9b96e; --g-amber-bg: #2A2411; --g-text-on-amber: #1e1808; --g-blue: #83ace2; --g-blue-bg: rgba(131, 172, 226, 0.16); --g-violet: #af83e2; --g-violet-bg: rgb(51, 37, 67); --g-red: #db8061; --g-red-bg: rgba(75, 19, 0, 0.32); --g-text-on-red: #1f0d08; --g-slate: #a9b2a0; --g-slate-bg: rgb(62, 64, 60); /* the glass ladder */ --g-fill-1: #131d17; --g-fill-2: #152019; --g-fill-3: #1e2922; --g-fill-4: #28322b; --g-fill-nested: #1A241C; --g-fill-sunken: #0F1812; --g-fill-hover: rgba(234,230,214,.04); --g-fill-press: rgba(234,230,214,.05); --g-fill-sel: rgba(73, 48, 0, 0.39); /* blur (constant per rung, NEVER animated) */ --g-blur-1: none; --g-blur-2: none; --g-blur-3: none; --g-blur-4: none; --g-blur-scrim: none; /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-2: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-3: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-4: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: 0 0 0 0 rgba(0,0,0,0); --g-edge-2: 0 0 0 0 rgba(0,0,0,0); --g-edge-3: 0 0 0 0 rgba(0,0,0,0); --g-edge-4: 0 0 0 0 rgba(0,0,0,0); --g-hairline: rgba(234,230,214,.12); --g-hairline-strong: rgba(234,230,214,.12); /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 0 0 1px rgba(234,230,214,.35); --g-shadow-2: 0 0 0 1px rgba(201,164,92,.34), 0 1px 3px rgba(0,0,0,.35), 0 14px 30px -16px rgba(0,0,0,.6); --g-shadow-3: 0 0 0 1px rgba(201,164,92,.38), 0 2px 6px rgba(0,0,0,.4), 0 24px 52px -16px rgba(0,0,0,.75); --g-shadow-4: 0 0 0 1px rgba(201,164,92,.38), 0 2px 6px rgba(0,0,0,.4), 0 24px 52px -16px rgba(0,0,0,.75); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 0 0 1px rgba(234,230,214,.35); --g-e2: 0 0 0 1px rgba(201,164,92,.34), 0 1px 3px rgba(0,0,0,.35), 0 14px 30px -16px rgba(0,0,0,.6); --g-e3: 0 0 0 1px rgba(201,164,92,.38), 0 2px 6px rgba(0,0,0,.4), 0 24px 52px -16px rgba(0,0,0,.75); --g-e4: 0 0 0 1px rgba(201,164,92,.38), 0 2px 6px rgba(0,0,0,.4), 0 24px 52px -16px rgba(0,0,0,.75); --g-lift: 0 0 0 1px rgba(201,164,92,.38), 0 2px 6px rgba(0,0,0,.4), 0 24px 52px -16px rgba(0,0,0,.75); /* scrim */ --g-scrim: rgba(0, 0, 0, 0.58); --g-scrim-strong: rgba(0, 0, 0, 0.74); /* radii */ --g-r-xs: 5px; --g-r-sm: 7px; --g-r-md: 8px; --g-r-lg: 10px; --g-r-xl: 13px; --g-r-2xl: 16px; --g-r-ctl: 8px; --g-r-card: 10px; --g-r-chrome: 10px; --g-r-menu: 10px; --g-r-sheet: 13px; --g-r-modal: 13px; --g-r-inner: 8px; /* space + control sizing */ --g-pad-card: 24px; --g-pad-card-tight: 17px; --g-pad-sheet: 29px; --g-pad-page: 24px; --g-gap: 16px; --g-ctl-h: 38px; --g-ctl-h-sm: 30px; --g-ctl-h-lg: 46px; --g-row-h: 44px; /* focus */ --g-focus-color: rgba(201, 164, 92, 0.75); --g-focus-halo: rgba(201, 164, 92, 0.22); --g-focus-ring: 0 0 0 1px #C9A45C,0 0 0 4px rgba(201,164,92,.22); /* feedback */ --g-skel: rgba(255, 255, 255, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(255, 255, 255, 0.20); --g-scroll-thumb-hover: rgba(255, 255, 255, 0.34); --g-grabber: rgba(235, 235, 245, 0.34); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 0px; --g-border-c: transparent; --g-btn-primary-shadow: 0 0 0 1px #C9A45C,0 1px 2px rgba(0,0,0,.4),0 8px 18px -6px rgba(201,164,92,.35); --g-btn-primary-shadow-hover: 0 0 0 1px #D6B26B,0 2px 4px rgba(0,0,0,.35),0 11px 24px -6px rgba(201,164,92,.4); --g-btn-primary-shadow-press: 0 0 0 1px #B08E48,inset 0 1px 3px rgba(0,0,0,.3); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 4px; --g-rule-c: rgba(201,164,92,.16); --g-rule-r: 6px; } @media (prefers-color-scheme: dark) { html[data-ui-theme="verde"]:not([data-theme="light"]), [data-ui-theme="verde"]:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --g-theme-name: "Verde"; --g-theme-blurb: "Bank-note green on bone, engraved double rules, gold accents."; /* ground */ --g-canvas: #0e1611; --g-mesh: repeating-linear-gradient(0deg,rgba(220,235,215,.012) 0 1px,transparent 1px 3px),radial-gradient(70% 50% at 50% 0%,rgba(40,70,52,.3),transparent 70%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #131d17; --g-solid-2: #152019; --g-solid-3: #1e2922; --g-solid-4: #28322b; --g-solid-sunken: #0e1510; /* ink */ --g-text: #eae6d6; --g-text-2: #a9b2a0; --g-text-3: #929b8f; --g-text-4: #5a645a; --g-text-on-accent: #1a150a; --g-placeholder: #7f897e; /* the needle */ --g-accent: #c9a45c; --g-accent-strong: #d1b173; --g-accent-fill: #c9a45c; --g-accent-press: #9d8048; --g-accent-soft: rgba(73, 48, 0, 0.35); --g-accent-softer: rgba(73, 48, 0, 0.16); --g-accent-glow: rgba(201, 164, 92, 0.34); /* status */ --g-green: #a9c778; --g-green-bg: #1E2A1C; --g-text-on-green: #151b0b; --g-amber: #d9b96e; --g-amber-bg: #2A2411; --g-text-on-amber: #1e1808; --g-blue: #83ace2; --g-blue-bg: rgba(131, 172, 226, 0.16); --g-violet: #af83e2; --g-violet-bg: rgb(51, 37, 67); --g-red: #db8061; --g-red-bg: rgba(75, 19, 0, 0.32); --g-text-on-red: #1f0d08; --g-slate: #a9b2a0; --g-slate-bg: rgb(62, 64, 60); /* the glass ladder */ --g-fill-1: #131d17; --g-fill-2: #152019; --g-fill-3: #1e2922; --g-fill-4: #28322b; --g-fill-nested: #1A241C; --g-fill-sunken: #0F1812; --g-fill-hover: rgba(234,230,214,.04); --g-fill-press: rgba(234,230,214,.05); --g-fill-sel: rgba(73, 48, 0, 0.39); /* blur (constant per rung, NEVER animated) */ --g-blur-1: none; --g-blur-2: none; --g-blur-3: none; --g-blur-4: none; --g-blur-scrim: none; /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-2: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-3: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-4: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: 0 0 0 0 rgba(0,0,0,0); --g-edge-2: 0 0 0 0 rgba(0,0,0,0); --g-edge-3: 0 0 0 0 rgba(0,0,0,0); --g-edge-4: 0 0 0 0 rgba(0,0,0,0); --g-hairline: rgba(234,230,214,.12); --g-hairline-strong: rgba(234,230,214,.12); /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 0 0 1px rgba(234,230,214,.35); --g-shadow-2: 0 0 0 1px rgba(201,164,92,.34), 0 1px 3px rgba(0,0,0,.35), 0 14px 30px -16px rgba(0,0,0,.6); --g-shadow-3: 0 0 0 1px rgba(201,164,92,.38), 0 2px 6px rgba(0,0,0,.4), 0 24px 52px -16px rgba(0,0,0,.75); --g-shadow-4: 0 0 0 1px rgba(201,164,92,.38), 0 2px 6px rgba(0,0,0,.4), 0 24px 52px -16px rgba(0,0,0,.75); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 0 0 1px rgba(234,230,214,.35); --g-e2: 0 0 0 1px rgba(201,164,92,.34), 0 1px 3px rgba(0,0,0,.35), 0 14px 30px -16px rgba(0,0,0,.6); --g-e3: 0 0 0 1px rgba(201,164,92,.38), 0 2px 6px rgba(0,0,0,.4), 0 24px 52px -16px rgba(0,0,0,.75); --g-e4: 0 0 0 1px rgba(201,164,92,.38), 0 2px 6px rgba(0,0,0,.4), 0 24px 52px -16px rgba(0,0,0,.75); --g-lift: 0 0 0 1px rgba(201,164,92,.38), 0 2px 6px rgba(0,0,0,.4), 0 24px 52px -16px rgba(0,0,0,.75); /* scrim */ --g-scrim: rgba(0, 0, 0, 0.58); --g-scrim-strong: rgba(0, 0, 0, 0.74); /* radii */ --g-r-xs: 5px; --g-r-sm: 7px; --g-r-md: 8px; --g-r-lg: 10px; --g-r-xl: 13px; --g-r-2xl: 16px; --g-r-ctl: 8px; --g-r-card: 10px; --g-r-chrome: 10px; --g-r-menu: 10px; --g-r-sheet: 13px; --g-r-modal: 13px; --g-r-inner: 8px; /* space + control sizing */ --g-pad-card: 24px; --g-pad-card-tight: 17px; --g-pad-sheet: 29px; --g-pad-page: 24px; --g-gap: 16px; --g-ctl-h: 38px; --g-ctl-h-sm: 30px; --g-ctl-h-lg: 46px; --g-row-h: 44px; /* focus */ --g-focus-color: rgba(201, 164, 92, 0.75); --g-focus-halo: rgba(201, 164, 92, 0.22); --g-focus-ring: 0 0 0 1px #C9A45C,0 0 0 4px rgba(201,164,92,.22); /* feedback */ --g-skel: rgba(255, 255, 255, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(255, 255, 255, 0.20); --g-scroll-thumb-hover: rgba(255, 255, 255, 0.34); --g-grabber: rgba(235, 235, 245, 0.34); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 0px; --g-border-c: transparent; --g-btn-primary-shadow: 0 0 0 1px #C9A45C,0 1px 2px rgba(0,0,0,.4),0 8px 18px -6px rgba(201,164,92,.35); --g-btn-primary-shadow-hover: 0 0 0 1px #D6B26B,0 2px 4px rgba(0,0,0,.35),0 11px 24px -6px rgba(201,164,92,.4); --g-btn-primary-shadow-press: 0 0 0 1px #B08E48,inset 0 1px 3px rgba(0,0,0,.3); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 4px; --g-rule-c: rgba(201,164,92,.16); --g-rule-r: 6px; } } /* ============================================================================ 10 INK — Hard black outlines, 4px offset shadows, near-square corners. Brutal. worst body-ink contrast — light 4.65:1 · dark 4.53:1 ============================================================================ */ :root[data-ui-theme="ink"], [data-ui-theme="ink"] { color-scheme: light; --g-theme-name: "Ink"; --g-theme-blurb: "Hard black outlines, 4px offset shadows, near-square corners. Brutal."; /* ground */ --g-canvas: #f5f2ea; --g-mesh: radial-gradient(90% 60% at 50% 0%,rgba(255,255,255,.6),transparent 75%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #fcfaf8; --g-solid-2: #ffffff; /* R6-23b: glass.css §3 maps fill-3 → solid-3 in reduced-transparency / lite mode; #ffffff == solid-2 meant the a11y mode kept the ZERO hover ramp the R6-18 v711 fill-3 fix removed. Matches fill-3's paper tone (ΔL* −4.5). */ --g-solid-3: #f4f2ec; --g-solid-4: #ffffff; --g-solid-sunken: #f7f4ed; /* ink */ --g-text: #16150f; --g-text-2: #45443a; --g-text-3: #6e6d64; --g-text-4: #afafaa; --g-text-on-accent: #f5f2ea; --g-placeholder: #84837b; /* the needle */ --g-accent: #16150f; --g-accent-strong: #13120d; --g-accent-fill: #16150f; --g-accent-press: #11100c; --g-accent-soft: rgba(22, 21, 15, 0.12); --g-accent-softer: rgba(22, 21, 15, 0.055); --g-accent-glow: rgba(22, 21, 15, 0.3); /* status */ /* RUN5 §3 Ink: was #000000 on #16150F (invisible chip text). --g-green is also a standalone TEXT color at 50+ js call sites, so it must stay ink; the acid lime moves to the bg → chip = ink-on-lime, 14.9:1 (re-computed). */ --g-green: #16150F; --g-green-bg: #D8F25A; --g-text-on-green: #f6f5f1; --g-amber: #16150f; /* V738-2 Ink: was #FFFFFF — byte-identical to --g-solid-2 AND --g-solid-4, so the amber chip had NO PLATE (ΔE76 0.00 on both white rungs, HSL saturation 0.000 on all six) while its lime and pink siblings rendered as pills. Same class as V724-2 / V726-a: contrast was never the problem (18.29:1), IDENTITY was. Retinted to the acid-gold twin of --g-green-bg #D8F25A: same construction (opaque, gamut-edge chroma, near-black ink on top), OKLCH C 0.169 vs the lime's 0.176, 31.1° of OKLCH hue between them so the two chips can never be confused. Measured: worst ΔE76 vs the six enforced rungs 77.29 (floor 11.29 = this theme's own red chip), --g-amber on it 11.71:1, plate-rule violations 0/6. */ --g-amber-bg: #FFC720; --g-text-on-amber: #f6f5f1; --g-blue: #154584; --g-blue-bg: rgba(21, 69, 132, 0.14); --g-violet: #491584; --g-violet-bg: rgba(73, 21, 132, 0.14); --g-red: #b62718; --g-red-bg: rgba(255, 217, 213, 0.79); --g-text-on-red: #fcf4f3; --g-slate: #45443a; --g-slate-bg: rgba(69, 68, 58, 0.14); /* the glass ladder */ --g-fill-1: #fcfaf8; --g-fill-2: #ffffff; /* R6-18 v711: was #ffffff (== fill-2), so the fill-2→fill-3 hover ramp on the four home surfaces computed ZERO change. One step of warm paper (ΔL* 4.5 — the same step size ink-dark's #1b1b17→#242420 uses). Text on fill-3 panes: --g-text 16.3:1 · --g-text-2 8.8:1 · --g-text-3 4.65:1, all ≥4.5. Menus/ sheets rest on fill-3 (glass.css §12) and pick up this paper tone; item hover #F1EDDF stays ΔL* 1.8 off the pane — inside the family norm (ink-dark −2.0, pop-dark −1.3). */ --g-fill-3: #f4f2ec; --g-fill-4: #ffffff; /* RUN5 §3 Ink: was #16150F — glass.css uses fill-nested for FOCUSED input bodies and cards nested in modals, so black here made typed text (--g-text #16150f) invisible. White pane + 1.5px border IS the Ink way to nest. */ --g-fill-nested: #FFFFFF; --g-fill-sunken: #FFFFFF; --g-fill-hover: #F1EDDF; --g-fill-press: #F5F2EA; --g-fill-sel: rgba(22, 21, 15, 0.12); /* blur (constant per rung, NEVER animated) */ --g-blur-1: none; --g-blur-2: none; --g-blur-3: none; --g-blur-4: none; --g-blur-scrim: none; /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-2: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-3: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-4: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: 0 0 0 0 rgba(0,0,0,0); --g-edge-2: 0 0 0 0 rgba(0,0,0,0); --g-edge-3: 0 0 0 0 rgba(0,0,0,0); --g-edge-4: 0 0 0 0 rgba(0,0,0,0); --g-hairline: rgba(22,21,15,.2); --g-hairline-strong: #16150F; /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 3px 3px 0 rgba(22,21,15,.9); --g-shadow-2: 4px 4px 0 rgba(22,21,15,.9); --g-shadow-3: 5px 5px 0 rgba(22,21,15,.9); --g-shadow-4: 5px 5px 0 rgba(22,21,15,.9); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 3px 3px 0 rgba(22,21,15,.9); --g-e2: 4px 4px 0 rgba(22,21,15,.9); --g-e3: 5px 5px 0 rgba(22,21,15,.9); --g-e4: 5px 5px 0 rgba(22,21,15,.9); --g-lift: 5px 5px 0 rgba(22,21,15,.9); /* scrim */ --g-scrim: rgba(44, 44, 42, 0.34); --g-scrim-strong: rgba(44, 44, 42, 0.5); /* radii */ /* RUN5 §3 Ink "radii ≤5px everywhere": chips/badges/segments/switch/progress read --g-r-pill (glass.css §9/§10); the 999px default was the last round ghost in an otherwise square theme. */ --g-r-pill: 3px; --g-r-xs: 2px; --g-r-sm: 3px; --g-r-md: 3px; --g-r-lg: 3px; --g-r-xl: 4px; --g-r-2xl: 5px; --g-r-ctl: 3px; --g-r-card: 3px; --g-r-chrome: 3px; --g-r-menu: 3px; --g-r-sheet: 4px; --g-r-modal: 4px; --g-r-inner: 4px; /* space + control sizing */ --g-pad-card: 20px; --g-pad-card-tight: 14px; --g-pad-sheet: 24px; --g-pad-page: 20px; --g-gap: 14px; --g-ctl-h: 38px; --g-ctl-h-sm: 30px; --g-ctl-h-lg: 46px; --g-row-h: 44px; /* focus */ --g-focus-color: rgba(22, 21, 15, 0.65); --g-focus-halo: rgba(22, 21, 15, 0.18); --g-focus-ring: 3px 3px 0 #E0301E; /* feedback */ --g-skel: rgba(22, 21, 15, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(22, 21, 15, 0.2); --g-scroll-thumb-hover: rgba(22, 21, 15, 0.34); --g-grabber: rgba(22, 21, 15, 0.32); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 1.5px; --g-border-c: #16150F; --g-btn-primary-shadow: 3px 3px 0 #E0301E; --g-btn-primary-shadow-hover: 4px 4px 0 #E0301E; --g-btn-primary-shadow-press: 0 0 0 #E0301E; --g-press-x: 3px; --g-press-y: 3px; --g-press-scale: 1; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } html[data-ui-theme="ink"][data-theme="dark"], [data-ui-theme="ink"][data-theme="dark"] { color-scheme: dark; --g-theme-name: "Ink"; --g-theme-blurb: "Hard black outlines, 4px offset shadows, near-square corners. Brutal."; /* ground */ --g-canvas: #131310; --g-mesh: linear-gradient(#131310 0%, #131310 100%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #181815; --g-solid-2: #1b1b17; --g-solid-3: #242420; --g-solid-4: #2d2d2a; --g-solid-sunken: #12120f; /* ink */ --g-text: #edeae0; --g-text-2: #b5b2a6; --g-text-3: #969489; --g-text-4: #5f5e56; --g-text-on-accent: #16150f; --g-placeholder: #848278; /* the needle */ --g-accent: #edeae0; --g-accent-strong: #f0ede4; --g-accent-fill: #edeae0; --g-accent-press: #b9b7af; --g-accent-soft: rgba(237, 234, 224, 0.16); --g-accent-softer: rgba(237, 234, 224, 0.075); --g-accent-glow: rgba(237, 234, 224, 0.34); /* status */ /* RUN5 §3 Ink dark: was #ffffff on lime (1.4:1, invisible). Same rule as light, mirrored: lime is the readable standalone TEXT color in dark (11.3:1 on the worst fill), ink becomes the badge bg → lime-on-ink 14.9:1. */ --g-green: #D8F25A; --g-green-bg: #16150F; --g-text-on-green: #1b1f08; --g-amber: #edeae0; /* V738-2 Ink dark twin: was #1B1B17 — byte-identical to --g-solid-2, ΔE76 0.00. Same fix, mirrored: a deep amber that carries real chroma (OKLCH C 0.0795 vs the old 0.0076, HSL saturation 1.000 vs 0.080) at the same OKLCH hue as the light plate (86.8 vs 87.2), so the chip keeps ONE identity across modes. Measured: worst ΔE76 vs the six rungs 38.01, --g-amber on it 8.07:1, plate-rule 0/6. Edit this and the :not([data-theme="light"]) mirror together or not at all. */ --g-amber-bg: #574100; --g-text-on-amber: #18160e; --g-blue: #83ace2; --g-blue-bg: rgba(131, 172, 226, 0.16); --g-violet: #af83e2; --g-violet-bg: rgb(50, 36, 66); --g-red: #ff5d4c; --g-red-bg: rgba(75, 7, 0, 0.39); --g-text-on-red: #1f0a08; --g-slate: #b5b2a6; --g-slate-bg: rgba(181, 178, 166, 0.16); /* the glass ladder */ --g-fill-1: #181815; --g-fill-2: #1b1b17; --g-fill-3: #242420; --g-fill-4: #2d2d2a; /* RUN5 §3 Ink dark: was #EDEAE0 — cream focused-input body under cream --g-text made typed text invisible (same bug as light, mirrored). One rung above the pane, cream 1.5px border does the separating. */ --g-fill-nested: #242420; --g-fill-sunken: #131310; --g-fill-hover: #20201B; --g-fill-press: #232320; --g-fill-sel: rgba(237, 234, 224, 0.18); /* blur (constant per rung, NEVER animated) */ --g-blur-1: none; --g-blur-2: none; --g-blur-3: none; --g-blur-4: none; --g-blur-scrim: none; /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-2: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-3: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-4: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: 0 0 0 0 rgba(0,0,0,0); --g-edge-2: 0 0 0 0 rgba(0,0,0,0); --g-edge-3: 0 0 0 0 rgba(0,0,0,0); --g-edge-4: 0 0 0 0 rgba(0,0,0,0); --g-hairline: rgba(237,234,224,.24); --g-hairline-strong: #EDEAE0; /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 3px 3px 0 rgba(237,234,224,.22); --g-shadow-2: 4px 4px 0 rgba(237,234,224,.22); --g-shadow-3: 5px 5px 0 rgba(237,234,224,.22); --g-shadow-4: 5px 5px 0 rgba(237,234,224,.22); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 3px 3px 0 rgba(237,234,224,.22); --g-e2: 4px 4px 0 rgba(237,234,224,.22); --g-e3: 5px 5px 0 rgba(237,234,224,.22); --g-e4: 5px 5px 0 rgba(237,234,224,.22); --g-lift: 5px 5px 0 rgba(237,234,224,.22); /* scrim */ --g-scrim: rgba(0, 0, 0, 0.58); --g-scrim-strong: rgba(0, 0, 0, 0.74); /* radii */ /* RUN5 §3 Ink "radii ≤5px everywhere" — same as the light block. */ --g-r-pill: 3px; --g-r-xs: 2px; --g-r-sm: 3px; --g-r-md: 3px; --g-r-lg: 3px; --g-r-xl: 4px; --g-r-2xl: 5px; --g-r-ctl: 3px; --g-r-card: 3px; --g-r-chrome: 3px; --g-r-menu: 3px; --g-r-sheet: 4px; --g-r-modal: 4px; --g-r-inner: 4px; /* space + control sizing */ --g-pad-card: 20px; --g-pad-card-tight: 14px; --g-pad-sheet: 24px; --g-pad-page: 20px; --g-gap: 14px; --g-ctl-h: 38px; --g-ctl-h-sm: 30px; --g-ctl-h-lg: 46px; --g-row-h: 44px; /* focus */ --g-focus-color: rgba(237, 234, 224, 0.75); --g-focus-halo: rgba(237, 234, 224, 0.22); --g-focus-ring: 3px 3px 0 #FF4B38; /* feedback */ --g-skel: rgba(255, 255, 255, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(255, 255, 255, 0.20); --g-scroll-thumb-hover: rgba(255, 255, 255, 0.34); --g-grabber: rgba(235, 235, 245, 0.34); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 1.5px; --g-border-c: #EDEAE0; --g-btn-primary-shadow: 3px 3px 0 #FF4B38; --g-btn-primary-shadow-hover: 4px 4px 0 #FF4B38; --g-btn-primary-shadow-press: 0 0 0 #FF4B38; --g-press-x: 3px; --g-press-y: 3px; --g-press-scale: 1; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } @media (prefers-color-scheme: dark) { html[data-ui-theme="ink"]:not([data-theme="light"]), [data-ui-theme="ink"]:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --g-theme-name: "Ink"; --g-theme-blurb: "Hard black outlines, 4px offset shadows, near-square corners. Brutal."; /* ground */ --g-canvas: #131310; --g-mesh: linear-gradient(#131310 0%, #131310 100%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #181815; --g-solid-2: #1b1b17; --g-solid-3: #242420; --g-solid-4: #2d2d2a; --g-solid-sunken: #12120f; /* ink */ --g-text: #edeae0; --g-text-2: #b5b2a6; --g-text-3: #969489; --g-text-4: #5f5e56; --g-text-on-accent: #16150f; --g-placeholder: #848278; /* the needle */ --g-accent: #edeae0; --g-accent-strong: #f0ede4; --g-accent-fill: #edeae0; --g-accent-press: #b9b7af; --g-accent-soft: rgba(237, 234, 224, 0.16); --g-accent-softer: rgba(237, 234, 224, 0.075); --g-accent-glow: rgba(237, 234, 224, 0.34); /* status */ /* RUN5 §3 Ink dark (OS-pref twin): lime TEXT on ink bg — see the explicit dark block above for the why. Edit the two together or not at all. */ --g-green: #D8F25A; --g-green-bg: #16150F; --g-text-on-green: #1b1f08; --g-amber: #edeae0; /* V738-2 Ink dark (OS-pref twin): see the explicit dark block above for the why. */ --g-amber-bg: #574100; --g-text-on-amber: #18160e; --g-blue: #83ace2; --g-blue-bg: rgba(131, 172, 226, 0.16); --g-violet: #af83e2; --g-violet-bg: rgb(50, 36, 66); --g-red: #ff5d4c; --g-red-bg: rgba(75, 7, 0, 0.39); --g-text-on-red: #1f0a08; --g-slate: #b5b2a6; --g-slate-bg: rgba(181, 178, 166, 0.16); /* the glass ladder */ --g-fill-1: #181815; --g-fill-2: #1b1b17; --g-fill-3: #242420; --g-fill-4: #2d2d2a; /* RUN5 §3 Ink dark (OS-pref twin): see the explicit dark block above. */ --g-fill-nested: #242420; --g-fill-sunken: #131310; --g-fill-hover: #20201B; --g-fill-press: #232320; --g-fill-sel: rgba(237, 234, 224, 0.18); /* blur (constant per rung, NEVER animated) */ --g-blur-1: none; --g-blur-2: none; --g-blur-3: none; --g-blur-4: none; --g-blur-scrim: none; /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-2: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-3: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-4: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: 0 0 0 0 rgba(0,0,0,0); --g-edge-2: 0 0 0 0 rgba(0,0,0,0); --g-edge-3: 0 0 0 0 rgba(0,0,0,0); --g-edge-4: 0 0 0 0 rgba(0,0,0,0); --g-hairline: rgba(237,234,224,.24); --g-hairline-strong: #EDEAE0; /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 3px 3px 0 rgba(237,234,224,.22); --g-shadow-2: 4px 4px 0 rgba(237,234,224,.22); --g-shadow-3: 5px 5px 0 rgba(237,234,224,.22); --g-shadow-4: 5px 5px 0 rgba(237,234,224,.22); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 3px 3px 0 rgba(237,234,224,.22); --g-e2: 4px 4px 0 rgba(237,234,224,.22); --g-e3: 5px 5px 0 rgba(237,234,224,.22); --g-e4: 5px 5px 0 rgba(237,234,224,.22); --g-lift: 5px 5px 0 rgba(237,234,224,.22); /* scrim */ --g-scrim: rgba(0, 0, 0, 0.58); --g-scrim-strong: rgba(0, 0, 0, 0.74); /* radii */ /* RUN5 §3 Ink "radii ≤5px everywhere" — same as the light block. */ --g-r-pill: 3px; --g-r-xs: 2px; --g-r-sm: 3px; --g-r-md: 3px; --g-r-lg: 3px; --g-r-xl: 4px; --g-r-2xl: 5px; --g-r-ctl: 3px; --g-r-card: 3px; --g-r-chrome: 3px; --g-r-menu: 3px; --g-r-sheet: 4px; --g-r-modal: 4px; --g-r-inner: 4px; /* space + control sizing */ --g-pad-card: 20px; --g-pad-card-tight: 14px; --g-pad-sheet: 24px; --g-pad-page: 20px; --g-gap: 14px; --g-ctl-h: 38px; --g-ctl-h-sm: 30px; --g-ctl-h-lg: 46px; --g-row-h: 44px; /* focus */ --g-focus-color: rgba(237, 234, 224, 0.75); --g-focus-halo: rgba(237, 234, 224, 0.22); --g-focus-ring: 3px 3px 0 #FF4B38; /* feedback */ --g-skel: rgba(255, 255, 255, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(255, 255, 255, 0.20); --g-scroll-thumb-hover: rgba(255, 255, 255, 0.34); --g-grabber: rgba(235, 235, 245, 0.34); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 1.5px; --g-border-c: #EDEAE0; --g-btn-primary-shadow: 3px 3px 0 #FF4B38; --g-btn-primary-shadow-hover: 4px 4px 0 #FF4B38; --g-btn-primary-shadow-press: 0 0 0 #FF4B38; --g-press-x: 3px; --g-press-y: 3px; --g-press-scale: 1; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } } /* ============================================================================ 11 POP — Rounded type, thick outlines, a 4px ledge every button sinks into. worst body-ink contrast — light 4.64:1 · dark 4.56:1 ============================================================================ */ :root[data-ui-theme="pop"], [data-ui-theme="pop"] { color-scheme: light; --g-theme-name: "Pop"; --g-theme-blurb: "Rounded type, thick outlines, a 4px ledge every button sinks into."; /* ground */ --g-canvas: #fbf3e6; --g-mesh: radial-gradient(34% 30% at 12% 16%,rgba(120,220,180,.3),transparent 70%),radial-gradient(30% 26% at 88% 10%,rgba(255,160,190,.3),transparent 70%),radial-gradient(34% 30% at 82% 88%,rgba(255,205,100,.32),transparent 70%),radial-gradient(26% 24% at 20% 90%,rgba(150,190,255,.25),transparent 70%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #fefaf2; --g-solid-2: #fffdf9; /* R6-23b: glass.css §3 maps fill-3 → solid-3 in reduced-transparency / lite mode; #fffefb was ΔL* +0.3 off solid-2 — the a11y mode kept the invisible hover. Matches the new (already opaque) fill-3 (ΔL* −4.4). */ --g-solid-3: #f8f0de; --g-solid-4: #fffefd; --g-solid-sunken: #fcf5e9; /* ink */ --g-text: #272030; --g-text-2: #5d5468; --g-text-3: #726b7b; --g-text-4: #b1acb4; --g-text-on-accent: #ffffff; --g-placeholder: #87818e; /* the needle */ /* V732-A INK MOVE, and the only one that was REQUIRED rather than enabling: was #c73e4e, which failed --g-solid-3 #f8f0de at 4.379 BARE, with no plate involved at all — the newly enforced rung set caught it. Scaled x0.92 (hue drift 0.136 deg, L* 47.15 to 43.45), bare worst rung 4.379 to 5.013. It also had the tightest ceiling in the family: the old ink read only 4.97 on pure white, so no pale plate could ever clear the bar. --g-accent-fill #de3049 is byte-unchanged. */ --g-accent: #b73948; --g-accent-strong: #d73145; --g-accent-fill: #de3049; --g-accent-press: #c73e4e; --g-accent-soft: rgba(255, 229, 232, 0.87); --g-accent-softer: rgba(252, 235, 237, 0.54); --g-accent-glow: rgba(255, 79, 100, 0.3); /* status */ --g-green: #0b6940; --g-green-bg: #8BE8C0; --g-text-on-green: #edfaf4; --g-amber: #5c4306; --g-amber-bg: #FFD98A; --g-text-on-amber: #faf6ed; --g-blue: #154584; --g-blue-bg: rgba(21, 69, 132, 0.14); --g-violet: #491584; --g-violet-bg: rgba(73, 21, 132, 0.14); --g-red: #b7253f; --g-red-bg: rgba(254, 220, 226, 0.79); --g-text-on-red: #fcf3f5; --g-slate: #5d5468; --g-slate-bg: rgba(93, 84, 104, 0.14); /* the glass ladder */ --g-fill-1: #fefaf2; --g-fill-2: #fffdf9; /* R6-23 (same class as Ink/Ledger light, R6-18 v711): was #fffefb — ΔL* +0.3 off fill-2, an invisible hover ramp (headroom above #fffdf9 is only +0.6, so the step goes DARKER, the ledger/ink-light direction). One step of warm cream: ΔL* −4.4 vs fill-2 (pop-dark's own step is +4.2). Menus/sheets rest on fill-3: --g-text 13.9:1 · --g-text-2 6.3:1 · --g-text-3 4.51:1 — every tier ≥4.5. Item hover #FFF6E4 sits ΔL* 2.2 off this pane, press #FFF2D6 ΔL* 0.8 — both still ordered and distinct. */ --g-fill-3: #f8f0de; --g-fill-4: #fffefd; --g-fill-nested: #F4EDFF; --g-fill-sunken: #FFFDF9; --g-fill-hover: #FFF6E4; --g-fill-press: #FFF2D6; --g-fill-sel: rgba(255, 229, 232, 0.87); /* blur (constant per rung, NEVER animated) */ --g-blur-1: none; --g-blur-2: none; --g-blur-3: none; --g-blur-4: none; --g-blur-scrim: none; /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-2: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-3: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-4: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: 0 0 0 0 rgba(0,0,0,0); --g-edge-2: 0 0 0 0 rgba(0,0,0,0); --g-edge-3: 0 0 0 0 rgba(0,0,0,0); --g-edge-4: 0 0 0 0 rgba(0,0,0,0); --g-hairline: rgba(39,32,48,.14); --g-hairline-strong: #272030; /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 4px 0 #272030; --g-shadow-2: 0 4px 0 #272030; --g-shadow-3: 0 6px 0 #272030, 0 20px 40px -14px rgba(39,32,48,.3); --g-shadow-4: 0 6px 0 #272030, 0 20px 40px -14px rgba(39,32,48,.3); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 4px 0 #272030; --g-e2: 0 4px 0 #272030; --g-e3: 0 6px 0 #272030, 0 20px 40px -14px rgba(39,32,48,.3); --g-e4: 0 6px 0 #272030, 0 20px 40px -14px rgba(39,32,48,.3); --g-lift: 0 6px 0 #272030, 0 20px 40px -14px rgba(39,32,48,.3); /* scrim */ --g-scrim: rgba(45, 44, 41, 0.34); --g-scrim-strong: rgba(45, 44, 41, 0.5); /* radii */ --g-r-xs: 8px; --g-r-sm: 12px; --g-r-md: 14px; --g-r-lg: 20px; --g-r-xl: 25px; --g-r-2xl: 32px; --g-r-ctl: 14px; --g-r-card: 20px; --g-r-chrome: 20px; --g-r-menu: 16px; --g-r-sheet: 25px; --g-r-modal: 25px; --g-r-inner: 13px; /* space + control sizing */ --g-pad-card: 20px; --g-pad-card-tight: 14px; --g-pad-sheet: 24px; --g-pad-page: 20px; --g-gap: 15px; --g-ctl-h: 44px; --g-ctl-h-sm: 35px; --g-ctl-h-lg: 53px; --g-row-h: 51px; /* focus */ --g-focus-color: rgba(199, 62, 78, 0.65); --g-focus-halo: rgba(199, 62, 78, 0.18); --g-focus-ring: 0 0 0 4px rgba(255,79,100,.35); /* feedback */ --g-skel: rgba(39, 32, 48, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(39, 32, 48, 0.2); --g-scroll-thumb-hover: rgba(39, 32, 48, 0.34); --g-grabber: rgba(39, 32, 48, 0.32); /* type */ --g-font: ui-rounded, 'SF Pro Rounded', -apple-system, 'Segoe UI', Roboto, sans-serif; --g-font-display: ui-rounded, 'SF Pro Rounded', -apple-system, 'Segoe UI', Roboto, sans-serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 2px; --g-border-c: #272030; --g-btn-primary-shadow: 0 4px 0 #272030; --g-btn-primary-shadow-hover: 0 5px 0 #272030; --g-btn-primary-shadow-press: 0 0 0 #272030; --g-press-x: 0px; --g-press-y: 4px; --g-press-scale: 1; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } html[data-ui-theme="pop"][data-theme="dark"], [data-ui-theme="pop"][data-theme="dark"] { color-scheme: dark; --g-theme-name: "Pop"; --g-theme-blurb: "Rounded type, thick outlines, a 4px ledge every button sinks into."; /* ground */ --g-canvas: #171224; --g-mesh: radial-gradient(34% 30% at 12% 16%,rgba(60,190,145,.24),transparent 70%),radial-gradient(30% 26% at 88% 10%,rgba(235,105,160,.22),transparent 70%),radial-gradient(34% 30% at 82% 88%,rgba(255,180,60,.18),transparent 70%),radial-gradient(26% 24% at 20% 90%,rgba(110,150,255,.2),transparent 70%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #201b2e; --g-solid-2: #241e33; --g-solid-3: #2d273b; --g-solid-4: #363043; --g-solid-sunken: #171421; /* ink */ --g-text: #fbf7ff; --g-text-2: #b4abc2; --g-text-3: #9f98ad; --g-text-4: #686176; --g-text-on-accent: #2b0a14; --g-placeholder: #8c869b; /* the needle */ --g-accent: #ff677a; --g-accent-strong: #ff7182; --g-accent-fill: #ff5a6e; --g-accent-press: #ce5c6a; --g-accent-soft: rgba(89, 0, 11, 0.31); --g-accent-softer: rgba(89, 0, 11, 0.15); --g-accent-glow: rgba(255, 90, 110, 0.34); /* status */ --g-green: #6fe0ac; --g-green-bg: #1E5C40; --g-text-on-green: #081f14; --g-amber: #ffd98a; --g-amber-bg: #5C430E; --g-text-on-amber: #1f1708; --g-blue: #83ace2; --g-blue-bg: rgba(131, 172, 226, 0.16); --g-violet: #b388e3; --g-violet-bg: rgb(56, 41, 72); --g-red: #ff8296; --g-red-bg: rgba(112, 0, 18, 0.23); --g-text-on-red: #1f080b; --g-slate: #b4abc2; --g-slate-bg: rgb(61, 59, 64); /* the glass ladder */ --g-fill-1: #201b2e; --g-fill-2: #241e33; --g-fill-3: #2d273b; --g-fill-4: #363043; --g-fill-nested: #2C2540; --g-fill-sunken: #1B1629; --g-fill-hover: #2A2340; --g-fill-press: #312949; --g-fill-sel: rgba(89, 0, 11, 0.35); /* blur (constant per rung, NEVER animated) */ --g-blur-1: none; --g-blur-2: none; --g-blur-3: none; --g-blur-4: none; --g-blur-scrim: none; /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-2: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-3: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-4: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: 0 0 0 0 rgba(0,0,0,0); --g-edge-2: 0 0 0 0 rgba(0,0,0,0); --g-edge-3: 0 0 0 0 rgba(0,0,0,0); --g-edge-4: 0 0 0 0 rgba(0,0,0,0); --g-hairline: rgba(251,247,255,.12); --g-hairline-strong: #0D0A16; /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 4px 0 #0D0A16; --g-shadow-2: 0 4px 0 #0D0A16; --g-shadow-3: 0 6px 0 #0D0A16, 0 22px 44px -14px rgba(0,0,0,.6); --g-shadow-4: 0 6px 0 #0D0A16, 0 22px 44px -14px rgba(0,0,0,.6); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 4px 0 #0D0A16; --g-e2: 0 4px 0 #0D0A16; --g-e3: 0 6px 0 #0D0A16, 0 22px 44px -14px rgba(0,0,0,.6); --g-e4: 0 6px 0 #0D0A16, 0 22px 44px -14px rgba(0,0,0,.6); --g-lift: 0 6px 0 #0D0A16, 0 22px 44px -14px rgba(0,0,0,.6); /* scrim */ --g-scrim: rgba(0, 0, 0, 0.58); --g-scrim-strong: rgba(0, 0, 0, 0.74); /* radii */ --g-r-xs: 8px; --g-r-sm: 12px; --g-r-md: 14px; --g-r-lg: 20px; --g-r-xl: 25px; --g-r-2xl: 32px; --g-r-ctl: 14px; --g-r-card: 20px; --g-r-chrome: 20px; --g-r-menu: 16px; --g-r-sheet: 25px; --g-r-modal: 25px; --g-r-inner: 13px; /* space + control sizing */ --g-pad-card: 20px; --g-pad-card-tight: 14px; --g-pad-sheet: 24px; --g-pad-page: 20px; --g-gap: 15px; --g-ctl-h: 44px; --g-ctl-h-sm: 35px; --g-ctl-h-lg: 53px; --g-row-h: 51px; /* focus */ --g-focus-color: rgba(255, 103, 122, 0.75); --g-focus-halo: rgba(255, 103, 122, 0.22); --g-focus-ring: 0 0 0 4px rgba(255,79,100,.35); /* feedback */ --g-skel: rgba(255, 255, 255, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(255, 255, 255, 0.20); --g-scroll-thumb-hover: rgba(255, 255, 255, 0.34); --g-grabber: rgba(235, 235, 245, 0.34); /* type */ --g-font: ui-rounded, 'SF Pro Rounded', -apple-system, 'Segoe UI', Roboto, sans-serif; --g-font-display: ui-rounded, 'SF Pro Rounded', -apple-system, 'Segoe UI', Roboto, sans-serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 2px; --g-border-c: #0D0A16; --g-btn-primary-shadow: 0 4px 0 #0D0A16; --g-btn-primary-shadow-hover: 0 5px 0 #0D0A16; --g-btn-primary-shadow-press: 0 0 0 #0D0A16; --g-press-x: 0px; --g-press-y: 4px; --g-press-scale: 1; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } @media (prefers-color-scheme: dark) { html[data-ui-theme="pop"]:not([data-theme="light"]), [data-ui-theme="pop"]:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --g-theme-name: "Pop"; --g-theme-blurb: "Rounded type, thick outlines, a 4px ledge every button sinks into."; /* ground */ --g-canvas: #171224; --g-mesh: radial-gradient(34% 30% at 12% 16%,rgba(60,190,145,.24),transparent 70%),radial-gradient(30% 26% at 88% 10%,rgba(235,105,160,.22),transparent 70%),radial-gradient(34% 30% at 82% 88%,rgba(255,180,60,.18),transparent 70%),radial-gradient(26% 24% at 20% 90%,rgba(110,150,255,.2),transparent 70%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #201b2e; --g-solid-2: #241e33; --g-solid-3: #2d273b; --g-solid-4: #363043; --g-solid-sunken: #171421; /* ink */ --g-text: #fbf7ff; --g-text-2: #b4abc2; --g-text-3: #9f98ad; --g-text-4: #686176; --g-text-on-accent: #2b0a14; --g-placeholder: #8c869b; /* the needle */ --g-accent: #ff677a; --g-accent-strong: #ff7182; --g-accent-fill: #ff5a6e; --g-accent-press: #ce5c6a; --g-accent-soft: rgba(89, 0, 11, 0.31); --g-accent-softer: rgba(89, 0, 11, 0.15); --g-accent-glow: rgba(255, 90, 110, 0.34); /* status */ --g-green: #6fe0ac; --g-green-bg: #1E5C40; --g-text-on-green: #081f14; --g-amber: #ffd98a; --g-amber-bg: #5C430E; --g-text-on-amber: #1f1708; --g-blue: #83ace2; --g-blue-bg: rgba(131, 172, 226, 0.16); --g-violet: #b388e3; --g-violet-bg: rgb(56, 41, 72); --g-red: #ff8296; --g-red-bg: rgba(112, 0, 18, 0.23); --g-text-on-red: #1f080b; --g-slate: #b4abc2; --g-slate-bg: rgb(61, 59, 64); /* the glass ladder */ --g-fill-1: #201b2e; --g-fill-2: #241e33; --g-fill-3: #2d273b; --g-fill-4: #363043; --g-fill-nested: #2C2540; --g-fill-sunken: #1B1629; --g-fill-hover: #2A2340; --g-fill-press: #312949; --g-fill-sel: rgba(89, 0, 11, 0.35); /* blur (constant per rung, NEVER animated) */ --g-blur-1: none; --g-blur-2: none; --g-blur-3: none; --g-blur-4: none; --g-blur-scrim: none; /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-2: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-3: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-4: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: 0 0 0 0 rgba(0,0,0,0); --g-edge-2: 0 0 0 0 rgba(0,0,0,0); --g-edge-3: 0 0 0 0 rgba(0,0,0,0); --g-edge-4: 0 0 0 0 rgba(0,0,0,0); --g-hairline: rgba(251,247,255,.12); --g-hairline-strong: #0D0A16; /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 4px 0 #0D0A16; --g-shadow-2: 0 4px 0 #0D0A16; --g-shadow-3: 0 6px 0 #0D0A16, 0 22px 44px -14px rgba(0,0,0,.6); --g-shadow-4: 0 6px 0 #0D0A16, 0 22px 44px -14px rgba(0,0,0,.6); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 4px 0 #0D0A16; --g-e2: 0 4px 0 #0D0A16; --g-e3: 0 6px 0 #0D0A16, 0 22px 44px -14px rgba(0,0,0,.6); --g-e4: 0 6px 0 #0D0A16, 0 22px 44px -14px rgba(0,0,0,.6); --g-lift: 0 6px 0 #0D0A16, 0 22px 44px -14px rgba(0,0,0,.6); /* scrim */ --g-scrim: rgba(0, 0, 0, 0.58); --g-scrim-strong: rgba(0, 0, 0, 0.74); /* radii */ --g-r-xs: 8px; --g-r-sm: 12px; --g-r-md: 14px; --g-r-lg: 20px; --g-r-xl: 25px; --g-r-2xl: 32px; --g-r-ctl: 14px; --g-r-card: 20px; --g-r-chrome: 20px; --g-r-menu: 16px; --g-r-sheet: 25px; --g-r-modal: 25px; --g-r-inner: 13px; /* space + control sizing */ --g-pad-card: 20px; --g-pad-card-tight: 14px; --g-pad-sheet: 24px; --g-pad-page: 20px; --g-gap: 15px; --g-ctl-h: 44px; --g-ctl-h-sm: 35px; --g-ctl-h-lg: 53px; --g-row-h: 51px; /* focus */ --g-focus-color: rgba(255, 103, 122, 0.75); --g-focus-halo: rgba(255, 103, 122, 0.22); --g-focus-ring: 0 0 0 4px rgba(255,79,100,.35); /* feedback */ --g-skel: rgba(255, 255, 255, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(255, 255, 255, 0.20); --g-scroll-thumb-hover: rgba(255, 255, 255, 0.34); --g-grabber: rgba(235, 235, 245, 0.34); /* type */ --g-font: ui-rounded, 'SF Pro Rounded', -apple-system, 'Segoe UI', Roboto, sans-serif; --g-font-display: ui-rounded, 'SF Pro Rounded', -apple-system, 'Segoe UI', Roboto, sans-serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 2px; --g-border-c: #0D0A16; --g-btn-primary-shadow: 0 4px 0 #0D0A16; --g-btn-primary-shadow-hover: 0 5px 0 #0D0A16; --g-btn-primary-shadow-press: 0 0 0 #0D0A16; --g-press-x: 0px; --g-press-y: 4px; --g-press-scale: 1; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } } /* ============================================================================ 12 TERRA — Sage and clay, river-stone corners — no two the same, no borders. worst body-ink contrast — light 4.56:1 · dark 4.65:1 ============================================================================ */ :root[data-ui-theme="terra"], [data-ui-theme="terra"] { color-scheme: light; --g-theme-name: "Terra"; --g-theme-blurb: "Sage and clay, river-stone corners — no two the same, no borders."; /* ground */ --g-canvas: #dcdcc9; --g-mesh: radial-gradient(50% 44% at 14% 10%,rgba(116,134,94,.32),transparent 70%),radial-gradient(44% 40% at 90% 86%,rgba(184,108,74,.26),transparent 70%),radial-gradient(36% 32% at 78% 16%,rgba(214,196,150,.35),transparent 70%),radial-gradient(60% 50% at 45% 45%,rgba(250,249,238,.4),transparent 75%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #ebead9; --g-solid-2: #f3f2e2; --g-solid-3: #f7f7ec; --g-solid-4: #fafaf4; --g-solid-sunken: #dfdfcd; /* ink */ --g-text: #31342a; --g-text-2: #595d4f; --g-text-3: #5e6155; --g-text-4: #a1a295; --g-text-on-accent: #fbf5ec; --g-placeholder: #74766a; /* the needle */ --g-accent: #954b2e; --g-accent-strong: #9d4f30; --g-accent-fill: #ad5735; --g-accent-press: #8e482c; --g-accent-soft: rgba(255, 228, 217, 0.64); --g-accent-softer: rgba(255, 228, 217, 0.29); --g-accent-glow: rgba(182, 92, 56, 0.3); /* status */ --g-green: #556532; --g-green-bg: #DCE3C8; --g-text-on-green: #f5f7f0; --g-amber: #795a23; --g-amber-bg: #F0DFC4; --g-text-on-amber: #faf5ed; --g-blue: #154584; --g-blue-bg: rgba(21, 69, 132, 0.14); --g-violet: #491584; --g-violet-bg: rgba(73, 21, 132, 0.14); --g-red: #8b3921; --g-red-bg: rgba(255, 199, 183, 0.4); --g-text-on-red: #faf0ed; --g-slate: #595d4f; --g-slate-bg: rgb(216, 217, 213); /* the glass ladder */ --g-fill-1: #ebead9; --g-fill-2: #f3f2e2; --g-fill-3: #f7f7ec; --g-fill-4: #fafaf4; --g-fill-nested: #EAE6D8; --g-fill-sunken: rgba(255,255,252,.75); --g-fill-hover: rgba(58,60,40,.045); --g-fill-press: #ECE8DA; --g-fill-sel: rgba(255, 228, 217, 0.64); /* blur (constant per rung, NEVER animated) */ --g-blur-1: none; --g-blur-2: none; --g-blur-3: none; --g-blur-4: none; --g-blur-scrim: none; /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 45%); --g-sheen-2: linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 45%); --g-sheen-3: linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 45%); --g-sheen-4: linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 45%); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: 0 0 0 0 rgba(0,0,0,0); --g-edge-2: 0 0 0 0 rgba(0,0,0,0); --g-edge-3: 0 0 0 0 rgba(0,0,0,0); --g-edge-4: 0 0 0 0 rgba(0,0,0,0); --g-hairline: rgba(58,60,40,.11); --g-hairline-strong: rgba(58,60,40,.11); /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 1px 2px rgba(58,60,40,.08), 0 5px 12px -7px rgba(58,60,40,.3); --g-shadow-2: 0 1px 2px rgba(58,60,40,.06), 0 18px 34px -20px rgba(58,60,40,.45); --g-shadow-3: 0 2px 4px rgba(58,60,40,.07), 0 24px 48px -18px rgba(58,60,40,.5); --g-shadow-4: 0 2px 4px rgba(58,60,40,.07), 0 24px 48px -18px rgba(58,60,40,.5); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 1px 2px rgba(58,60,40,.08), 0 5px 12px -7px rgba(58,60,40,.3); --g-e2: 0 1px 2px rgba(58,60,40,.06), 0 18px 34px -20px rgba(58,60,40,.45); --g-e3: 0 2px 4px rgba(58,60,40,.07), 0 24px 48px -18px rgba(58,60,40,.5); --g-e4: 0 2px 4px rgba(58,60,40,.07), 0 24px 48px -18px rgba(58,60,40,.5); --g-lift: 0 2px 4px rgba(58,60,40,.07), 0 24px 48px -18px rgba(58,60,40,.5); /* scrim */ --g-scrim: rgba(40, 40, 36, 0.34); --g-scrim-strong: rgba(40, 40, 36, 0.5); /* radii */ --g-r-xs: 8px; --g-r-sm: 12px; --g-r-md: 14px; --g-r-lg: 24px; --g-r-xl: 30px; --g-r-2xl: 38px; --g-r-ctl: 18px 10px 18px 10px; --g-r-card: 34px 14px 28px 18px; --g-r-chrome: 14px 30px 16px 34px; --g-r-menu: 26px 14px 30px 18px; --g-r-sheet: 26px 14px 30px 18px; --g-r-modal: 26px 14px 30px 18px; --g-r-inner: 18px 8px 14px 10px; /* space + control sizing */ --g-pad-card: 21px; --g-pad-card-tight: 15px; --g-pad-sheet: 25px; --g-pad-page: 21px; --g-gap: 15px; --g-ctl-h: 38px; --g-ctl-h-sm: 30px; --g-ctl-h-lg: 46px; --g-row-h: 44px; /* focus */ --g-focus-color: rgba(149, 75, 46, 0.65); --g-focus-halo: rgba(149, 75, 46, 0.18); --g-focus-ring: 0 0 0 3.5px rgba(182,92,56,.28); /* feedback */ --g-skel: rgba(49, 52, 42, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(49, 52, 42, 0.2); --g-scroll-thumb-hover: rgba(49, 52, 42, 0.34); --g-grabber: rgba(49, 52, 42, 0.32); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 0px; --g-border-c: transparent; --g-btn-primary-shadow: inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(90,42,22,.3),0 9px 18px -7px rgba(182,92,56,.5); --g-btn-primary-shadow-hover: inset 0 1px 0 rgba(255,255,255,.18),0 2px 4px rgba(90,42,22,.25),0 12px 24px -7px rgba(182,92,56,.55); --g-btn-primary-shadow-press: inset 0 1px 3px rgba(70,32,16,.4); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } html[data-ui-theme="terra"][data-theme="dark"], [data-ui-theme="terra"][data-theme="dark"] { color-scheme: dark; --g-theme-name: "Terra"; --g-theme-blurb: "Sage and clay, river-stone corners — no two the same, no borders."; /* ground */ --g-canvas: #191b14; --g-mesh: radial-gradient(46% 40% at 16% 12%,rgba(96,112,74,.22),transparent 70%),radial-gradient(40% 36% at 88% 84%,rgba(140,80,52,.2),transparent 70%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #202217; --g-solid-2: #232619; --g-solid-3: #2c2f22; --g-solid-4: #35372b; --g-solid-sunken: #171910; /* ink */ --g-text: #eae8dc; --g-text-2: #a6aa96; --g-text-3: #9ea294; --g-text-4: #676a5d; --g-text-on-accent: #241207; --g-placeholder: #8c8f82; /* the needle */ --g-accent: #d88c6a; --g-accent-strong: #d78967; --g-accent-fill: #d0764e; --g-accent-press: #bb6d4a; --g-accent-soft: rgba(82, 25, 0, 0.29); --g-accent-softer: rgba(82, 25, 0, 0.14); --g-accent-glow: rgba(208, 118, 78, 0.34); /* status */ --g-green: #bacb86; --g-green-bg: #2E381C; --g-text-on-green: #171b0b; --g-amber: #dcc178; --g-amber-bg: #38300F; --g-text-on-amber: #1e1808; --g-blue: #83ace2; --g-blue-bg: rgba(131, 172, 226, 0.16); --g-violet: #b68de4; --g-violet-bg: rgb(59, 45, 76); --g-red: #e18d6b; --g-red-bg: rgba(89, 26, 0, 0.28); --g-text-on-red: #1f0e08; --g-slate: #a6aa96; --g-slate-bg: rgb(42, 43, 38); /* the glass ladder */ --g-fill-1: #202217; --g-fill-2: #232619; --g-fill-3: #2c2f22; --g-fill-4: #35372b; --g-fill-nested: rgba(234,232,220,.08); --g-fill-sunken: rgba(0,0,0,.28); --g-fill-hover: rgba(234,232,220,.045); --g-fill-press: #31351F; --g-fill-sel: rgba(82, 25, 0, 0.33); /* blur (constant per rung, NEVER animated) */ --g-blur-1: none; --g-blur-2: none; --g-blur-3: none; --g-blur-4: none; --g-blur-scrim: none; /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 45%); --g-sheen-2: linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 45%); --g-sheen-3: linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 45%); --g-sheen-4: linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 45%); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: inset 0 0 0 1px rgba(234,232,220,.07); --g-edge-2: 0 0 0 0 rgba(0,0,0,0); --g-edge-3: 0 0 0 0 rgba(0,0,0,0); --g-edge-4: 0 0 0 0 rgba(0,0,0,0); --g-hairline: rgba(234,232,220,.1); --g-hairline-strong: rgba(234,232,220,.1); /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 1px 2px rgba(0,0,0,.3); --g-shadow-2: 0 1px 2px rgba(0,0,0,.35), 0 20px 38px -20px rgba(0,0,0,.7); --g-shadow-3: 0 2px 5px rgba(0,0,0,.4), 0 26px 52px -18px rgba(0,0,0,.8); --g-shadow-4: 0 2px 5px rgba(0,0,0,.4), 0 26px 52px -18px rgba(0,0,0,.8); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 1px 2px rgba(0,0,0,.3); --g-e2: 0 1px 2px rgba(0,0,0,.35), 0 20px 38px -20px rgba(0,0,0,.7); --g-e3: 0 2px 5px rgba(0,0,0,.4), 0 26px 52px -18px rgba(0,0,0,.8); --g-e4: 0 2px 5px rgba(0,0,0,.4), 0 26px 52px -18px rgba(0,0,0,.8); --g-lift: 0 2px 5px rgba(0,0,0,.4), 0 26px 52px -18px rgba(0,0,0,.8); /* scrim */ --g-scrim: rgba(0, 0, 0, 0.58); --g-scrim-strong: rgba(0, 0, 0, 0.74); /* radii */ --g-r-xs: 8px; --g-r-sm: 12px; --g-r-md: 14px; --g-r-lg: 24px; --g-r-xl: 30px; --g-r-2xl: 38px; --g-r-ctl: 18px 10px 18px 10px; --g-r-card: 34px 14px 28px 18px; --g-r-chrome: 14px 30px 16px 34px; --g-r-menu: 26px 14px 30px 18px; --g-r-sheet: 26px 14px 30px 18px; --g-r-modal: 26px 14px 30px 18px; --g-r-inner: 18px 8px 14px 10px; /* space + control sizing */ --g-pad-card: 21px; --g-pad-card-tight: 15px; --g-pad-sheet: 25px; --g-pad-page: 21px; --g-gap: 15px; --g-ctl-h: 38px; --g-ctl-h-sm: 30px; --g-ctl-h-lg: 46px; --g-row-h: 44px; /* focus */ --g-focus-color: rgba(216, 140, 106, 0.75); --g-focus-halo: rgba(216, 140, 106, 0.22); --g-focus-ring: 0 0 0 3.5px rgba(182,92,56,.28); /* feedback */ --g-skel: rgba(255, 255, 255, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(255, 255, 255, 0.20); --g-scroll-thumb-hover: rgba(255, 255, 255, 0.34); --g-grabber: rgba(235, 235, 245, 0.34); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 0px; --g-border-c: transparent; --g-btn-primary-shadow: inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(0,0,0,.4),0 10px 20px -7px rgba(208,118,78,.4); --g-btn-primary-shadow-hover: inset 0 1px 0 rgba(255,255,255,.22),0 2px 4px rgba(0,0,0,.35),0 13px 26px -7px rgba(208,118,78,.45); --g-btn-primary-shadow-press: inset 0 1px 3px rgba(0,0,0,.35); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } @media (prefers-color-scheme: dark) { html[data-ui-theme="terra"]:not([data-theme="light"]), [data-ui-theme="terra"]:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --g-theme-name: "Terra"; --g-theme-blurb: "Sage and clay, river-stone corners — no two the same, no borders."; /* ground */ --g-canvas: #191b14; --g-mesh: radial-gradient(46% 40% at 16% 12%,rgba(96,112,74,.22),transparent 70%),radial-gradient(40% 36% at 88% 84%,rgba(140,80,52,.2),transparent 70%); /* opaque grounds (used under sticky/floating bars — iOS trap B) */ --g-solid-1: #202217; --g-solid-2: #232619; --g-solid-3: #2c2f22; --g-solid-4: #35372b; --g-solid-sunken: #171910; /* ink */ --g-text: #eae8dc; --g-text-2: #a6aa96; --g-text-3: #9ea294; --g-text-4: #676a5d; --g-text-on-accent: #241207; --g-placeholder: #8c8f82; /* the needle */ --g-accent: #d88c6a; --g-accent-strong: #d78967; --g-accent-fill: #d0764e; --g-accent-press: #bb6d4a; --g-accent-soft: rgba(82, 25, 0, 0.29); --g-accent-softer: rgba(82, 25, 0, 0.14); --g-accent-glow: rgba(208, 118, 78, 0.34); /* status */ --g-green: #bacb86; --g-green-bg: #2E381C; --g-text-on-green: #171b0b; --g-amber: #dcc178; --g-amber-bg: #38300F; --g-text-on-amber: #1e1808; --g-blue: #83ace2; --g-blue-bg: rgba(131, 172, 226, 0.16); --g-violet: #b68de4; --g-violet-bg: rgb(59, 45, 76); --g-red: #e18d6b; --g-red-bg: rgba(89, 26, 0, 0.28); --g-text-on-red: #1f0e08; --g-slate: #a6aa96; --g-slate-bg: rgb(42, 43, 38); /* the glass ladder */ --g-fill-1: #202217; --g-fill-2: #232619; --g-fill-3: #2c2f22; --g-fill-4: #35372b; --g-fill-nested: rgba(234,232,220,.08); --g-fill-sunken: rgba(0,0,0,.28); --g-fill-hover: rgba(234,232,220,.045); --g-fill-press: #31351F; --g-fill-sel: rgba(82, 25, 0, 0.33); /* blur (constant per rung, NEVER animated) */ --g-blur-1: none; --g-blur-2: none; --g-blur-3: none; --g-blur-4: none; --g-blur-scrim: none; /* sheen (complete literal gradients — iOS trap B) */ --g-sheen-1: linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 45%); --g-sheen-2: linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 45%); --g-sheen-3: linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 45%); --g-sheen-4: linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 45%); --g-sheen-nested: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); /* edge + hairline */ --g-edge-1: inset 0 0 0 1px rgba(234,232,220,.07); --g-edge-2: 0 0 0 0 rgba(0,0,0,0); --g-edge-3: 0 0 0 0 rgba(0,0,0,0); --g-edge-4: 0 0 0 0 rgba(0,0,0,0); --g-hairline: rgba(234,232,220,.1); --g-hairline-strong: rgba(234,232,220,.1); /* specular is folded into --g-edge-* for themes; no-op here */ --g-spec-1: 0 0 0 0 rgba(0,0,0,0); --g-spec-2: 0 0 0 0 rgba(0,0,0,0); --g-spec-3: 0 0 0 0 rgba(0,0,0,0); --g-spec-4: 0 0 0 0 rgba(0,0,0,0); /* shadow / elevation */ --g-shadow-1: 0 1px 2px rgba(0,0,0,.3); --g-shadow-2: 0 1px 2px rgba(0,0,0,.35), 0 20px 38px -20px rgba(0,0,0,.7); --g-shadow-3: 0 2px 5px rgba(0,0,0,.4), 0 26px 52px -18px rgba(0,0,0,.8); --g-shadow-4: 0 2px 5px rgba(0,0,0,.4), 0 26px 52px -18px rgba(0,0,0,.8); --g-e0: 0 0 0 0 rgba(0,0,0,0); --g-e1: 0 1px 2px rgba(0,0,0,.3); --g-e2: 0 1px 2px rgba(0,0,0,.35), 0 20px 38px -20px rgba(0,0,0,.7); --g-e3: 0 2px 5px rgba(0,0,0,.4), 0 26px 52px -18px rgba(0,0,0,.8); --g-e4: 0 2px 5px rgba(0,0,0,.4), 0 26px 52px -18px rgba(0,0,0,.8); --g-lift: 0 2px 5px rgba(0,0,0,.4), 0 26px 52px -18px rgba(0,0,0,.8); /* scrim */ --g-scrim: rgba(0, 0, 0, 0.58); --g-scrim-strong: rgba(0, 0, 0, 0.74); /* radii */ --g-r-xs: 8px; --g-r-sm: 12px; --g-r-md: 14px; --g-r-lg: 24px; --g-r-xl: 30px; --g-r-2xl: 38px; --g-r-ctl: 18px 10px 18px 10px; --g-r-card: 34px 14px 28px 18px; --g-r-chrome: 14px 30px 16px 34px; --g-r-menu: 26px 14px 30px 18px; --g-r-sheet: 26px 14px 30px 18px; --g-r-modal: 26px 14px 30px 18px; --g-r-inner: 18px 8px 14px 10px; /* space + control sizing */ --g-pad-card: 21px; --g-pad-card-tight: 15px; --g-pad-sheet: 25px; --g-pad-page: 21px; --g-gap: 15px; --g-ctl-h: 38px; --g-ctl-h-sm: 30px; --g-ctl-h-lg: 46px; --g-row-h: 44px; /* focus */ --g-focus-color: rgba(216, 140, 106, 0.75); --g-focus-halo: rgba(216, 140, 106, 0.22); --g-focus-ring: 0 0 0 3.5px rgba(182,92,56,.28); /* feedback */ --g-skel: rgba(255, 255, 255, 0.07); --g-skel-shine: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 80%); --g-scroll-thumb: rgba(255, 255, 255, 0.20); --g-scroll-thumb-hover: rgba(255, 255, 255, 0.34); --g-grabber: rgba(235, 235, 245, 0.34); /* type */ --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --g-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; /* STRUCTURE (glass.css §1.14) */ --g-border-w: 0px; --g-border-c: transparent; --g-btn-primary-shadow: inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(0,0,0,.4),0 10px 20px -7px rgba(208,118,78,.4); --g-btn-primary-shadow-hover: inset 0 1px 0 rgba(255,255,255,.22),0 2px 4px rgba(0,0,0,.35),0 13px 26px -7px rgba(208,118,78,.45); --g-btn-primary-shadow-press: inset 0 1px 3px rgba(0,0,0,.35); --g-press-x: 0px; --g-press-y: 0px; --g-press-scale: 0.965; --g-rule-inset: 0px; --g-rule-c: transparent; --g-rule-r: 6px; } } /* ============================================================================ AURORA'S MOVING GROUND — the single piece of non-token CSS in this file. A colour field that drifts cannot be expressed as a custom property, so it lives here, scoped to one theme, and switches itself OFF for: . prefers-reduced-motion (the user asked) . html[data-glass="lite"] (Glass.perf, the app-wide blur kill) . coarse pointers (phones repaint a full-screen gradient every frame — the owner's iPhone is the perf-critical surface, not a Mac) Only background-position moves. The blur radius never does (glass.css rule 2). ============================================================================ */ :root[data-ui-theme="aurora"] .g-app { background-size: 160% 160%; animation: g-aurora-drift 48s var(--g-ease-in-out) infinite alternate; } @keyframes g-aurora-drift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } } @media (prefers-reduced-motion: reduce) { :root[data-ui-theme="aurora"] .g-app { animation: none; background-size: cover; } } @media (pointer: coarse) { :root[data-ui-theme="aurora"] .g-app { animation: none; background-size: cover; } } html[data-glass="lite"][data-ui-theme="aurora"] .g-app { animation: none; background-size: cover; }