/* Hatchery brand fonts. Licensed webfonts — do not redistribute outside Hatchery's own products. Only the weights/styles actually used ship here (see Hatchery Brand Guidelines v1.0 design-system handoff for the full set). */ @font-face { font-family: "HV Fitzgerald"; src: url("/shared/fonts/HVFitzgerald-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "HV Fitzgerald"; src: url("/shared/fonts/HVFitzgerald-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "PP Radio Grotesk"; src: url("/shared/fonts/PPRadioGrotesk-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "PP Radio Grotesk"; src: url("/shared/fonts/PPRadioGrotesk-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* Hatchery Brand Guidelines v1.0 — core palette */ --color-deep-green: #233C36; --color-juniper: #2B4A44; --color-jade: #315C52; --color-warm-white: #F7F3EB; --color-volt: #DEFF5A; --color-white: #FFFFFF; --color-maroon: #800039; --color-mint: #C7DCCD; --color-sunset: #FF835B; --color-linen: #F3ECDA; --color-stone: #A49674; --color-charcoal: #232323; --border-default: rgba(35, 60, 54, 0.22); /* Product colorways — one per Hatch offering, from the same brand guide */ --product-plus-bg: var(--color-deep-green); --product-plus-fg: var(--color-volt); --product-digital-bg: var(--color-mint); --product-digital-fg: var(--color-deep-green); --product-analytics-bg: var(--color-volt); --product-analytics-fg: var(--color-deep-green); --product-core-bg: var(--color-maroon); --product-core-fg: var(--color-sunset); /* Existing variable names used throughout both apps, aliased to the real tokens above rather than rewritten everywhere. */ --dark: var(--color-deep-green); --cream: var(--color-warm-white); --lime: var(--color-volt); --coral: var(--color-sunset); --white: var(--color-white); --border: var(--border-default); --font-serif: "HV Fitzgerald", "Playfair Display", Georgia, serif; --font-sans: "PP Radio Grotesk", "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; /* ========================================================================== Console V4 — dark "glass over green" application theme. Composite recipes are stored as whole values so they drop straight into `background:` / `box-shadow:`. Never hardcode a hex on top of these. ========================================================================== */ /* Text on the dark canvas — warm-white alpha ladder */ --console-ink: var(--color-warm-white); --console-ink-88: rgba(247,243,235,0.88); --console-ink-80: rgba(247,243,235,0.80); --console-ink-72: rgba(247,243,235,0.72); --console-ink-66: rgba(247,243,235,0.66); --console-ink-60: rgba(247,243,235,0.60); --console-ink-55: rgba(247,243,235,0.55); --console-ink-50: rgba(247,243,235,0.50); --console-ink-45: rgba(247,243,235,0.45); --console-ink-42: rgba(247,243,235,0.42); --console-ink-muted: #A9C0B7; /* Volt washes */ --volt-05: rgba(222,255,90,0.05); --volt-08: rgba(222,255,90,0.08); --volt-10: rgba(222,255,90,0.10); --volt-12: rgba(222,255,90,0.12); --volt-16: rgba(222,255,90,0.16); --volt-18: rgba(222,255,90,0.18); --volt-22: rgba(222,255,90,0.22); --volt-28: rgba(222,255,90,0.28); --volt-32: rgba(222,255,90,0.32); --volt-35: rgba(222,255,90,0.35); --volt-40: rgba(222,255,90,0.40); --volt-60: rgba(222,255,90,0.60); /* Warm-white washes — hairlines, inset highlights, hover films */ --ww-05: rgba(247,243,235,0.05); --ww-07: rgba(247,243,235,0.07); --ww-08: rgba(247,243,235,0.08); --ww-10: rgba(247,243,235,0.10); --ww-14: rgba(247,243,235,0.14); --ww-18: rgba(247,243,235,0.18); --ww-22: rgba(247,243,235,0.22); --ww-24: rgba(247,243,235,0.24); --ww-45: rgba(247,243,235,0.45); /* Shadow ink — near-black green, never pure black */ --shadow-ink-22: rgba(10,20,17,0.22); --shadow-ink-25: rgba(10,20,17,0.25); --shadow-ink-30: rgba(10,20,17,0.30); --shadow-ink-40: rgba(10,20,17,0.40); /* Status (deltas on light cards) */ --status-success: #2E5B4F; --status-danger: #9C4423; /* Service-type colorways (registry badges + group dots) */ --svc-core-bg: var(--color-maroon); --svc-core-fg: var(--color-warm-white); --svc-plus-bg: var(--color-volt); --svc-plus-fg: var(--color-deep-green); --svc-both-bg: var(--color-sunset); --svc-both-fg: var(--color-deep-green); --svc-both-dot: linear-gradient(135deg, #800039 48%, #DEFF5A 52%); --glow-volt-sm: 0 2px 8px rgba(222,255,90,0.30); --glow-volt-md: 0 3px 12px rgba(222,255,90,0.30); --glow-volt-line: drop-shadow(0 0 5px rgba(222,255,90,0.50)); /* ---- The app canvas: four radial light sources over a green diagonal --- */ --bg-console: radial-gradient(1000px 620px at 85% -10%, rgba(222,255,90,0.14), transparent 58%), radial-gradient(1100px 700px at -12% 22%, rgba(49,92,82,0.60), transparent 62%), radial-gradient(900px 560px at 55% 118%, rgba(43,74,68,0.90), transparent 66%), radial-gradient(520px 380px at 96% 72%, rgba(164,150,116,0.16),transparent 65%), linear-gradient(160deg, #1a2d28, #1c302b 42%, #21382f); /* ---- Dark chrome band (dashboard header) ------------------------------ */ --bg-chrome: radial-gradient(560px 200px at 92% -40%, rgba(222,255,90,0.28), transparent 60%), radial-gradient(640px 240px at -8% 120%, rgba(49,92,82,0.90), transparent 65%), linear-gradient(105deg, #1c302b, #233C36 45%, #2B4A44 78%, #315C52); /* ---- Glass recipe: chrome (top bar / left rail) ------------------------ */ --glass-topbar-fill: linear-gradient(180deg, rgba(35,60,54,0.62), rgba(35,60,54,0.50) 55%, rgba(35,60,54,0.58)) padding-box, linear-gradient(180deg, rgba(247,243,235,0.45), rgba(247,243,235,0.10)) border-box; --glass-topbar-blur: blur(22px) saturate(1.6) brightness(1.1); --glass-topbar-shadow: 0 14px 40px rgba(10,20,17,0.40), inset 0 1px 0 rgba(247,243,235,0.22); /* ---- Glass recipe: mint panel (sidebars, list containers) ------------- */ --glass-panel-fill: linear-gradient(180deg, rgba(199,220,205,0.18), rgba(199,220,205,0.06) 70%, rgba(199,220,205,0.12)) padding-box, linear-gradient(135deg, rgba(222,255,90,0.28), rgba(247,243,235,0.10) 40%, rgba(222,255,90,0.05)) border-box; --glass-panel-blur: blur(18px) saturate(1.35); --glass-panel-shadow: 0 12px 30px rgba(10,20,17,0.30), inset 0 1px 0 rgba(247,243,235,0.15); /* ---- Glass recipe: linen card (light focus object on dark canvas) ----- */ --glass-linen-fill: linear-gradient(180deg, rgba(243,236,218,0.94), rgba(243,236,218,0.82)) padding-box, linear-gradient(135deg, #fffdf6, rgba(243,236,218,0.35) 40%, rgba(164,150,116,0.75)) border-box; --glass-linen-blur: blur(30px) saturate(1.4) brightness(1.3); --glass-linen-shadow: 0 18px 44px rgba(10,20,17,0.40), inset 0 1px 0 rgba(255,255,255,0.60); /* ---- Glass recipe: dark data card (KPI tiles, chart containers) ------- */ --glass-card-fill: linear-gradient(180deg, rgba(35,60,54,0.92), rgba(43,74,68,0.86)) padding-box, linear-gradient(135deg, rgba(222,255,90,0.40), rgba(247,243,235,0.14) 40%, rgba(222,255,90,0.08)) border-box; --glass-card-blur: blur(14px) saturate(1.25); --glass-card-shadow: 0 10px 26px rgba(35,60,54,0.28), inset 0 1px 0 rgba(247,243,235,0.12); /* ---- Glass recipe: hero KPI card (brighter volt stroke) --------------- */ --glass-hero-fill: linear-gradient(180deg, rgba(35,60,54,0.90), rgba(28,48,43,0.85)) padding-box, linear-gradient(135deg, rgba(222,255,90,0.60), rgba(222,255,90,0.15)) border-box; --glass-hero-shadow: 0 10px 26px rgba(10,20,17,0.35); } * { box-sizing: border-box; } /* The page ground and the default ink are theme roles, not the dark-only console tokens this rule used to carry. Those tokens have no light value, so while they were here the page painted dark whatever `data-theme` said -- and because this file loads AFTER public/common/app.css on the dashboard, it beat that file's correct `background: var(--ground-page)` and the light theme never reached the signed-in app at all. */ body { margin: 0; font-family: var(--font-sans); color: var(--ink-primary); background: var(--ground-page); background-color: var(--ground-page-flat); background-attachment: fixed; min-height: 100vh; } /* Form controls don't inherit the page font by default — they use the OS UI font unless told otherwise. */ select, input, button, textarea { font-family: inherit; } /* Thin warm-white scrollbars over the dark canvas. */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--ww-22); border-radius: 8px; } ::-webkit-scrollbar-track { background: transparent; } * { scrollbar-color: var(--ww-22) transparent; scrollbar-width: thin; } /* The italic-volt emphasis word — one per page headline. */ h1 em, .em-volt { font-style: italic; color: var(--color-volt); } /* ========================================================================== Glass primitives — the gradient-border technique used by every panel. Two backgrounds, different clip boxes: one clipped to padding-box (the fill), one to border-box (a gradient showing through a transparent 1px border). Requires `border: 1px solid transparent`, or nothing renders. ========================================================================== */ .glass-panel, .glass-card, .glass-hero, .glass-linen { border: 1px solid transparent; } .glass-panel { background: var(--glass-panel-fill); backdrop-filter: var(--glass-panel-blur); -webkit-backdrop-filter: var(--glass-panel-blur); box-shadow: var(--glass-panel-shadow); border-radius: 18px; } .glass-card { background: var(--glass-card-fill); backdrop-filter: var(--glass-card-blur); -webkit-backdrop-filter: var(--glass-card-blur); box-shadow: var(--glass-card-shadow); border-radius: 13px; } .glass-hero { background: var(--glass-hero-fill); box-shadow: var(--glass-hero-shadow); border-radius: 13px; } .glass-linen { color: var(--color-deep-green); background: var(--glass-linen-fill); backdrop-filter: var(--glass-linen-blur); -webkit-backdrop-filter: var(--glass-linen-blur); box-shadow: var(--glass-linen-shadow); border-radius: 18px; } /* Fallback for browsers without backdrop-filter: opaque fills so text contrast never breaks. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass-panel { background: #2c4a43 padding-box, linear-gradient(135deg, var(--volt-28), var(--ww-10) 40%, var(--volt-05)) border-box; } .glass-card { background: #24403A padding-box, linear-gradient(135deg, var(--volt-40), var(--ww-14) 40%, var(--volt-08)) border-box; } .glass-linen { background: #F1EAD8 padding-box, linear-gradient(135deg,#fffdf6, rgba(243,236,218,0.35) 40%, rgba(164,150,116,0.75)) border-box; } } /* ========================================================================== V7 semantic theme layer (HENG-87) -- role-named tokens that flip between light and dark. Coexists deliberately with the legacy "console" layer above: existing dashboard blocks stay wired to the console tokens until HENG-89/HENG-106 restyle them. Each raw literal is written exactly once as a light/dark underscore-prefixed pair, then referenced by the flipping root, prefers-color-scheme and data-theme blocks below so the three paths can never quietly drift apart. ========================================================================== */ :root { --_light-ground-page: radial-gradient(1000px 620px at 88% -6%, rgba(222,255,90,0.34), transparent 58%), radial-gradient(1100px 700px at -12% 20%, rgba(199,220,205,0.6), transparent 62%), radial-gradient(900px 620px at 18% 62%, rgba(255,253,246,0.75), transparent 64%), radial-gradient(820px 560px at 82% 88%, rgba(199,220,205,0.4), transparent 66%), radial-gradient(760px 520px at 40% 108%, rgba(255,253,246,0.8), transparent 68%), linear-gradient(160deg, #FBF8F1, #F6F0E3 38%, #F2EAD8 66%, #F7F2E5); --_dark-ground-page: var(--bg-console); --_light-ground-page-flat: var(--color-linen); --_dark-ground-page-flat: #1c302b; --_light-surface-nav-glass-fill: linear-gradient(180deg, rgba(211,230,218,0.72), rgba(199,220,205,0.58) 55%, rgba(205,225,211,0.68)) padding-box, linear-gradient(180deg, rgba(255,253,246,0.95), rgba(49,92,82,0.35)) border-box; --_dark-surface-nav-glass-fill: var(--glass-topbar-fill); --_light-surface-nav-glass-blur: blur(22px) saturate(1.3); --_dark-surface-nav-glass-blur: var(--glass-topbar-blur); --_light-surface-nav-glass-shadow: 0 14px 40px rgba(35,60,54,0.14), inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -1px 0 rgba(49,92,82,0.2); --_dark-surface-nav-glass-shadow: var(--glass-topbar-shadow); --_light-surface-card-fill: linear-gradient(165deg, rgba(255,254,250,0.96), rgba(252,248,240,0.92) 40%, rgba(249,244,234,0.88) 74%, rgba(255,253,247,0.95)) padding-box, linear-gradient(135deg, #FFFFFF, rgba(243,236,218,0.5) 45%, rgba(164,150,116,0.45)) border-box; --_dark-surface-card-fill: linear-gradient(180deg, rgba(35,60,54,0.92), rgba(43,74,68,0.86)) padding-box, linear-gradient(180deg, rgba(247,243,235,0.35), rgba(247,243,235,0.08)) border-box; --_light-surface-card-shadow: 0 14px 34px rgba(35,60,54,0.1), inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(164,150,116,0.22); --_dark-surface-card-shadow: 0 10px 26px rgba(10,20,17,0.35), inset 0 1px 0 rgba(247,243,235,0.12); --_light-surface-elevated-fill: var(--_light-surface-nav-glass-fill); --_dark-surface-elevated-fill: linear-gradient(180deg,#24403A,#1C302B); --_light-surface-elevated-shadow: 0 22px 50px rgba(35,60,54,0.26); --_dark-surface-elevated-shadow: 0 22px 50px rgba(5,12,10,0.6); --_light-ink-primary: #233C36; --_dark-ink-primary: #F7F3EB; --_light-ink-soft: rgba(35,60,54,0.84); --_dark-ink-soft: rgba(247,243,235,0.84); --_light-ink-muted: rgba(35,60,54,0.74); --_dark-ink-muted: rgba(247,243,235,0.78); --_light-ink-heading: #1C302B; --_dark-ink-heading: #F7F3EB; --_light-ink-emphasis: #233C36; --_dark-ink-emphasis: #DEFF5A; --_light-line-hairline: rgba(35,60,54,0.22); --_dark-line-hairline: rgba(247,243,235,0.2); --_light-line-card-border: rgba(49,92,82,0.18); --_dark-line-card-border: rgba(247,243,235,0.1); --_light-state-hover-fill: rgba(35,60,54,0.05); --_dark-state-hover-fill: rgba(247,243,235,0.07); --_light-state-bar-track: rgba(35,60,54,0.08); --_dark-state-bar-track: rgba(247,243,235,0.07); --_light-state-grid-dash: rgba(35,60,54,0.12); --_dark-state-grid-dash: rgba(247,243,235,0.15); --_light-state-grid-baseline: rgba(35,60,54,0.22); --_dark-state-grid-baseline: rgba(247,243,235,0.2); /* HENG-106 chart series. The V7 style guide states the rule for line charts as "#315C52 (light) / #DEFF5A (dark)" -- jade on a light surface, volt on a dark one -- and the V7 mock authors the omni trend line as #315C52 with a jade area wash beneath it. The line was volt in both themes, which is the dark value applied to a light card. */ --_light-chart-series-ty: #315C52; --_dark-chart-series-ty: var(--color-volt); --_light-chart-series-ly: rgba(35,60,54,0.7); --_dark-chart-series-ly: rgba(247,243,235,0.7); --_light-chart-area-ty-0: rgba(49,92,82,0.30); --_light-chart-area-ty-1: rgba(49,92,82,0.13); --_light-chart-area-ty-2: rgba(49,92,82,0.04); --_light-chart-area-ty-3: rgba(49,92,82,0); --_dark-chart-area-ty-0: rgba(222,255,90,0.26); --_dark-chart-area-ty-1: rgba(222,255,90,0.11); --_dark-chart-area-ty-2: rgba(222,255,90,0.03); --_dark-chart-area-ty-3: rgba(222,255,90,0); --_light-chart-area-ly-0: rgba(199,220,205,0.5); --_light-chart-area-ly-1: rgba(199,220,205,0); --_dark-chart-area-ly-0: rgba(247,243,235,0.18); --_dark-chart-area-ly-1: rgba(247,243,235,0); /* Replenishment trend. The V7 mock only evidences this chart on a dark card, where it uses volt / sand / jade. On a light card the guide's rule turns volt into jade, which would collide with In-Full, so In-Full takes its own value from the guide's light palette and On-Time keeps sand, which reads on either ground. In-Stock reuses --chart-series-ty. */ --_light-repl-series-infull: #6E837B; --_dark-repl-series-infull: #9FBFA9; --_light-repl-series-ontime: #A49674; --_dark-repl-series-ontime: #A49674; --_light-repl-wash-instock: rgba(49,92,82,0.16); --_dark-repl-wash-instock: rgba(222,255,90,0.16); --_light-repl-wash-infull: rgba(110,131,123,0.12); --_dark-repl-wash-infull: rgba(159,191,169,0.10); --_light-tab-active-bg: linear-gradient(160deg, rgba(43,74,68,0.9), rgba(35,60,54,0.82)); --_dark-tab-active-bg: linear-gradient(160deg, rgba(43,74,68,0.9), rgba(35,60,54,0.82)); --_light-tab-active-fg: var(--color-warm-white); --_dark-tab-active-fg: var(--color-warm-white); --_light-meaning-positive: #2E5B4F; --_dark-meaning-positive: var(--color-volt); --_light-meaning-negative: #800039; --_dark-meaning-negative: var(--color-sunset); --_light-meaning-success-bg: rgba(49,92,82,0.14); --_dark-meaning-success-bg: var(--volt-16); --_light-meaning-success-border: rgba(49,92,82,0.4); --_dark-meaning-success-border: var(--volt-40); --_light-meaning-danger-bg: rgba(128,0,57,0.10); --_dark-meaning-danger-bg: rgba(255,131,91,0.16); --_light-meaning-danger-border: rgba(128,0,57,0.35); --_dark-meaning-danger-border: rgba(255,131,91,0.4); --_light-caret-color: var(--color-jade); --_dark-caret-color: var(--color-volt); --_light-scrollbar-thumb: rgba(35,60,54,0.25); --_dark-scrollbar-thumb: rgba(247,243,235,0.25); /* ---- The V5 sign-in page (HENG-88) ------------------------------------- The sign-in card is a LIGHTER glass than --surface-card-*: it floats over the page canvas as the only object on the screen, where the console's cards sit in a grid and have to stay legible against each other. Recipe taken verbatim from the design source (Hatch Analytics Sign In.dc.html, `.si-card`), which is why the values differ from the console card's rather than being derived from it. */ --_light-surface-authcard-fill: linear-gradient(180deg, rgba(247,243,235,0.72), rgba(247,243,235,0.5) 60%, rgba(247,243,235,0.6)) padding-box, linear-gradient(135deg, #fffdf6, rgba(243,236,218,0.5) 40%, rgba(164,150,116,0.7)) border-box; --_dark-surface-authcard-fill: linear-gradient(180deg, rgba(247,243,235,0.09), rgba(247,243,235,0.03) 60%, rgba(247,243,235,0.06)) padding-box, linear-gradient(160deg, rgba(222,255,90,0.45), rgba(247,243,235,0.16) 50%, rgba(222,255,90,0.06)) border-box; --_light-surface-authcard-blur: blur(30px) saturate(1.4) brightness(1.08); --_dark-surface-authcard-blur: blur(30px) saturate(1.5) brightness(1.08); --_light-surface-authcard-shadow: 0 24px 60px rgba(35,60,54,0.18), inset 0 1px 0 rgba(255,255,255,0.7); --_dark-surface-authcard-shadow: 0 24px 60px rgba(10,20,17,0.45), inset 0 1px 0 rgba(247,243,235,0.16); /* Secondary/SSO control surface, and the text input's. Both are Clerk's controls, reached through appearance.elements in public/login.js -- the tokens live here so the values are still written once and flip with the theme like everything else. */ --_light-surface-control-fill: rgba(255,255,255,0.55); --_dark-surface-control-fill: rgba(247,243,235,0.07); --_light-surface-control-hover-fill: rgba(255,255,255,0.85); --_dark-surface-control-hover-fill: rgba(247,243,235,0.14); --_light-line-control-border: rgba(35,60,54,0.2); --_dark-line-control-border: rgba(247,243,235,0.25); --_light-line-control-hover-border: rgba(35,60,54,0.4); --_dark-line-control-hover-border: rgba(247,243,235,0.5); --_light-surface-input-fill: rgba(255,255,255,0.6); --_dark-surface-input-fill: rgba(247,243,235,0.07); --_light-surface-input-focus-fill: rgba(255,255,255,0.85); --_dark-surface-input-focus-fill: rgba(247,243,235,0.1); --_light-line-input-focus-border: #233C36; --_dark-line-input-focus-border: #DEFF5A; /* The input's own focus treatment: a 4px volt halo, heavier on light where the canvas is bright. NOT --focus-ring, which is the generic 3px ring on everything else -- the design source gives the field its own. */ --_light-glow-input-focus: 0 0 0 4px rgba(222,255,90,0.45); --_dark-glow-input-focus: 0 0 0 4px rgba(222,255,90,0.25); /* Uppercase form labels are Jade on light and Mint on dark (brand reference §6); the eyebrow and the headline's italic emphasis go Jade on light and Volt on dark. Two tokens, because the dark values differ. */ --_light-ink-label: #315C52; --_dark-ink-label: #C7DCCD; --_light-ink-accent: #315C52; --_dark-ink-accent: #DEFF5A; --_light-surface-card-edge-highlight: rgba(255,255,255,0.9); --_dark-surface-card-edge-highlight: rgba(247,243,235,0.5); /* Deep green on light reads as a clear ring; volt on light is a near- invisible halo (both are high-luminance colours). Volt on the dark canvas is unchanged -- that pairing was already high contrast. */ --_light-focus-ring: 0 0 0 3px rgba(35,60,54,0.6); --_dark-focus-ring: 0 0 0 3px rgba(222,255,90,0.55); /* The avatar circle's lightbox ::backdrop (HENG-90) -- the first modal in the codebase, so there is no existing ::backdrop token to reuse. Unlike --avatar-fixed-*, this DOES flip with the theme, per the design source's dialog treatment. Light uses the ink-primary hue at low opacity; dark uses a near-black green, darker than --_dark-ground-page-flat, consistent with how this file's other dark shadows go heavier than their light counterparts. */ --_light-overlay-scrim: rgba(35,60,54,0.45); --_dark-overlay-scrim: rgba(10,20,17,0.6); /* The lightbox panel itself (HENG-90). Light is V7's own dialog glass -- the Confirm sign out dialog and the Account drawer -- which is far more opaque than the nav glass --surface-elevated-fill reuses, and is never drawn without its blur. Dark keeps the solid elevated fill. */ --_light-surface-dialog-fill: linear-gradient(160deg, rgba(205,225,211,0.94), rgba(199,220,205,0.86) 45%, rgba(205,225,211,0.92)) padding-box, linear-gradient(135deg, #fffdf6, rgba(199,220,205,0.4) 40%, rgba(49,92,82,0.6)) border-box; --_dark-surface-dialog-fill: var(--_dark-surface-elevated-fill); --_light-surface-dialog-blur: blur(22px) saturate(1.3); --_dark-surface-dialog-blur: blur(22px) saturate(1.3); /* The same panel as ONE opaque colour, for embedded components that need a real colour to derive their own surfaces from. Clerk given "transparent" derives a black navbar. */ --_light-surface-dialog-solid: #CDE1D3; --_dark-surface-dialog-solid: #24403A; /* Ink on an --ink-accent fill: warm white on jade, deep green on volt. */ --_light-ink-on-accent: #F7F3EB; --_dark-ink-on-accent: #233C36; /* active tokens — default to light */ --ground-page: var(--_light-ground-page); --ground-page-flat: var(--_light-ground-page-flat); --surface-nav-glass-fill: var(--_light-surface-nav-glass-fill); --surface-nav-glass-blur: var(--_light-surface-nav-glass-blur); --surface-nav-glass-shadow: var(--_light-surface-nav-glass-shadow); --surface-card-fill: var(--_light-surface-card-fill); --surface-card-shadow: var(--_light-surface-card-shadow); --surface-elevated-fill: var(--_light-surface-elevated-fill); --surface-elevated-shadow: var(--_light-surface-elevated-shadow); --surface-dialog-fill: var(--_light-surface-dialog-fill); --surface-dialog-blur: var(--_light-surface-dialog-blur); --surface-dialog-solid: var(--_light-surface-dialog-solid); --ink-on-accent: var(--_light-ink-on-accent); --ink-primary: var(--_light-ink-primary); --ink-soft: var(--_light-ink-soft); --ink-muted: var(--_light-ink-muted); --ink-heading: var(--_light-ink-heading); --ink-emphasis: var(--_light-ink-emphasis); --line-hairline: var(--_light-line-hairline); --line-card-border: var(--_light-line-card-border); --state-hover-fill: var(--_light-state-hover-fill); --state-bar-track: var(--_light-state-bar-track); --chart-series-ty: var(--_light-chart-series-ty); --chart-series-ly: var(--_light-chart-series-ly); --chart-area-ty-0: var(--_light-chart-area-ty-0); --chart-area-ty-1: var(--_light-chart-area-ty-1); --chart-area-ty-2: var(--_light-chart-area-ty-2); --chart-area-ty-3: var(--_light-chart-area-ty-3); --chart-area-ly-0: var(--_light-chart-area-ly-0); --chart-area-ly-1: var(--_light-chart-area-ly-1); --repl-series-infull: var(--_light-repl-series-infull); --repl-series-ontime: var(--_light-repl-series-ontime); --repl-wash-instock: var(--_light-repl-wash-instock); --repl-wash-infull: var(--_light-repl-wash-infull); --state-grid-dash: var(--_light-state-grid-dash); --state-grid-baseline: var(--_light-state-grid-baseline); --tab-active-bg: var(--_light-tab-active-bg); --tab-active-fg: var(--_light-tab-active-fg); --meaning-positive: var(--_light-meaning-positive); --meaning-success: var(--_light-meaning-positive); --meaning-negative: var(--_light-meaning-negative); --meaning-danger: var(--_light-meaning-negative); --meaning-success-bg: var(--_light-meaning-success-bg); --meaning-success-border: var(--_light-meaning-success-border); --meaning-danger-bg: var(--_light-meaning-danger-bg); --meaning-danger-border: var(--_light-meaning-danger-border); --caret-color: var(--_light-caret-color); --scrollbar-thumb: var(--_light-scrollbar-thumb); --surface-card-edge-highlight: var(--_light-surface-card-edge-highlight); --focus-ring: var(--_light-focus-ring); --surface-authcard-fill: var(--_light-surface-authcard-fill); --surface-authcard-blur: var(--_light-surface-authcard-blur); --surface-authcard-shadow: var(--_light-surface-authcard-shadow); --surface-control-fill: var(--_light-surface-control-fill); --surface-control-hover-fill: var(--_light-surface-control-hover-fill); --line-control-border: var(--_light-line-control-border); --line-control-hover-border: var(--_light-line-control-hover-border); --surface-input-fill: var(--_light-surface-input-fill); --surface-input-focus-fill: var(--_light-surface-input-focus-fill); --line-input-focus-border: var(--_light-line-input-focus-border); --glow-input-focus: var(--_light-glow-input-focus); --ink-label: var(--_light-ink-label); --ink-accent: var(--_light-ink-accent); /* Fixed — same value in both themes, no --_light-/--_dark- pair needed */ --surface-fixed-dark: linear-gradient(160deg, #2B4A44, #233C36 55%, #1C302B); --ink-on-fixed-light: var(--color-deep-green); --ink-on-fixed-dark: var(--color-warm-white); --ink-on-fixed-dark-soft: rgba(247,243,235,0.72); /* The primary CTA on the sign-in card (HENG-88). Volt fill with deep-green ink is the brand's core high-contrast pairing and is the SAME on both themes -- the button does not flip, so this is a fixed token rather than a light/dark pair. Design source's own gradient and glow. */ --cta-volt-fill: linear-gradient(180deg, #E9FF8A, #DEFF5A 45%, #CDF765); --cta-volt-shadow: 0 12px 28px rgba(222,255,90,0.3), inset 0 1px 0 rgba(255,255,255,0.6); --btn-primary-spinner-track: rgba(35, 60, 54, 0.35); /* The one fixed-dark surface with a focusable control that relies on the generic :focus-visible rule (the company switcher's list panel, see app.css) -- the old volt-on-dark value, preserved exactly, so flipping --focus-ring above doesn't leave it with a deep-green ring on a permanently-dark background. */ --focus-ring-on-fixed-dark: 0 0 0 3px rgba(222,255,90,0.55); --selection-bg: rgba(222,255,90,0.55); --selection-fg: #233C36; /* The initials circle (HENG-90): a fixed surface, not a themed one -- the ink inside it comes from the circle, not from the page, so it is deliberately NOT one of the --_light-/--_dark- pairs below. */ --avatar-fixed-bg: var(--color-deep-green); --avatar-fixed-ink: var(--color-volt); --overlay-scrim: var(--_light-overlay-scrim); /* HENG-182: unavailable Share button */ --share-unavailable-bg: rgba(35,60,54,0.08); --share-unavailable-line: rgba(35,60,54,0.22); --share-unavailable-ink: rgba(35,60,54,0.74); } @media (prefers-color-scheme: dark) { :root { --ground-page: var(--_dark-ground-page); --ground-page-flat: var(--_dark-ground-page-flat); --surface-nav-glass-fill: var(--_dark-surface-nav-glass-fill); --surface-nav-glass-blur: var(--_dark-surface-nav-glass-blur); --surface-nav-glass-shadow: var(--_dark-surface-nav-glass-shadow); --surface-card-fill: var(--_dark-surface-card-fill); --surface-card-shadow: var(--_dark-surface-card-shadow); --surface-elevated-fill: var(--_dark-surface-elevated-fill); --surface-elevated-shadow: var(--_dark-surface-elevated-shadow); --surface-dialog-fill: var(--_dark-surface-dialog-fill); --surface-dialog-blur: var(--_dark-surface-dialog-blur); --surface-dialog-solid: var(--_dark-surface-dialog-solid); --ink-on-accent: var(--_dark-ink-on-accent); --ink-primary: var(--_dark-ink-primary); --ink-soft: var(--_dark-ink-soft); --ink-muted: var(--_dark-ink-muted); --ink-heading: var(--_dark-ink-heading); --ink-emphasis: var(--_dark-ink-emphasis); --line-hairline: var(--_dark-line-hairline); --line-card-border: var(--_dark-line-card-border); --state-hover-fill: var(--_dark-state-hover-fill); --state-bar-track: var(--_dark-state-bar-track); --chart-series-ty: var(--_dark-chart-series-ty); --chart-series-ly: var(--_dark-chart-series-ly); --chart-area-ty-0: var(--_dark-chart-area-ty-0); --chart-area-ty-1: var(--_dark-chart-area-ty-1); --chart-area-ty-2: var(--_dark-chart-area-ty-2); --chart-area-ty-3: var(--_dark-chart-area-ty-3); --chart-area-ly-0: var(--_dark-chart-area-ly-0); --chart-area-ly-1: var(--_dark-chart-area-ly-1); --repl-series-infull: var(--_dark-repl-series-infull); --repl-series-ontime: var(--_dark-repl-series-ontime); --repl-wash-instock: var(--_dark-repl-wash-instock); --repl-wash-infull: var(--_dark-repl-wash-infull); --chart-series-ty: var(--_dark-chart-series-ty); --chart-series-ly: var(--_dark-chart-series-ly); --chart-area-ty-0: var(--_dark-chart-area-ty-0); --chart-area-ty-1: var(--_dark-chart-area-ty-1); --chart-area-ty-2: var(--_dark-chart-area-ty-2); --chart-area-ty-3: var(--_dark-chart-area-ty-3); --chart-area-ly-0: var(--_dark-chart-area-ly-0); --chart-area-ly-1: var(--_dark-chart-area-ly-1); --repl-series-infull: var(--_dark-repl-series-infull); --repl-series-ontime: var(--_dark-repl-series-ontime); --repl-wash-instock: var(--_dark-repl-wash-instock); --repl-wash-infull: var(--_dark-repl-wash-infull); --repl-series-infull: var(--_dark-repl-series-infull); --repl-series-ontime: var(--_dark-repl-series-ontime); --repl-wash-instock: var(--_dark-repl-wash-instock); --repl-wash-infull: var(--_dark-repl-wash-infull); --state-grid-dash: var(--_dark-state-grid-dash); --state-grid-baseline: var(--_dark-state-grid-baseline); --tab-active-bg: var(--_dark-tab-active-bg); --tab-active-fg: var(--_dark-tab-active-fg); --meaning-positive: var(--_dark-meaning-positive); --meaning-success: var(--_dark-meaning-positive); --meaning-negative: var(--_dark-meaning-negative); --meaning-danger: var(--_dark-meaning-negative); --meaning-success-bg: var(--_dark-meaning-success-bg); --meaning-success-border: var(--_dark-meaning-success-border); --meaning-danger-bg: var(--_dark-meaning-danger-bg); --meaning-danger-border: var(--_dark-meaning-danger-border); --caret-color: var(--_dark-caret-color); --scrollbar-thumb: var(--_dark-scrollbar-thumb); --surface-card-edge-highlight: var(--_dark-surface-card-edge-highlight); --focus-ring: var(--_dark-focus-ring); --surface-authcard-fill: var(--_dark-surface-authcard-fill); --surface-authcard-blur: var(--_dark-surface-authcard-blur); --surface-authcard-shadow: var(--_dark-surface-authcard-shadow); --surface-control-fill: var(--_dark-surface-control-fill); --surface-control-hover-fill: var(--_dark-surface-control-hover-fill); --line-control-border: var(--_dark-line-control-border); --line-control-hover-border: var(--_dark-line-control-hover-border); --surface-input-fill: var(--_dark-surface-input-fill); --surface-input-focus-fill: var(--_dark-surface-input-focus-fill); --line-input-focus-border: var(--_dark-line-input-focus-border); --glow-input-focus: var(--_dark-glow-input-focus); --ink-label: var(--_dark-ink-label); --ink-accent: var(--_dark-ink-accent); --overlay-scrim: var(--_dark-overlay-scrim); --share-unavailable-bg: rgba(247,243,235,0.06); --share-unavailable-line: rgba(247,243,235,0.2); --share-unavailable-ink: rgba(247,243,235,0.78); } } :root[data-theme="light"] { --ground-page: var(--_light-ground-page); --ground-page-flat: var(--_light-ground-page-flat); --surface-nav-glass-fill: var(--_light-surface-nav-glass-fill); --surface-nav-glass-blur: var(--_light-surface-nav-glass-blur); --surface-nav-glass-shadow: var(--_light-surface-nav-glass-shadow); --surface-card-fill: var(--_light-surface-card-fill); --surface-card-shadow: var(--_light-surface-card-shadow); --surface-elevated-fill: var(--_light-surface-elevated-fill); --surface-elevated-shadow: var(--_light-surface-elevated-shadow); --surface-dialog-fill: var(--_light-surface-dialog-fill); --surface-dialog-blur: var(--_light-surface-dialog-blur); --surface-dialog-solid: var(--_light-surface-dialog-solid); --ink-on-accent: var(--_light-ink-on-accent); --ink-primary: var(--_light-ink-primary); --ink-soft: var(--_light-ink-soft); --ink-muted: var(--_light-ink-muted); --ink-heading: var(--_light-ink-heading); --ink-emphasis: var(--_light-ink-emphasis); --line-hairline: var(--_light-line-hairline); --line-card-border: var(--_light-line-card-border); --state-hover-fill: var(--_light-state-hover-fill); --state-bar-track: var(--_light-state-bar-track); --chart-series-ty: var(--_light-chart-series-ty); --chart-series-ly: var(--_light-chart-series-ly); --chart-area-ty-0: var(--_light-chart-area-ty-0); --chart-area-ty-1: var(--_light-chart-area-ty-1); --chart-area-ty-2: var(--_light-chart-area-ty-2); --chart-area-ty-3: var(--_light-chart-area-ty-3); --chart-area-ly-0: var(--_light-chart-area-ly-0); --chart-area-ly-1: var(--_light-chart-area-ly-1); --repl-series-infull: var(--_light-repl-series-infull); --repl-series-ontime: var(--_light-repl-series-ontime); --repl-wash-instock: var(--_light-repl-wash-instock); --repl-wash-infull: var(--_light-repl-wash-infull); --state-grid-dash: var(--_light-state-grid-dash); --state-grid-baseline: var(--_light-state-grid-baseline); --tab-active-bg: var(--_light-tab-active-bg); --tab-active-fg: var(--_light-tab-active-fg); --meaning-positive: var(--_light-meaning-positive); --meaning-success: var(--_light-meaning-positive); --meaning-negative: var(--_light-meaning-negative); --meaning-danger: var(--_light-meaning-negative); --meaning-success-bg: var(--_light-meaning-success-bg); --meaning-success-border: var(--_light-meaning-success-border); --meaning-danger-bg: var(--_light-meaning-danger-bg); --meaning-danger-border: var(--_light-meaning-danger-border); --caret-color: var(--_light-caret-color); --scrollbar-thumb: var(--_light-scrollbar-thumb); --surface-card-edge-highlight: var(--_light-surface-card-edge-highlight); --focus-ring: var(--_light-focus-ring); --surface-authcard-fill: var(--_light-surface-authcard-fill); --surface-authcard-blur: var(--_light-surface-authcard-blur); --surface-authcard-shadow: var(--_light-surface-authcard-shadow); --surface-control-fill: var(--_light-surface-control-fill); --surface-control-hover-fill: var(--_light-surface-control-hover-fill); --line-control-border: var(--_light-line-control-border); --line-control-hover-border: var(--_light-line-control-hover-border); --surface-input-fill: var(--_light-surface-input-fill); --surface-input-focus-fill: var(--_light-surface-input-focus-fill); --line-input-focus-border: var(--_light-line-input-focus-border); --glow-input-focus: var(--_light-glow-input-focus); --ink-label: var(--_light-ink-label); --ink-accent: var(--_light-ink-accent); --overlay-scrim: var(--_light-overlay-scrim); --share-unavailable-bg: rgba(35,60,54,0.08); --share-unavailable-line: rgba(35,60,54,0.22); --share-unavailable-ink: rgba(35,60,54,0.74); } :root[data-theme="dark"] { --ground-page: var(--_dark-ground-page); --ground-page-flat: var(--_dark-ground-page-flat); --surface-nav-glass-fill: var(--_dark-surface-nav-glass-fill); --surface-nav-glass-blur: var(--_dark-surface-nav-glass-blur); --surface-nav-glass-shadow: var(--_dark-surface-nav-glass-shadow); --surface-card-fill: var(--_dark-surface-card-fill); --surface-card-shadow: var(--_dark-surface-card-shadow); --surface-elevated-fill: var(--_dark-surface-elevated-fill); --surface-elevated-shadow: var(--_dark-surface-elevated-shadow); --surface-dialog-fill: var(--_dark-surface-dialog-fill); --surface-dialog-blur: var(--_dark-surface-dialog-blur); --surface-dialog-solid: var(--_dark-surface-dialog-solid); --ink-on-accent: var(--_dark-ink-on-accent); --ink-primary: var(--_dark-ink-primary); --ink-soft: var(--_dark-ink-soft); --ink-muted: var(--_dark-ink-muted); --ink-heading: var(--_dark-ink-heading); --ink-emphasis: var(--_dark-ink-emphasis); --line-hairline: var(--_dark-line-hairline); --line-card-border: var(--_dark-line-card-border); --state-hover-fill: var(--_dark-state-hover-fill); --state-bar-track: var(--_dark-state-bar-track); --chart-series-ty: var(--_dark-chart-series-ty); --chart-series-ly: var(--_dark-chart-series-ly); --chart-area-ty-0: var(--_dark-chart-area-ty-0); --chart-area-ty-1: var(--_dark-chart-area-ty-1); --chart-area-ty-2: var(--_dark-chart-area-ty-2); --chart-area-ty-3: var(--_dark-chart-area-ty-3); --chart-area-ly-0: var(--_dark-chart-area-ly-0); --chart-area-ly-1: var(--_dark-chart-area-ly-1); --repl-series-infull: var(--_dark-repl-series-infull); --repl-series-ontime: var(--_dark-repl-series-ontime); --repl-wash-instock: var(--_dark-repl-wash-instock); --repl-wash-infull: var(--_dark-repl-wash-infull); --state-grid-dash: var(--_dark-state-grid-dash); --state-grid-baseline: var(--_dark-state-grid-baseline); --tab-active-bg: var(--_dark-tab-active-bg); --tab-active-fg: var(--_dark-tab-active-fg); --meaning-positive: var(--_dark-meaning-positive); --meaning-success: var(--_dark-meaning-positive); --meaning-negative: var(--_dark-meaning-negative); --meaning-danger: var(--_dark-meaning-negative); --meaning-success-bg: var(--_dark-meaning-success-bg); --meaning-success-border: var(--_dark-meaning-success-border); --meaning-danger-bg: var(--_dark-meaning-danger-bg); --meaning-danger-border: var(--_dark-meaning-danger-border); --caret-color: var(--_dark-caret-color); --scrollbar-thumb: var(--_dark-scrollbar-thumb); --surface-card-edge-highlight: var(--_dark-surface-card-edge-highlight); --focus-ring: var(--_dark-focus-ring); --surface-authcard-fill: var(--_dark-surface-authcard-fill); --surface-authcard-blur: var(--_dark-surface-authcard-blur); --surface-authcard-shadow: var(--_dark-surface-authcard-shadow); --surface-control-fill: var(--_dark-surface-control-fill); --surface-control-hover-fill: var(--_dark-surface-control-hover-fill); --line-control-border: var(--_dark-line-control-border); --line-control-hover-border: var(--_dark-line-control-hover-border); --surface-input-fill: var(--_dark-surface-input-fill); --surface-input-focus-fill: var(--_dark-surface-input-focus-fill); --line-input-focus-border: var(--_dark-line-input-focus-border); --glow-input-focus: var(--_dark-glow-input-focus); --ink-label: var(--_dark-ink-label); --ink-accent: var(--_dark-ink-accent); --overlay-scrim: var(--_dark-overlay-scrim); --share-unavailable-bg: rgba(247,243,235,0.06); --share-unavailable-line: rgba(247,243,235,0.2); --share-unavailable-ink: rgba(247,243,235,0.78); } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; } ::selection { background: var(--selection-bg); color: var(--selection-fg); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 31px; min-height: 31px; padding: 6px; border: none; border-radius: 10px; background: transparent; color: var(--ink-primary); cursor: pointer; } .theme-toggle:hover { background: var(--state-hover-fill); } /* Nav-bar roles read off the V7 prototype (Hatchery Console V7.dc.html) rather than transcribed from prose: the Beta badge, the search field's fill, and the Share call to action, which is a filled volt button on light and an outlined one on dark. */ :root { --beta-ink: #315C52; --beta-fill: rgba(49, 92, 82, 0.07); --beta-line: rgba(49, 92, 82, 0.32); --field-fill: rgba(255, 253, 246, 0.55); --cta-fill: linear-gradient(180deg, rgba(222, 255, 90, 0.95), rgba(205, 247, 101, 0.95)); --cta-ink: #233C36; --cta-line: transparent; } @media (prefers-color-scheme: dark) { :root { --beta-ink: rgba(247, 243, 235, 0.82); --beta-fill: rgba(247, 243, 235, 0.08); --beta-line: rgba(247, 243, 235, 0.3); --field-fill: rgba(247, 243, 235, 0.06); --cta-fill: linear-gradient(180deg, rgba(222, 255, 90, 0.22), rgba(222, 255, 90, 0.12)); --cta-ink: #DEFF5A; --cta-line: #DEFF5A; } } :root[data-theme="light"] { --beta-ink: #315C52; --beta-fill: rgba(49, 92, 82, 0.07); --beta-line: rgba(49, 92, 82, 0.32); --field-fill: rgba(255, 253, 246, 0.55); --cta-fill: linear-gradient(180deg, rgba(222, 255, 90, 0.95), rgba(205, 247, 101, 0.95)); --cta-ink: #233C36; --cta-line: transparent; } :root[data-theme="dark"] { --beta-ink: rgba(247, 243, 235, 0.82); --beta-fill: rgba(247, 243, 235, 0.08); --beta-line: rgba(247, 243, 235, 0.3); --field-fill: rgba(247, 243, 235, 0.06); --cta-fill: linear-gradient(180deg, rgba(222, 255, 90, 0.22), rgba(222, 255, 90, 0.12)); --cta-ink: #DEFF5A; --cta-line: #DEFF5A; } /* The dashboard blocks were dark-only because HENG-87 originally froze them for HENG-89/HENG-106. That scope changed: the cards and charts belong here, so the block tokens get light values rather than every block rule getting rewritten. Card fill and shadow are read off the V7 prototype's own light cards. */ :root { --console-ink: #233C36; --console-ink-muted: rgba(35,60,54,0.62); --console-ink-88: rgba(35,60,54,0.88); --console-ink-80: rgba(35,60,54,0.80); --console-ink-72: rgba(35,60,54,0.72); --console-ink-66: rgba(35,60,54,0.66); --console-ink-60: rgba(35,60,54,0.60); --console-ink-55: rgba(35,60,54,0.55); --console-ink-50: rgba(35,60,54,0.50); --console-ink-45: rgba(35,60,54,0.45); --console-ink-42: rgba(35,60,54,0.42); --ww-05: rgba(35,60,54,0.05); --ww-07: rgba(35,60,54,0.07); --ww-08: rgba(35,60,54,0.08); --ww-10: rgba(35,60,54,0.10); --ww-14: rgba(35,60,54,0.14); --ww-18: rgba(35,60,54,0.18); --ww-22: rgba(35,60,54,0.22); --ww-24: rgba(35,60,54,0.24); --ww-45: rgba(35,60,54,0.45); --shadow-ink-22: rgba(35,60,54,0.10); --shadow-ink-25: rgba(35,60,54,0.12); --shadow-ink-30: rgba(35,60,54,0.14); --shadow-ink-40: rgba(35,60,54,0.18); --glass-card-fill: linear-gradient(165deg, rgba(255,254,250,0.96), rgba(252,248,240,0.90) 38%, rgba(248,243,232,0.86) 72%, rgba(255,253,247,0.94)); --glass-card-shadow: 0 12px 28px rgba(35,60,54,0.12), inset 0 1px 0 rgba(255,255,255,0.85); --glass-linen-fill: linear-gradient(180deg, rgba(207,226,213,0.92), rgba(199,220,205,0.80)); --glass-linen-shadow: 0 14px 34px rgba(35,60,54,0.13), inset 0 1px 0 rgba(255,255,255,0.75); --glass-panel-fill: linear-gradient(165deg, rgba(255,254,250,0.98), rgba(250,246,237,0.94)); --glass-panel-shadow: 0 10px 24px rgba(35,60,54,0.10), inset 0 1px 0 rgba(255,255,255,0.8); } @media (prefers-color-scheme: dark) { :root { --console-ink: var(--color-warm-white); --console-ink-muted: #A9C0B7; --console-ink-88: rgba(247,243,235,0.88); --console-ink-80: rgba(247,243,235,0.80); --console-ink-72: rgba(247,243,235,0.72); --console-ink-66: rgba(247,243,235,0.66); --console-ink-60: rgba(247,243,235,0.60); --console-ink-55: rgba(247,243,235,0.55); --console-ink-50: rgba(247,243,235,0.50); --console-ink-45: rgba(247,243,235,0.45); --console-ink-42: rgba(247,243,235,0.42); --ww-05: rgba(247,243,235,0.05); --ww-07: rgba(247,243,235,0.07); --ww-08: rgba(247,243,235,0.08); --ww-10: rgba(247,243,235,0.10); --ww-14: rgba(247,243,235,0.14); --ww-18: rgba(247,243,235,0.18); --ww-22: rgba(247,243,235,0.22); --ww-24: rgba(247,243,235,0.24); --ww-45: rgba(247,243,235,0.45); --shadow-ink-22: rgba(10,20,17,0.22); --shadow-ink-25: rgba(10,20,17,0.25); --shadow-ink-30: rgba(10,20,17,0.30); --shadow-ink-40: rgba(10,20,17,0.40); --glass-card-fill: linear-gradient(180deg, rgba(35,60,54,0.92), rgba(43,74,68,0.86)) padding-box, linear-gradient(135deg, rgba(222,255,90,0.40), rgba(247,243,235,0.14) 40%, rgba(222,255,90,0.08)) border-box; --glass-card-shadow: 0 10px 26px rgba(35,60,54,0.28), inset 0 1px 0 rgba(247,243,235,0.12); --glass-linen-fill: linear-gradient(180deg, rgba(243,236,218,0.94), rgba(243,236,218,0.82)) padding-box, linear-gradient(135deg, #fffdf6, rgba(243,236,218,0.35) 40%, rgba(164,150,116,0.75)) border-box; --glass-linen-shadow: 0 18px 44px rgba(10,20,17,0.40), inset 0 1px 0 rgba(255,255,255,0.60); --glass-panel-fill: linear-gradient(180deg, rgba(199,220,205,0.18), rgba(199,220,205,0.06) 70%, rgba(199,220,205,0.12)) padding-box, linear-gradient(135deg, rgba(222,255,90,0.28), rgba(247,243,235,0.10) 40%, rgba(222,255,90,0.05)) border-box; --glass-panel-shadow: 0 12px 30px rgba(10,20,17,0.30), inset 0 1px 0 rgba(247,243,235,0.15); } } :root[data-theme="light"] { --console-ink: #233C36; --console-ink-muted: rgba(35,60,54,0.62); --console-ink-88: rgba(35,60,54,0.88); --console-ink-80: rgba(35,60,54,0.80); --console-ink-72: rgba(35,60,54,0.72); --console-ink-66: rgba(35,60,54,0.66); --console-ink-60: rgba(35,60,54,0.60); --console-ink-55: rgba(35,60,54,0.55); --console-ink-50: rgba(35,60,54,0.50); --console-ink-45: rgba(35,60,54,0.45); --console-ink-42: rgba(35,60,54,0.42); --ww-05: rgba(35,60,54,0.05); --ww-07: rgba(35,60,54,0.07); --ww-08: rgba(35,60,54,0.08); --ww-10: rgba(35,60,54,0.10); --ww-14: rgba(35,60,54,0.14); --ww-18: rgba(35,60,54,0.18); --ww-22: rgba(35,60,54,0.22); --ww-24: rgba(35,60,54,0.24); --ww-45: rgba(35,60,54,0.45); --shadow-ink-22: rgba(35,60,54,0.10); --shadow-ink-25: rgba(35,60,54,0.12); --shadow-ink-30: rgba(35,60,54,0.14); --shadow-ink-40: rgba(35,60,54,0.18); --glass-card-fill: linear-gradient(165deg, rgba(255,254,250,0.96), rgba(252,248,240,0.90) 38%, rgba(248,243,232,0.86) 72%, rgba(255,253,247,0.94)); --glass-card-shadow: 0 12px 28px rgba(35,60,54,0.12), inset 0 1px 0 rgba(255,255,255,0.85); --glass-linen-fill: linear-gradient(180deg, rgba(207,226,213,0.92), rgba(199,220,205,0.80)); --glass-linen-shadow: 0 14px 34px rgba(35,60,54,0.13), inset 0 1px 0 rgba(255,255,255,0.75); --glass-panel-fill: linear-gradient(165deg, rgba(255,254,250,0.98), rgba(250,246,237,0.94)); --glass-panel-shadow: 0 10px 24px rgba(35,60,54,0.10), inset 0 1px 0 rgba(255,255,255,0.8); } :root[data-theme="dark"] { --console-ink: var(--color-warm-white); --console-ink-muted: #A9C0B7; --console-ink-88: rgba(247,243,235,0.88); --console-ink-80: rgba(247,243,235,0.80); --console-ink-72: rgba(247,243,235,0.72); --console-ink-66: rgba(247,243,235,0.66); --console-ink-60: rgba(247,243,235,0.60); --console-ink-55: rgba(247,243,235,0.55); --console-ink-50: rgba(247,243,235,0.50); --console-ink-45: rgba(247,243,235,0.45); --console-ink-42: rgba(247,243,235,0.42); --ww-05: rgba(247,243,235,0.05); --ww-07: rgba(247,243,235,0.07); --ww-08: rgba(247,243,235,0.08); --ww-10: rgba(247,243,235,0.10); --ww-14: rgba(247,243,235,0.14); --ww-18: rgba(247,243,235,0.18); --ww-22: rgba(247,243,235,0.22); --ww-24: rgba(247,243,235,0.24); --ww-45: rgba(247,243,235,0.45); --shadow-ink-22: rgba(10,20,17,0.22); --shadow-ink-25: rgba(10,20,17,0.25); --shadow-ink-30: rgba(10,20,17,0.30); --shadow-ink-40: rgba(10,20,17,0.40); --glass-card-fill: linear-gradient(180deg, rgba(35,60,54,0.92), rgba(43,74,68,0.86)) padding-box, linear-gradient(135deg, rgba(222,255,90,0.40), rgba(247,243,235,0.14) 40%, rgba(222,255,90,0.08)) border-box; --glass-card-shadow: 0 10px 26px rgba(35,60,54,0.28), inset 0 1px 0 rgba(247,243,235,0.12); --glass-linen-fill: linear-gradient(180deg, rgba(243,236,218,0.94), rgba(243,236,218,0.82)) padding-box, linear-gradient(135deg, #fffdf6, rgba(243,236,218,0.35) 40%, rgba(164,150,116,0.75)) border-box; --glass-linen-shadow: 0 18px 44px rgba(10,20,17,0.40), inset 0 1px 0 rgba(255,255,255,0.60); --glass-panel-fill: linear-gradient(180deg, rgba(199,220,205,0.18), rgba(199,220,205,0.06) 70%, rgba(199,220,205,0.12)) padding-box, linear-gradient(135deg, rgba(222,255,90,0.28), rgba(247,243,235,0.10) 40%, rgba(222,255,90,0.05)) border-box; --glass-panel-shadow: 0 12px 30px rgba(10,20,17,0.30), inset 0 1px 0 rgba(247,243,235,0.15); } /* Ranked and column bars. The prototype fills them with a deep-green gradient on light and a volt one on dark, over a faint track tinted from the ground -- both read off its own rendered bars, because volt on cream is the single worst-reading combination in the palette. --bar-neutral is every bar that is NOT the peak, and the legend swatch that stands for it. It was the warm-white wash the dark theme has always used, which on the near-white card left the plan bars barely separable from the ground. Both values are the prototype's own --hvBar. */ :root { --bar-fill: linear-gradient(115deg, #2B4A44 0%, #356458 32%, #4A8272 62%, #315C52 100%); --bar-track: rgba(35, 60, 54, 0.08); --bar-neutral: rgba(35, 60, 54, 0.32); } @media (prefers-color-scheme: dark) { :root { --bar-fill: linear-gradient(115deg, #B9E24A 0%, #CDF765 34%, #DEFF5A 64%, #B9E24A 100%); --bar-track: rgba(247, 243, 235, 0.08); --bar-neutral: rgba(199, 220, 205, 0.50); } } :root[data-theme="light"] { --bar-fill: linear-gradient(115deg, #2B4A44 0%, #356458 32%, #4A8272 62%, #315C52 100%); --bar-track: rgba(35, 60, 54, 0.08); --bar-neutral: rgba(35, 60, 54, 0.32); } :root[data-theme="dark"] { --bar-fill: linear-gradient(115deg, #B9E24A 0%, #CDF765 34%, #DEFF5A 64%, #B9E24A 100%); --bar-track: rgba(247, 243, 235, 0.08); --bar-neutral: rgba(199, 220, 205, 0.50); } /* Gauge arcs. The prototype draws the value arc in jade with a deep-green needle over a faint track, because its gauge card is cream in both themes. Ours follows the page, so the arc and needle take a pair: the prototype's own light values, and the volt/warm-white equivalents on our dark card. */ :root { --gauge-arc: #315C52; --gauge-track: rgba(35, 60, 54, 0.12); --gauge-needle: #233C36; } @media (prefers-color-scheme: dark) { :root { --gauge-arc: #DEFF5A; --gauge-track: rgba(247, 243, 235, 0.16); --gauge-needle: var(--color-warm-white); } } :root[data-theme="light"] { --gauge-arc: #315C52; --gauge-track: rgba(35, 60, 54, 0.12); --gauge-needle: #233C36; } :root[data-theme="dark"] { --gauge-arc: #DEFF5A; --gauge-track: rgba(247, 243, 235, 0.16); --gauge-needle: var(--color-warm-white); } /* Weekly Review's gauges use the design's jade arc and deep-green needle in both themes; other pages (Replenishment) keep the global pair above. */ #wr-block-replenishment-overview { --gauge-arc: #315C52; --gauge-needle: #233C36; } /* Sticky table header and first column. These carried a literal #24403A, which is a dark band with dark ink once the page follows the theme. The prototype's own table header is near-white on light. */ :root { --table-sticky-fill: rgba(255, 253, 246, 0.96); } @media (prefers-color-scheme: dark) { :root { --table-sticky-fill: #24403A; } } :root[data-theme="light"] { --table-sticky-fill: rgba(255, 253, 246, 0.96); } :root[data-theme="dark"] { --table-sticky-fill: #24403A; } /* Negative series. The prototype fills a drainer with maroon on light and sunset on dark; ours used the same coral in both, which sits oddly on cream. */ :root { --bar-fill-negative: linear-gradient(115deg, #5E0029 0%, #800039 32%, #A62254 62%, #800039 100%); } @media (prefers-color-scheme: dark) { :root { --bar-fill-negative: linear-gradient(115deg, #C95A3C 0%, #FF835B 38%, #FFA684 68%, #FF835B 100%); } } :root[data-theme="light"] { --bar-fill-negative: linear-gradient(115deg, #5E0029 0%, #800039 32%, #A62254 62%, #800039 100%); } :root[data-theme="dark"] { --bar-fill-negative: linear-gradient(115deg, #C95A3C 0%, #FF835B 38%, #FFA684 68%, #FF835B 100%); } /* Negative delta text. Sunset reads on a dark card and washes out on cream; the prototype uses maroon for a negative figure on light. The hero keeps sunset, because that tile is dark in both themes. */ :root { --delta-negative: #800039; } @media (prefers-color-scheme: dark) { :root { --delta-negative: #FF835B; } } :root[data-theme="light"] { --delta-negative: #800039; } :root[data-theme="dark"] { --delta-negative: #FF835B; } /* The V7 dashboard toolbar, its Filters button and the applied-filter chips (HENG-92). Every value is read off the V7 prototype's rendered DOM in each theme: HatchViews.dc.html's --hvTab* variables at rest, its .hv-stuck rules once the bar is pinned, and the chip row's literal colours. */ :root { --toolbar-fill: linear-gradient(180deg, rgba(251,248,241,0.97), rgba(243,236,218,0.95) 55%, rgba(247,243,235,0.97)) padding-box, linear-gradient(180deg, rgba(255,253,246,0.9), rgba(164,150,116,0.35)) border-box; --toolbar-shadow: 0 12px 30px rgba(35,60,54,0.12), inset 0 1px 0 rgba(255,255,255,0.75); --toolbar-stuck-fill: linear-gradient(180deg, rgba(211,230,218,0.72), rgba(199,220,205,0.58) 55%, rgba(205,225,211,0.68)) padding-box, linear-gradient(180deg, rgba(255,253,246,0.95), rgba(49,92,82,0.35)) border-box; --toolbar-stuck-shadow: 0 14px 40px rgba(35,60,54,0.14), inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -1px 0 rgba(49,92,82,0.2); --toolbar-divider: rgba(35,60,54,0.18); --toolbar-spark: #233C36; --toolbar-tab-ink: rgba(35,60,54,0.82); --toolbar-tab-hover: rgba(49,92,82,0.1); --toolbar-tab-on-fill: linear-gradient(180deg, #D3E6DA, #C7DCCD); --toolbar-tab-on-ink: #233C36; --toolbar-tab-on-shadow: 0 4px 12px rgba(35,60,54,0.14), inset 0 1px 0 rgba(255,255,255,0.7); --toolbar-tab-stuck-fill: #233C36; --toolbar-tab-stuck-ink: #DEFF5A; --toolbar-tab-stuck-shadow: 0 4px 12px rgba(35,60,54,0.24), inset 0 1px 0 rgba(247,243,235,0.16); --toolbar-btn-line: rgba(49,92,82,0.34); --toolbar-btn-fill: rgba(49,92,82,0.05); --toolbar-btn-ink: #315C52; --toolbar-btn-icon: #315C52; --toolbar-btn-hover-fill: rgba(49,92,82,0.1); --toolbar-btn-hover-line: rgba(49,92,82,0.34); --toolbar-btn-on-fill: linear-gradient(180deg, #D3E6DA, #C7DCCD); --toolbar-btn-on-ink: #233C36; --toolbar-btn-on-line: rgba(49,92,82,0.34); --toolbar-btn-on-shadow: 0 4px 12px rgba(35,60,54,0.14), inset 0 1px 0 rgba(255,255,255,0.7); --toolbar-badge-fill: linear-gradient(180deg, rgba(255,253,246,0.94), rgba(243,236,218,0.78)); --toolbar-badge-ink: #315C52; --filter-chip-ink: #315C52; --filter-chip-remove-hover-ink: #233C36; --filter-chip-clear-ink: rgba(35,60,54,0.74); } @media (prefers-color-scheme: dark) { :root { --toolbar-fill: linear-gradient(180deg, rgba(35,60,54,0.6), rgba(35,60,54,0.72)) padding-box, linear-gradient(180deg, rgba(247,243,235,0.35), rgba(247,243,235,0.08)) border-box; --toolbar-shadow: 0 6px 18px rgba(10,20,17,0.3), inset 0 1px 0 rgba(247,243,235,0.16); --toolbar-stuck-fill: linear-gradient(180deg, rgba(35,60,54,0.62), rgba(35,60,54,0.5) 55%, rgba(35,60,54,0.58)) padding-box, linear-gradient(180deg, rgba(247,243,235,0.45), rgba(247,243,235,0.1)) border-box; --toolbar-stuck-shadow: 0 14px 40px rgba(10,20,17,0.4), inset 0 1px 0 rgba(247,243,235,0.22); --toolbar-divider: rgba(247,243,235,0.22); --toolbar-spark: #DEFF5A; --toolbar-tab-ink: rgba(247,243,235,0.92); --toolbar-tab-hover: rgba(247,243,235,0.1); --toolbar-tab-on-fill: #DEFF5A; --toolbar-tab-on-ink: #233C36; --toolbar-tab-on-shadow: 0 4px 14px rgba(222,255,90,0.3); --toolbar-tab-stuck-fill: #DEFF5A; --toolbar-tab-stuck-ink: #233C36; --toolbar-tab-stuck-shadow: 0 4px 14px rgba(222,255,90,0.3); --toolbar-btn-line: rgba(247,243,235,0.34); --toolbar-btn-fill: rgba(247,243,235,0.08); --toolbar-btn-ink: #F7F3EB; --toolbar-btn-icon: #DEFF5A; --toolbar-btn-hover-fill: rgba(222,255,90,0.16); --toolbar-btn-hover-line: rgba(222,255,90,0.5); --toolbar-btn-on-fill: #DEFF5A; --toolbar-btn-on-ink: #233C36; --toolbar-btn-on-line: rgba(247,243,235,0.28); --toolbar-btn-on-shadow: 0 2px 8px rgba(222,255,90,0.3); --toolbar-badge-fill: linear-gradient(180deg, rgba(35,60,54,0.92), rgba(43,74,68,0.86)) padding-box, linear-gradient(180deg, rgba(247,243,235,0.35), rgba(247,243,235,0.08)) border-box; --toolbar-badge-ink: #F7F3EB; --filter-chip-ink: #DEFF5A; --filter-chip-remove-hover-ink: #F7F3EB; --filter-chip-clear-ink: rgba(247,243,235,0.68); } } :root[data-theme="light"] { --toolbar-fill: linear-gradient(180deg, rgba(251,248,241,0.97), rgba(243,236,218,0.95) 55%, rgba(247,243,235,0.97)) padding-box, linear-gradient(180deg, rgba(255,253,246,0.9), rgba(164,150,116,0.35)) border-box; --toolbar-shadow: 0 12px 30px rgba(35,60,54,0.12), inset 0 1px 0 rgba(255,255,255,0.75); --toolbar-stuck-fill: linear-gradient(180deg, rgba(211,230,218,0.72), rgba(199,220,205,0.58) 55%, rgba(205,225,211,0.68)) padding-box, linear-gradient(180deg, rgba(255,253,246,0.95), rgba(49,92,82,0.35)) border-box; --toolbar-stuck-shadow: 0 14px 40px rgba(35,60,54,0.14), inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -1px 0 rgba(49,92,82,0.2); --toolbar-divider: rgba(35,60,54,0.18); --toolbar-spark: #233C36; --toolbar-tab-ink: rgba(35,60,54,0.82); --toolbar-tab-hover: rgba(49,92,82,0.1); --toolbar-tab-on-fill: linear-gradient(180deg, #D3E6DA, #C7DCCD); --toolbar-tab-on-ink: #233C36; --toolbar-tab-on-shadow: 0 4px 12px rgba(35,60,54,0.14), inset 0 1px 0 rgba(255,255,255,0.7); --toolbar-tab-stuck-fill: #233C36; --toolbar-tab-stuck-ink: #DEFF5A; --toolbar-tab-stuck-shadow: 0 4px 12px rgba(35,60,54,0.24), inset 0 1px 0 rgba(247,243,235,0.16); --toolbar-btn-line: rgba(49,92,82,0.34); --toolbar-btn-fill: rgba(49,92,82,0.05); --toolbar-btn-ink: #315C52; --toolbar-btn-icon: #315C52; --toolbar-btn-hover-fill: rgba(49,92,82,0.1); --toolbar-btn-hover-line: rgba(49,92,82,0.34); --toolbar-btn-on-fill: linear-gradient(180deg, #D3E6DA, #C7DCCD); --toolbar-btn-on-ink: #233C36; --toolbar-btn-on-line: rgba(49,92,82,0.34); --toolbar-btn-on-shadow: 0 4px 12px rgba(35,60,54,0.14), inset 0 1px 0 rgba(255,255,255,0.7); --toolbar-badge-fill: linear-gradient(180deg, rgba(255,253,246,0.94), rgba(243,236,218,0.78)); --toolbar-badge-ink: #315C52; --filter-chip-ink: #315C52; --filter-chip-remove-hover-ink: #233C36; --filter-chip-clear-ink: rgba(35,60,54,0.74); } :root[data-theme="dark"] { --toolbar-fill: linear-gradient(180deg, rgba(35,60,54,0.6), rgba(35,60,54,0.72)) padding-box, linear-gradient(180deg, rgba(247,243,235,0.35), rgba(247,243,235,0.08)) border-box; --toolbar-shadow: 0 6px 18px rgba(10,20,17,0.3), inset 0 1px 0 rgba(247,243,235,0.16); --toolbar-stuck-fill: linear-gradient(180deg, rgba(35,60,54,0.62), rgba(35,60,54,0.5) 55%, rgba(35,60,54,0.58)) padding-box, linear-gradient(180deg, rgba(247,243,235,0.45), rgba(247,243,235,0.1)) border-box; --toolbar-stuck-shadow: 0 14px 40px rgba(10,20,17,0.4), inset 0 1px 0 rgba(247,243,235,0.22); --toolbar-divider: rgba(247,243,235,0.22); --toolbar-spark: #DEFF5A; --toolbar-tab-ink: rgba(247,243,235,0.92); --toolbar-tab-hover: rgba(247,243,235,0.1); --toolbar-tab-on-fill: #DEFF5A; --toolbar-tab-on-ink: #233C36; --toolbar-tab-on-shadow: 0 4px 14px rgba(222,255,90,0.3); --toolbar-tab-stuck-fill: #DEFF5A; --toolbar-tab-stuck-ink: #233C36; --toolbar-tab-stuck-shadow: 0 4px 14px rgba(222,255,90,0.3); --toolbar-btn-line: rgba(247,243,235,0.34); --toolbar-btn-fill: rgba(247,243,235,0.08); --toolbar-btn-ink: #F7F3EB; --toolbar-btn-icon: #DEFF5A; --toolbar-btn-hover-fill: rgba(222,255,90,0.16); --toolbar-btn-hover-line: rgba(222,255,90,0.5); --toolbar-btn-on-fill: #DEFF5A; --toolbar-btn-on-ink: #233C36; --toolbar-btn-on-line: rgba(247,243,235,0.28); --toolbar-btn-on-shadow: 0 2px 8px rgba(222,255,90,0.3); --toolbar-badge-fill: linear-gradient(180deg, rgba(35,60,54,0.92), rgba(43,74,68,0.86)) padding-box, linear-gradient(180deg, rgba(247,243,235,0.35), rgba(247,243,235,0.08)) border-box; --toolbar-badge-ink: #F7F3EB; --filter-chip-ink: #DEFF5A; --filter-chip-remove-hover-ink: #F7F3EB; --filter-chip-clear-ink: rgba(247,243,235,0.68); } /* The filter dialog keeps the prototype's light mint glass in both themes, so its values are theme-invariant. */ :root { --filter-dialog-fill: linear-gradient(180deg, rgba(211,230,218,0.94), rgba(199,220,205,0.9) 55%, rgba(205,225,211,0.93)) padding-box, linear-gradient(135deg, rgba(255,253,246,0.95), rgba(49,92,82,0.4)) border-box; --filter-dialog-blur: blur(26px) saturate(1.5); --filter-dialog-shadow: 0 28px 70px rgba(35,60,54,0.26), inset 0 1px 0 rgba(255,255,255,0.7); --filter-dialog-ink: #233C36; --filter-dialog-ink-soft: rgba(35,60,54,0.6); --filter-dialog-accent: #315C52; --filter-dialog-rule: rgba(35,60,54,0.22); --filter-dialog-row-rule: rgba(35,60,54,0.16); --filter-dialog-row-hover: rgba(35,60,54,0.1); --filter-dialog-option-hover: rgba(35,60,54,0.08); --filter-dialog-mark-off: rgba(35,60,54,0.6); --filter-dialog-button-line: rgba(35,60,54,0.4); --filter-dialog-button-hover: rgba(255,253,246,0.55); --filter-dialog-apply-fill: #233C36; --filter-dialog-apply-ink: #DEFF5A; --filter-dialog-apply-shadow: 0 8px 20px rgba(35,60,54,0.28); --filter-dialog-field-fill: rgba(255,253,246,0.55); --filter-dialog-field-line: rgba(35,60,54,0.3); --filter-chip-fill: rgba(49,92,82,0.14); --filter-chip-line: rgba(49,92,82,0.35); --filter-chip-remove-fill: rgba(49,92,82,0.2); --filter-chip-remove-hover-fill: #DEFF5A; } /* HENG-102 phone layout tokens. The phone menu sheet reuses the filter dialog's own light-mint-glass-in-both-themes values directly rather than duplicating them under a new name. */ :root { --phone-menu-fill: var(--filter-dialog-fill); --phone-menu-blur: var(--filter-dialog-blur); --phone-menu-shadow: var(--filter-dialog-shadow); --phone-menu-ink: var(--filter-dialog-ink); } /* Table/chart swipe rail track+thumb (STYLE_GUIDE Table section). */ :root { --rail-track: rgba(35,60,54,0.12); --rail-thumb: var(--filter-dialog-accent); } @media (prefers-color-scheme: dark) { :root { --rail-track: rgba(247,243,235,0.16); --rail-thumb: var(--color-volt); } } :root[data-theme="light"] { --rail-track: rgba(35,60,54,0.12); --rail-thumb: var(--filter-dialog-accent); } :root[data-theme="dark"] { --rail-track: rgba(247,243,235,0.16); --rail-thumb: var(--color-volt); } /* Right-edge fade mask for phone-width scrolling charts. */ :root { --chart-fade-edge: linear-gradient(90deg, rgba(255,253,246,0) 0%, rgba(255,253,246,0.9) 100%); } @media (prefers-color-scheme: dark) { :root { --chart-fade-edge: linear-gradient(90deg, rgba(35,60,54,0) 0%, rgba(35,60,54,0.9) 100%); } } :root[data-theme="light"] { --chart-fade-edge: linear-gradient(90deg, rgba(255,253,246,0) 0%, rgba(255,253,246,0.9) 100%); } :root[data-theme="dark"] { --chart-fade-edge: linear-gradient(90deg, rgba(35,60,54,0) 0%, rgba(35,60,54,0.9) 100%); } /* Docked filter-chip tray band. Only ever referenced under a docked-state selector (.hv-toolbar.hv-stuck), never as a blanket phone-width rule -- the undocked chip row keeps its current look at every width. */ :root { --chip-tray-fill: #233C36; --chip-tray-ink: #F7F3EB; } @media (prefers-color-scheme: dark) { :root { --chip-tray-fill: #233C36; --chip-tray-ink: #F7F3EB; } } :root[data-theme="light"] { --chip-tray-fill: #233C36; --chip-tray-ink: #F7F3EB; } :root[data-theme="dark"] { --chip-tray-fill: #233C36; --chip-tray-ink: #F7F3EB; } /* HENG-131: Weekly Review design colours (channel segments, drainer orange, trailing cards, delta/series/tooltip colours), each with a light and a dark value. */ :root { --wr-seg-pickup: #A49674; --wr-seg-pickup-ink: #233C36; --wr-seg-delivery: #FF835B; --wr-seg-s2h: #7FA795; --wr-seg-sfs: #315C52; --wr-seg-sfs-ink: #F7F3EB; --wr-drainer: #800039; --wr-cream-fill: linear-gradient(165deg, rgba(255,254,250,0.96), rgba(252,248,240,0.92) 40%, rgba(249,244,234,0.88) 74%, rgba(255,253,247,0.95)); --wr-cream-edge: rgba(164,150,116,0.45); --wr-cream-shadow: 0 14px 34px rgba(35,60,54,0.1), inset 0 1px 0 rgba(255,255,255,0.7); --wr-tgl-fill: rgba(255,253,246,0.6); --wr-tgl-edge: rgba(49,92,82,0.28); --wr-tgl-ink: rgba(35,60,54,0.74); --wr-tgl-track: rgba(35,60,54,0.16); --wr-tgl-knob: #FFFDF6; --wr-tgl-on-fill: linear-gradient(180deg, #D3E6DA, #C7DCCD); --wr-tgl-on-edge: rgba(49,92,82,0.45); --wr-tgl-on-ink: #233C36; --wr-tgl-on-track: #233C36; --wr-tgl-on-knob: #DEFF5A; --wr-heat-pos-fill: linear-gradient(160deg, #35695B 0%, #4A8272 30%, #3A6D5F 66%, #2B4A44 100%); --wr-heat-neg-fill: linear-gradient(160deg, #96144B 0%, #A62254 28%, #800039 66%, #5E0029 100%); --wr-heat-hi-ink: #FFFFFF; --wr-heat-pos-lo: #C7DCCD; --wr-heat-pos-lo-ink: #1C302B; --wr-heat-neg-lo: #F3ECDA; --wr-heat-neg-lo-ink: #800039; --wr-heat-zero: rgba(35,60,54,0.12); --wr-heat-neg-ink: #800039; --wr-gainer-bar: linear-gradient(90deg, #315C52, #6FA08E); --wr-trail-pos: rgba(35,60,54,0.35); --wr-trail-neg: #FF835B; --wr-bubble-fill: #FFFFFF; --wr-bubble-ink: #1C302B; --wr-bubble-neg-fill: #FF835B; --wr-bubble-neg-ink: #FFFFFF; --wr-hero-up: #DEFF5A; --wr-hero-down: #E58BA8; --wr-channel-down: #9C4423; --wr-infull: #315C52; --wr-onhand-in-stock: #9FC63C; --wr-ontime: #A49674; --wr-omni-qty: #FF835B; --wr-omni-qty-ly: rgba(255,131,91,0.5); --wr-pods: #A49674; --wr-pods-ly: rgba(164,150,116,0.5); --wr-tip-fill: #233C36; --wr-tip-ink: #F7F3EB; --wr-tip-head: #DEFF5A; --wr-tip-rule: rgba(247,243,235,0.18); --wr-tip-shadow: 0 8px 24px rgba(35,60,54,0.28); --wr-range-ink: rgba(35,60,54,0.7); } @media (prefers-color-scheme: dark) { :root { --wr-seg-pickup: #A49674; --wr-seg-pickup-ink: #233C36; --wr-seg-delivery: #FF835B; --wr-seg-s2h: #7FA795; --wr-seg-sfs: #315C52; --wr-seg-sfs-ink: #F7F3EB; --wr-drainer: #FFA684; --wr-cream-fill: linear-gradient(180deg, rgba(35,60,54,0.92), rgba(43,74,68,0.86)); --wr-cream-edge: rgba(247,243,235,0.18); --wr-cream-shadow: 0 14px 34px rgba(0,0,0,0.3); --wr-tgl-fill: rgba(247,243,235,0.06); --wr-tgl-edge: rgba(247,243,235,0.24); --wr-tgl-ink: rgba(247,243,235,0.78); --wr-tgl-track: rgba(247,243,235,0.18); --wr-tgl-knob: #FFFDF6; --wr-tgl-on-fill: rgba(222,255,90,0.14); --wr-tgl-on-edge: rgba(222,255,90,0.5); --wr-tgl-on-ink: #DEFF5A; --wr-tgl-on-track: #DEFF5A; --wr-tgl-on-knob: #233C36; --wr-heat-pos-fill: linear-gradient(160deg, #DEFF5A 0%, #CDF765 34%, #B9E24A 68%, #9FC63C 100%); --wr-heat-neg-fill: linear-gradient(160deg, #FFB496 0%, #FFA684 40%, #FF835B 100%); --wr-heat-hi-ink: #1C302B; --wr-heat-pos-lo: rgba(199,220,205,0.2); --wr-heat-pos-lo-ink: #F7F3EB; --wr-heat-neg-lo: rgba(255,131,91,0.2); --wr-heat-neg-lo-ink: #FFC2AC; --wr-heat-zero: rgba(247,243,235,0.16); --wr-heat-neg-ink: #FF9C7A; --wr-gainer-bar: linear-gradient(90deg, #B9E24A, #DEFF5A); --wr-trail-pos: rgba(247,243,235,0.35); --wr-trail-neg: #FF835B; --wr-bubble-fill: #FFFFFF; --wr-bubble-ink: #1C302B; --wr-bubble-neg-fill: #FF835B; --wr-bubble-neg-ink: #FFFFFF; --wr-hero-up: #DEFF5A; --wr-hero-down: #E58BA8; --wr-channel-down: #FF835B; --wr-infull: #DEFF5A; --wr-onhand-in-stock: #DEFF5A; --wr-ontime: #A49674; --wr-omni-qty: #FF835B; --wr-omni-qty-ly: rgba(255,131,91,0.5); --wr-pods: #A49674; --wr-pods-ly: rgba(164,150,116,0.5); --wr-tip-fill: #1C302B; --wr-tip-ink: #F7F3EB; --wr-tip-head: #DEFF5A; --wr-tip-rule: rgba(247,243,235,0.18); --wr-tip-shadow: 0 8px 24px rgba(10,20,17,0.5); --wr-range-ink: rgba(247,243,235,0.8); } } :root[data-theme="light"] { --wr-seg-pickup: #A49674; --wr-seg-pickup-ink: #233C36; --wr-seg-delivery: #FF835B; --wr-seg-s2h: #7FA795; --wr-seg-sfs: #315C52; --wr-seg-sfs-ink: #F7F3EB; --wr-drainer: #800039; --wr-cream-fill: linear-gradient(165deg, rgba(255,254,250,0.96), rgba(252,248,240,0.92) 40%, rgba(249,244,234,0.88) 74%, rgba(255,253,247,0.95)); --wr-cream-edge: rgba(164,150,116,0.45); --wr-cream-shadow: 0 14px 34px rgba(35,60,54,0.1), inset 0 1px 0 rgba(255,255,255,0.7); --wr-tgl-fill: rgba(255,253,246,0.6); --wr-tgl-edge: rgba(49,92,82,0.28); --wr-tgl-ink: rgba(35,60,54,0.74); --wr-tgl-track: rgba(35,60,54,0.16); --wr-tgl-knob: #FFFDF6; --wr-tgl-on-fill: linear-gradient(180deg, #D3E6DA, #C7DCCD); --wr-tgl-on-edge: rgba(49,92,82,0.45); --wr-tgl-on-ink: #233C36; --wr-tgl-on-track: #233C36; --wr-tgl-on-knob: #DEFF5A; --wr-heat-pos-fill: linear-gradient(160deg, #35695B 0%, #4A8272 30%, #3A6D5F 66%, #2B4A44 100%); --wr-heat-neg-fill: linear-gradient(160deg, #96144B 0%, #A62254 28%, #800039 66%, #5E0029 100%); --wr-heat-hi-ink: #FFFFFF; --wr-heat-pos-lo: #C7DCCD; --wr-heat-pos-lo-ink: #1C302B; --wr-heat-neg-lo: #F3ECDA; --wr-heat-neg-lo-ink: #800039; --wr-heat-zero: rgba(35,60,54,0.12); --wr-heat-neg-ink: #800039; --wr-gainer-bar: linear-gradient(90deg, #315C52, #6FA08E); --wr-trail-pos: rgba(35,60,54,0.35); --wr-trail-neg: #FF835B; --wr-bubble-fill: #FFFFFF; --wr-bubble-ink: #1C302B; --wr-bubble-neg-fill: #FF835B; --wr-bubble-neg-ink: #FFFFFF; --wr-hero-up: #DEFF5A; --wr-hero-down: #E58BA8; --wr-channel-down: #9C4423; --wr-infull: #315C52; --wr-onhand-in-stock: #9FC63C; --wr-ontime: #A49674; --wr-omni-qty: #FF835B; --wr-omni-qty-ly: rgba(255,131,91,0.5); --wr-pods: #A49674; --wr-pods-ly: rgba(164,150,116,0.5); --wr-tip-fill: #233C36; --wr-tip-ink: #F7F3EB; --wr-tip-head: #DEFF5A; --wr-tip-rule: rgba(247,243,235,0.18); --wr-tip-shadow: 0 8px 24px rgba(35,60,54,0.28); --wr-range-ink: rgba(35,60,54,0.7); } :root[data-theme="dark"] { --wr-seg-pickup: #A49674; --wr-seg-pickup-ink: #233C36; --wr-seg-delivery: #FF835B; --wr-seg-s2h: #7FA795; --wr-seg-sfs: #315C52; --wr-seg-sfs-ink: #F7F3EB; --wr-drainer: #FFA684; --wr-cream-fill: linear-gradient(180deg, rgba(35,60,54,0.92), rgba(43,74,68,0.86)); --wr-cream-edge: rgba(247,243,235,0.18); --wr-cream-shadow: 0 14px 34px rgba(0,0,0,0.3); --wr-tgl-fill: rgba(247,243,235,0.06); --wr-tgl-edge: rgba(247,243,235,0.24); --wr-tgl-ink: rgba(247,243,235,0.78); --wr-tgl-track: rgba(247,243,235,0.18); --wr-tgl-knob: #FFFDF6; --wr-tgl-on-fill: rgba(222,255,90,0.14); --wr-tgl-on-edge: rgba(222,255,90,0.5); --wr-tgl-on-ink: #DEFF5A; --wr-tgl-on-track: #DEFF5A; --wr-tgl-on-knob: #233C36; --wr-heat-pos-fill: linear-gradient(160deg, #DEFF5A 0%, #CDF765 34%, #B9E24A 68%, #9FC63C 100%); --wr-heat-neg-fill: linear-gradient(160deg, #FFB496 0%, #FFA684 40%, #FF835B 100%); --wr-heat-hi-ink: #1C302B; --wr-heat-pos-lo: rgba(199,220,205,0.2); --wr-heat-pos-lo-ink: #F7F3EB; --wr-heat-neg-lo: rgba(255,131,91,0.2); --wr-heat-neg-lo-ink: #FFC2AC; --wr-heat-zero: rgba(247,243,235,0.16); --wr-heat-neg-ink: #FF9C7A; --wr-gainer-bar: linear-gradient(90deg, #B9E24A, #DEFF5A); --wr-trail-pos: rgba(247,243,235,0.35); --wr-trail-neg: #FF835B; --wr-bubble-fill: #FFFFFF; --wr-bubble-ink: #1C302B; --wr-bubble-neg-fill: #FF835B; --wr-bubble-neg-ink: #FFFFFF; --wr-hero-up: #DEFF5A; --wr-hero-down: #E58BA8; --wr-channel-down: #FF835B; --wr-infull: #DEFF5A; --wr-onhand-in-stock: #DEFF5A; --wr-ontime: #A49674; --wr-omni-qty: #FF835B; --wr-omni-qty-ly: rgba(255,131,91,0.5); --wr-pods: #A49674; --wr-pods-ly: rgba(164,150,116,0.5); --wr-tip-fill: #1C302B; --wr-tip-ink: #F7F3EB; --wr-tip-head: #DEFF5A; --wr-tip-rule: rgba(247,243,235,0.18); --wr-tip-shadow: 0 8px 24px rgba(10,20,17,0.5); --wr-range-ink: rgba(247,243,235,0.8); } /* Sub-tab bar (HENG-206, Sales): the prototype's sub-toolbar, read off its rendered DOM in each theme. The bar's fill is --toolbar-fill. */ :root { --subtabs-shadow: 0 12px 30px rgba(35,60,54,0.12), inset 0 1px 0 rgba(255,255,255,0.75); --subtabs-label: rgba(35,60,54,0.55); --subtab-fill: rgba(49,92,82,0.08); --subtab-hover: rgba(49,92,82,0.16); --subtab-ink: #233C36; --subtab-on-fill: #233C36; --subtab-on-ink: #DEFF5A; --subtab-on-shadow: none; --er-btn-on-shadow: 0 4px 14px rgba(35,60,54,0.22); --er-count-zero-fill: rgba(35,60,54,0.08); --er-count-zero-ink: rgba(35,60,54,0.6); --er-count-zero-on-fill: rgba(222,255,90,0.16); --er-count-zero-on-ink: #DEFF5A; --pill-border: rgba(49,92,82,0.18); --pill-ink: rgba(35,60,54,0.84); --pill-hover: rgba(49,92,82,0.16); --pill-on-fill: #315C52; --pill-on-ink: #FFFFFF; --pill-on-shadow: 0 4px 14px rgba(49,92,82,0.25); --er-count-on-fill: rgba(255,255,255,0.2); --er-count-on-ink: #FFFFFF; --section-title-ink: #1C302B; --gauge-ok: #315C52; --gauge-watch: #FF835B; --gauge-bad: #800039; --gauge-track: rgba(35,60,54,0.1); --gauge-end: rgba(35,60,54,0.5); --ctl-fill: rgba(49,92,82,0.08); --ctl-border: rgba(49,92,82,0.18); --ctl-ink: #233C36; } @media (prefers-color-scheme: dark) { :root { --subtabs-shadow: 0 6px 18px rgba(10,20,17,0.3), inset 0 1px 0 rgba(247,243,235,0.16); --subtabs-label: rgba(247,243,235,0.66); --subtab-fill: rgba(247,243,235,0.08); --subtab-hover: rgba(247,243,235,0.08); --subtab-ink: #F7F3EB; --subtab-on-fill: #DEFF5A; --subtab-on-ink: #233C36; --subtab-on-shadow: 0 4px 14px rgba(222,255,90,0.3); --er-btn-on-shadow: 0 4px 14px rgba(222,255,90,0.3); --er-count-zero-fill: rgba(247,243,235,0.12); --er-count-zero-ink: rgba(247,243,235,0.7); --er-count-zero-on-fill: rgba(35,60,54,0.14); --er-count-zero-on-ink: #233C36; --pill-border: rgba(247,243,235,0.22); --pill-ink: rgba(247,243,235,0.84); --pill-hover: rgba(222,255,90,0.16); --pill-on-fill: #DEFF5A; --pill-on-ink: #233C36; --pill-on-shadow: 0 4px 14px rgba(222,255,90,0.3); --er-count-on-fill: rgba(35,60,54,0.14); --er-count-on-ink: #233C36; --section-title-ink: #F7F3EB; --gauge-ok: #DEFF5A; --gauge-watch: #FF835B; --gauge-bad: #FFA684; --gauge-track: rgba(247,243,235,0.14); --gauge-end: rgba(247,243,235,0.6); --ctl-fill: rgba(247,243,235,0.08); --ctl-border: rgba(247,243,235,0.22); --ctl-ink: #F7F3EB; } } :root[data-theme="light"] { --subtabs-shadow: 0 12px 30px rgba(35,60,54,0.12), inset 0 1px 0 rgba(255,255,255,0.75); --subtabs-label: rgba(35,60,54,0.55); --subtab-fill: rgba(49,92,82,0.08); --subtab-hover: rgba(49,92,82,0.16); --subtab-ink: #233C36; --subtab-on-fill: #233C36; --subtab-on-ink: #DEFF5A; --subtab-on-shadow: none; --er-btn-on-shadow: 0 4px 14px rgba(35,60,54,0.22); --er-count-zero-fill: rgba(35,60,54,0.08); --er-count-zero-ink: rgba(35,60,54,0.6); --er-count-zero-on-fill: rgba(222,255,90,0.16); --er-count-zero-on-ink: #DEFF5A; --pill-border: rgba(49,92,82,0.18); --pill-ink: rgba(35,60,54,0.84); --pill-hover: rgba(49,92,82,0.16); --pill-on-fill: #315C52; --pill-on-ink: #FFFFFF; --pill-on-shadow: 0 4px 14px rgba(49,92,82,0.25); --er-count-on-fill: rgba(255,255,255,0.2); --er-count-on-ink: #FFFFFF; --section-title-ink: #1C302B; --gauge-ok: #315C52; --gauge-watch: #FF835B; --gauge-bad: #800039; --gauge-track: rgba(35,60,54,0.1); --gauge-end: rgba(35,60,54,0.5); --ctl-fill: rgba(49,92,82,0.08); --ctl-border: rgba(49,92,82,0.18); --ctl-ink: #233C36; } :root[data-theme="dark"] { --subtabs-shadow: 0 6px 18px rgba(10,20,17,0.3), inset 0 1px 0 rgba(247,243,235,0.16); --subtabs-label: rgba(247,243,235,0.66); --subtab-fill: rgba(247,243,235,0.08); --subtab-hover: rgba(247,243,235,0.08); --subtab-ink: #F7F3EB; --subtab-on-fill: #DEFF5A; --subtab-on-ink: #233C36; --subtab-on-shadow: 0 4px 14px rgba(222,255,90,0.3); --er-btn-on-shadow: 0 4px 14px rgba(222,255,90,0.3); --er-count-zero-fill: rgba(247,243,235,0.12); --er-count-zero-ink: rgba(247,243,235,0.7); --er-count-zero-on-fill: rgba(35,60,54,0.14); --er-count-zero-on-ink: #233C36; --pill-border: rgba(247,243,235,0.22); --pill-ink: rgba(247,243,235,0.84); --pill-hover: rgba(222,255,90,0.16); --pill-on-fill: #DEFF5A; --pill-on-ink: #233C36; --pill-on-shadow: 0 4px 14px rgba(222,255,90,0.3); --er-count-on-fill: rgba(35,60,54,0.14); --er-count-on-ink: #233C36; --section-title-ink: #F7F3EB; --gauge-ok: #DEFF5A; --gauge-watch: #FF835B; --gauge-bad: #FFA684; --gauge-track: rgba(247,243,235,0.14); --gauge-end: rgba(247,243,235,0.6); --ctl-fill: rgba(247,243,235,0.08); --ctl-border: rgba(247,243,235,0.22); --ctl-ink: #F7F3EB; } /* Sales Overview (HENG-206): section headings, the value tile and the table card, read off the prototype in each theme. The tile and the table card stay light on the dark page, as the prototype's .hv-lightcard and .ha-keeplight. */ :root { --sales-head-ink: #1C302B; --sales-head-meta: rgba(35,60,54,0.6); --sales-tile-fill: linear-gradient(180deg, rgba(207,226,213,0.92), rgba(199,220,205,0.8)) padding-box, linear-gradient(135deg, #FFFDF6, rgba(199,220,205,0.4) 40%, rgba(49,92,82,0.5)) border-box; --sales-tile-shadow: 0 14px 34px rgba(35,60,54,0.13), inset 0 1px 0 rgba(255,255,255,0.65), inset 0 -1px 0 rgba(49,92,82,0.18); --sales-tablecard-shadow: 0 12px 30px rgba(35,60,54,0.10), inset 0 1px 0 rgba(255,255,255,0.8); } @media (prefers-color-scheme: dark) { :root { --sales-head-ink: #F7F3EB; --sales-head-meta: rgba(247,243,235,0.72); --sales-tile-fill: linear-gradient(180deg, rgba(247,243,235,0.92), rgba(243,236,218,0.84)) padding-box, linear-gradient(135deg, #FFFDF6, rgba(243,236,218,0.5) 40%, rgba(164,150,116,0.65)) border-box; --sales-tile-shadow: 0 10px 26px rgba(10,20,17,0.4), inset 0 1px 0 rgba(255,255,255,0.6); --sales-tablecard-shadow: 0 14px 34px rgba(8,18,15,0.42); } } :root[data-theme="light"] { --sales-head-ink: #1C302B; --sales-head-meta: rgba(35,60,54,0.6); --sales-tile-fill: linear-gradient(180deg, rgba(207,226,213,0.92), rgba(199,220,205,0.8)) padding-box, linear-gradient(135deg, #FFFDF6, rgba(199,220,205,0.4) 40%, rgba(49,92,82,0.5)) border-box; --sales-tile-shadow: 0 14px 34px rgba(35,60,54,0.13), inset 0 1px 0 rgba(255,255,255,0.65), inset 0 -1px 0 rgba(49,92,82,0.18); --sales-tablecard-shadow: 0 12px 30px rgba(35,60,54,0.10), inset 0 1px 0 rgba(255,255,255,0.8); } :root[data-theme="dark"] { --sales-head-ink: #F7F3EB; --sales-head-meta: rgba(247,243,235,0.72); --sales-tile-fill: linear-gradient(180deg, rgba(247,243,235,0.92), rgba(243,236,218,0.84)) padding-box, linear-gradient(135deg, #FFFDF6, rgba(243,236,218,0.5) 40%, rgba(164,150,116,0.65)) border-box; --sales-tile-shadow: 0 10px 26px rgba(10,20,17,0.4), inset 0 1px 0 rgba(255,255,255,0.6); --sales-tablecard-shadow: 0 14px 34px rgba(8,18,15,0.42); } /* Sales Metrics Detail cards and controls (HENG-206), read off the prototype in each theme. On dark, the prototype's own overrides leave the gain-bar label and the change pill cream on volt and on white; those two keep their dark ink here so they can be read. */ :root { --sales-card-fill: linear-gradient(165deg, rgba(255,254,250,0.96), rgba(252,248,240,0.92) 40%, rgba(249,244,234,0.88) 74%, rgba(255,253,247,0.95)) padding-box, linear-gradient(135deg, #FFFFFF, rgba(243,236,218,0.5) 45%, rgba(164,150,116,0.45)) border-box; --sales-card-shadow: 0 14px 34px rgba(35,60,54,0.1), inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(164,150,116,0.22); --sales-card-ink: #233C36; --sales-card-accent: #315C52; --sales-card-title: rgba(35,60,54,0.75); --sales-card-muted: rgba(35,60,54,0.55); --sales-card-weeks: rgba(35,60,54,0.6); --sales-card-faint: rgba(35,60,54,0.5); --sales-grid-line: rgba(35,60,54,0.12); --sales-grid-base: rgba(35,60,54,0.3); --sales-hover-line: rgba(35,60,54,0.5); --sales-pill-on-fill: rgba(255,255,255,0.55); --sales-pill-on-border: rgba(49,92,82,0.35); --sales-pill-off-border: rgba(35,60,54,0.15); --sales-pill-hover: rgba(49,92,82,0.12); --sales-bis-swatch: #800039; --sales-sfs-swatch: #315C52; --sales-bis-line: #800039; --sales-bis-fill: rgba(128,0,57,0.22); --sales-sfs-line: #315C52; --sales-s2h-fill: rgba(199,220,205,0.6); --sales-track: rgba(35,60,54,0.08); --sales-gain-fill: linear-gradient(115deg, #2B4A44 0%, #356458 32%, #4A8272 62%, #315C52 100%); --sales-gain-shadow: inset 0 1px 0 rgba(255,255,255,0.28); --sales-gain-ink: #FFFFFF; --sales-ctl-fill: rgba(35,60,54,0.08); --sales-ctl-ink: rgba(35,60,54,0.7); --sales-dd-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231C302B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } @media (prefers-color-scheme: dark) { :root { --sales-card-fill: linear-gradient(180deg, rgba(35,60,54,0.92), rgba(43,74,68,0.86)) padding-box, linear-gradient(180deg, rgba(247,243,235,0.35), rgba(247,243,235,0.08)) border-box; --sales-card-shadow: 0 10px 26px rgba(10,20,17,0.35), inset 0 1px 0 rgba(247,243,235,0.12); --sales-card-ink: #F7F3EB; --sales-card-accent: #DEFF5A; --sales-card-title: rgba(247,243,235,0.72); --sales-card-muted: rgba(247,243,235,0.72); --sales-card-weeks: rgba(247,243,235,0.72); --sales-card-faint: rgba(247,243,235,0.72); --sales-grid-line: rgba(247,243,235,0.18); --sales-grid-base: rgba(247,243,235,0.18); --sales-hover-line: rgba(247,243,235,0.18); --sales-pill-on-fill: rgba(247,243,235,0.12); --sales-pill-on-border: rgba(247,243,235,0.32); --sales-pill-off-border: rgba(247,243,235,0.24); --sales-pill-hover: rgba(247,243,235,0.12); --sales-bis-swatch: #E58BA8; --sales-sfs-swatch: #DEFF5A; --sales-bis-line: #E58BA8; --sales-bis-fill: rgba(229,139,168,0.3); --sales-sfs-line: #DEFF5A; --sales-s2h-fill: rgba(199,220,205,0.16); --sales-track: rgba(247,243,235,0.08); --sales-gain-fill: linear-gradient(115deg, #B9E24A 0%, #CDF765 34%, #DEFF5A 64%, #B9E24A 100%); --sales-gain-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 2px 10px rgba(222,255,90,0.28); --sales-gain-ink: #233C36; --sales-ctl-fill: rgba(247,243,235,0.08); --sales-ctl-ink: rgba(247,243,235,0.72); --sales-dd-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23F7F3EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } } :root[data-theme="light"] { --sales-card-fill: linear-gradient(165deg, rgba(255,254,250,0.96), rgba(252,248,240,0.92) 40%, rgba(249,244,234,0.88) 74%, rgba(255,253,247,0.95)) padding-box, linear-gradient(135deg, #FFFFFF, rgba(243,236,218,0.5) 45%, rgba(164,150,116,0.45)) border-box; --sales-card-shadow: 0 14px 34px rgba(35,60,54,0.1), inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(164,150,116,0.22); --sales-card-ink: #233C36; --sales-card-accent: #315C52; --sales-card-title: rgba(35,60,54,0.75); --sales-card-muted: rgba(35,60,54,0.55); --sales-card-weeks: rgba(35,60,54,0.6); --sales-card-faint: rgba(35,60,54,0.5); --sales-grid-line: rgba(35,60,54,0.12); --sales-grid-base: rgba(35,60,54,0.3); --sales-hover-line: rgba(35,60,54,0.5); --sales-pill-on-fill: rgba(255,255,255,0.55); --sales-pill-on-border: rgba(49,92,82,0.35); --sales-pill-off-border: rgba(35,60,54,0.15); --sales-pill-hover: rgba(49,92,82,0.12); --sales-bis-swatch: #800039; --sales-sfs-swatch: #315C52; --sales-bis-line: #800039; --sales-bis-fill: rgba(128,0,57,0.22); --sales-sfs-line: #315C52; --sales-s2h-fill: rgba(199,220,205,0.6); --sales-track: rgba(35,60,54,0.08); --sales-gain-fill: linear-gradient(115deg, #2B4A44 0%, #356458 32%, #4A8272 62%, #315C52 100%); --sales-gain-shadow: inset 0 1px 0 rgba(255,255,255,0.28); --sales-gain-ink: #FFFFFF; --sales-ctl-fill: rgba(35,60,54,0.08); --sales-ctl-ink: rgba(35,60,54,0.7); --sales-dd-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231C302B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } :root[data-theme="dark"] { --sales-card-fill: linear-gradient(180deg, rgba(35,60,54,0.92), rgba(43,74,68,0.86)) padding-box, linear-gradient(180deg, rgba(247,243,235,0.35), rgba(247,243,235,0.08)) border-box; --sales-card-shadow: 0 10px 26px rgba(10,20,17,0.35), inset 0 1px 0 rgba(247,243,235,0.12); --sales-card-ink: #F7F3EB; --sales-card-accent: #DEFF5A; --sales-card-title: rgba(247,243,235,0.72); --sales-card-muted: rgba(247,243,235,0.72); --sales-card-weeks: rgba(247,243,235,0.72); --sales-card-faint: rgba(247,243,235,0.72); --sales-grid-line: rgba(247,243,235,0.18); --sales-grid-base: rgba(247,243,235,0.18); --sales-hover-line: rgba(247,243,235,0.18); --sales-pill-on-fill: rgba(247,243,235,0.12); --sales-pill-on-border: rgba(247,243,235,0.32); --sales-pill-off-border: rgba(247,243,235,0.24); --sales-pill-hover: rgba(247,243,235,0.12); --sales-bis-swatch: #E58BA8; --sales-sfs-swatch: #DEFF5A; --sales-bis-line: #E58BA8; --sales-bis-fill: rgba(229,139,168,0.3); --sales-sfs-line: #DEFF5A; --sales-s2h-fill: rgba(199,220,205,0.16); --sales-track: rgba(247,243,235,0.08); --sales-gain-fill: linear-gradient(115deg, #B9E24A 0%, #CDF765 34%, #DEFF5A 64%, #B9E24A 100%); --sales-gain-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 2px 10px rgba(222,255,90,0.28); --sales-gain-ink: #233C36; --sales-ctl-fill: rgba(247,243,235,0.08); --sales-ctl-ink: rgba(247,243,235,0.72); --sales-dd-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23F7F3EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Omni Item Performance (HENG-206): the prototype's page-level ink, which its dark theme turns cream. */ :root { --sales-oip-ink: #233C36; --sales-oip-dim: rgba(35,60,54,0.65); --sales-oip-head: rgba(35,60,54,0.85); --sales-oip-border: rgba(49,92,82,0.18); --sales-oip-rank: rgba(35,60,54,0.55); --sales-oip-dp: rgba(35,60,54,0.7); --sales-oip-pill-off: rgba(35,60,54,0.72); } @media (prefers-color-scheme: dark) { :root { --sales-oip-ink: #F7F3EB; --sales-oip-dim: rgba(247,243,235,0.72); --sales-oip-head: rgba(247,243,235,0.72); --sales-oip-border: rgba(247,243,235,0.24); --sales-oip-rank: rgba(247,243,235,0.72); --sales-oip-dp: rgba(247,243,235,0.72); --sales-oip-pill-off: rgba(247,243,235,0.72); } } :root[data-theme="light"] { --sales-oip-ink: #233C36; --sales-oip-dim: rgba(35,60,54,0.65); --sales-oip-head: rgba(35,60,54,0.85); --sales-oip-border: rgba(49,92,82,0.18); --sales-oip-rank: rgba(35,60,54,0.55); --sales-oip-dp: rgba(35,60,54,0.7); --sales-oip-pill-off: rgba(35,60,54,0.72); } :root[data-theme="dark"] { --sales-oip-ink: #F7F3EB; --sales-oip-dim: rgba(247,243,235,0.72); --sales-oip-head: rgba(247,243,235,0.72); --sales-oip-border: rgba(247,243,235,0.24); --sales-oip-rank: rgba(247,243,235,0.72); --sales-oip-dp: rgba(247,243,235,0.72); --sales-oip-pill-off: rgba(247,243,235,0.72); } /* Table filter chips (HENG-206), on the page rather than in the light card. */ :root { --sales-chip-border: rgba(49,92,82,0.5); --sales-chip-fill: rgba(49,92,82,0.1); --sales-chip-hover: rgba(49,92,82,0.2); --sales-chip-ink: #315C52; } @media (prefers-color-scheme: dark) { :root { --sales-chip-border: rgba(247,243,235,0.24); --sales-chip-fill: rgba(247,243,235,0.08); --sales-chip-hover: rgba(247,243,235,0.16); --sales-chip-ink: #DEFF5A; } } :root[data-theme="light"] { --sales-chip-border: rgba(49,92,82,0.5); --sales-chip-fill: rgba(49,92,82,0.1); --sales-chip-hover: rgba(49,92,82,0.2); --sales-chip-ink: #315C52; } :root[data-theme="dark"] { --sales-chip-border: rgba(247,243,235,0.24); --sales-chip-fill: rgba(247,243,235,0.08); --sales-chip-hover: rgba(247,243,235,0.16); --sales-chip-ink: #DEFF5A; } /* RJW row pills (HENG-208), as the prototype's toolbar draws them. */ :root { --rjw-pill-border: rgba(35,60,54,0.22); --rjw-pill-ink: rgba(35,60,54,0.8); } @media (prefers-color-scheme: dark) { :root { --rjw-pill-border: rgba(35,60,54,0.22); --rjw-pill-ink: rgba(247,243,235,0.66); } } :root[data-theme="light"] { --rjw-pill-border: rgba(35,60,54,0.22); --rjw-pill-ink: rgba(35,60,54,0.8); } :root[data-theme="dark"] { --rjw-pill-border: rgba(35,60,54,0.22); --rjw-pill-ink: rgba(247,243,235,0.66); } /* In Stock and Total Pipeline (HENG-208), read off the prototype in each theme. */ :root { --sc-pl-qty: #315C52; --sc-pl-qty-fill: rgba(49,92,82,0.35); --sc-pl-qty-glow: none; --sc-pl-pct-axis: #800039; --sc-pl-pct-label: #9C4423; --sc-pl-axis-dot: rgba(35,60,54,0.65); } @media (prefers-color-scheme: dark) { :root { --sc-pl-qty: #DEFF5A; --sc-pl-qty-fill: rgba(222,255,90,0.35); --sc-pl-qty-glow: drop-shadow(0 0 5px rgba(222,255,90,0.5)); --sc-pl-pct-axis: #FFA684; --sc-pl-pct-label: #FFA684; --sc-pl-axis-dot: rgba(247,243,235,0.08); } } :root[data-theme="light"] { --sc-pl-qty: #315C52; --sc-pl-qty-fill: rgba(49,92,82,0.35); --sc-pl-qty-glow: none; --sc-pl-pct-axis: #800039; --sc-pl-pct-label: #9C4423; --sc-pl-axis-dot: rgba(35,60,54,0.65); } :root[data-theme="dark"] { --sc-pl-qty: #DEFF5A; --sc-pl-qty-fill: rgba(222,255,90,0.35); --sc-pl-qty-glow: drop-shadow(0 0 5px rgba(222,255,90,0.5)); --sc-pl-pct-axis: #FFA684; --sc-pl-pct-label: #FFA684; --sc-pl-axis-dot: rgba(247,243,235,0.08); } /* Weekly Forecast order-history line (HENG-208): burgundy on light, pink on dark. */ :root { --fc-orders: #800039; } @media (prefers-color-scheme: dark) { :root { --fc-orders: #E58BA8; } } :root[data-theme="light"] { --fc-orders: #800039; } :root[data-theme="dark"] { --fc-orders: #E58BA8; } /* Opaque equivalents of the mock's see-through table card (HENG-208), for tables with a pinned first column. */ :root { --v3-table-solid: #FDFCF9; --v3-table-head-solid: #FBF8F0; } @media (prefers-color-scheme: dark) { :root { --v3-table-solid: #BFC6C2; --v3-table-head-solid: #F4F1EA; } } :root[data-theme="light"] { --v3-table-solid: #FDFCF9; --v3-table-head-solid: #FBF8F0; } :root[data-theme="dark"] { --v3-table-solid: #BFC6C2; --v3-table-head-solid: #F4F1EA; } /* S&OP (HENG-208), read off the prototype in each theme. POS Actuals is the prototype's dark green, which disappears on its dark card, so it is cream there (the prototype's own hover shows it volt). */ :root { --sop-em: inherit; --sop-rule: rgba(49,92,82,0.2); --sop-tile-border: rgba(49,92,82,0.16); --sop-sep: rgba(35,60,54,0.2); --sop-divider: rgba(35,60,54,0.35); --sop-actuals: #233C36; } @media (prefers-color-scheme: dark) { :root { --sop-em: #DEFF5A; --sop-rule: rgba(247,243,235,0.24); --sop-tile-border: rgba(247,243,235,0.24); --sop-sep: rgba(247,243,235,0.22); --sop-divider: rgba(247,243,235,0.2); --sop-actuals: #F7F3EB; } } :root[data-theme="light"] { --sop-em: inherit; --sop-rule: rgba(49,92,82,0.2); --sop-tile-border: rgba(49,92,82,0.16); --sop-sep: rgba(35,60,54,0.2); --sop-divider: rgba(35,60,54,0.35); --sop-actuals: #233C36; } :root[data-theme="dark"] { --sop-em: #DEFF5A; --sop-rule: rgba(247,243,235,0.24); --sop-tile-border: rgba(247,243,235,0.24); --sop-sep: rgba(247,243,235,0.22); --sop-divider: rgba(247,243,235,0.2); --sop-actuals: #F7F3EB; } /* RJW grid title's italic word (HENG-208): green on light, volt on dark. */ :root { --sop-em-strong: #315C52; } @media (prefers-color-scheme: dark) { :root { --sop-em-strong: #DEFF5A; } } :root[data-theme="light"] { --sop-em-strong: #315C52; } :root[data-theme="dark"] { --sop-em-strong: #DEFF5A; } /* Supply Chain V4 restyle (HENG-216): KPI card fill and shadow, and the supply plan bar. */ :root { --sc-kpi-fill: linear-gradient(165deg, rgba(255,254,250,0.96), rgba(252,248,240,0.9) 38%, rgba(248,243,232,0.86) 72%, rgba(255,253,247,0.94)) padding-box, linear-gradient(135deg, #FFFFFF, rgba(243,236,218,0.55) 45%, rgba(164,150,116,0.5)) border-box; --sc-kpi-shadow: 0 12px 28px rgba(35,60,54,0.12), inset 0 1px 0 rgba(255,255,255,0.85); --sc-col-accent: linear-gradient(160deg, #35695B 0%, #4A8272 30%, #3A6D5F 66%, #2B4A44 100%); --sc-col-accent-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(10,20,17,0.2), 0 6px 16px rgba(49,92,82,0.3); } @media (prefers-color-scheme: dark) { :root { --sc-kpi-fill: linear-gradient(180deg, rgba(247,243,235,0.92), rgba(243,236,218,0.84)) padding-box, linear-gradient(135deg, #FFFDF6, rgba(243,236,218,0.5) 40%, rgba(164,150,116,0.65)) border-box; --sc-kpi-shadow: 0 10px 26px rgba(10,20,17,0.4), inset 0 1px 0 rgba(255,255,255,0.6); --sc-col-accent: linear-gradient(160deg, #DEFF5A 0%, #CDF765 34%, #B9E24A 68%, #9FC63C 100%); --sc-col-accent-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(10,20,17,0.22); } } :root[data-theme="light"] { --sc-kpi-fill: linear-gradient(165deg, rgba(255,254,250,0.96), rgba(252,248,240,0.9) 38%, rgba(248,243,232,0.86) 72%, rgba(255,253,247,0.94)) padding-box, linear-gradient(135deg, #FFFFFF, rgba(243,236,218,0.55) 45%, rgba(164,150,116,0.5)) border-box; --sc-kpi-shadow: 0 12px 28px rgba(35,60,54,0.12), inset 0 1px 0 rgba(255,255,255,0.85); --sc-col-accent: linear-gradient(160deg, #35695B 0%, #4A8272 30%, #3A6D5F 66%, #2B4A44 100%); --sc-col-accent-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(10,20,17,0.2), 0 6px 16px rgba(49,92,82,0.3); } :root[data-theme="dark"] { --sc-kpi-fill: linear-gradient(180deg, rgba(247,243,235,0.92), rgba(243,236,218,0.84)) padding-box, linear-gradient(135deg, #FFFDF6, rgba(243,236,218,0.5) 40%, rgba(164,150,116,0.65)) border-box; --sc-kpi-shadow: 0 10px 26px rgba(10,20,17,0.4), inset 0 1px 0 rgba(255,255,255,0.6); --sc-col-accent: linear-gradient(160deg, #DEFF5A 0%, #CDF765 34%, #B9E24A 68%, #9FC63C 100%); --sc-col-accent-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(10,20,17,0.22); } /* HENG-241 shared controls: switch and date chip. */ :root { --switch-on-fill: #233C36; --switch-on-ink: #DEFF5A; --chip-border: rgba(49,92,82,0.34); --chip-fill: rgba(49,92,82,0.05); --chip-ink: #315C52; --chip-icon: #315C52; --chip-custom-border: rgba(49,92,82,0.45); --chip-custom-fill: linear-gradient(180deg, #D3E6DA, #C7DCCD); --chip-custom-ink: #233C36; --chip-custom-shadow: 0 4px 12px rgba(35,60,54,0.12), inset 0 1px 0 rgba(255,255,255,0.7); } @media (prefers-color-scheme: dark) { :root { --switch-on-fill: #DEFF5A; --switch-on-ink: #233C36; --chip-border: rgba(247,243,235,0.34); --chip-fill: rgba(247,243,235,0.08); --chip-ink: #F7F3EB; --chip-icon: #DEFF5A; --chip-custom-border: #DEFF5A; --chip-custom-fill: #DEFF5A; --chip-custom-ink: #233C36; --chip-custom-shadow: none; } } :root[data-theme="light"] { --switch-on-fill: #233C36; --switch-on-ink: #DEFF5A; --chip-border: rgba(49,92,82,0.34); --chip-fill: rgba(49,92,82,0.05); --chip-ink: #315C52; --chip-icon: #315C52; --chip-custom-border: rgba(49,92,82,0.45); --chip-custom-fill: linear-gradient(180deg, #D3E6DA, #C7DCCD); --chip-custom-ink: #233C36; --chip-custom-shadow: 0 4px 12px rgba(35,60,54,0.12), inset 0 1px 0 rgba(255,255,255,0.7); } :root[data-theme="dark"] { --switch-on-fill: #DEFF5A; --switch-on-ink: #233C36; --chip-border: rgba(247,243,235,0.34); --chip-fill: rgba(247,243,235,0.08); --chip-ink: #F7F3EB; --chip-icon: #DEFF5A; --chip-custom-border: #DEFF5A; --chip-custom-fill: #DEFF5A; --chip-custom-ink: #233C36; --chip-custom-shadow: none; } /* HENG-245 S&OP: series colours and card surfaces, light first, dark after. */ :root { --ha-sop-c-posForecast: #315C52; --ha-sop-c-supplyPlan: #800039; --ha-sop-c-actualOrders: #FF835B; --ha-sop-c-posActuals: #233C36; --ha-sop-c-inStock: #A49674; --ha-sop-c-inFull: #9C4423; --ha-sop-c-onTime: #5E8C7E; --ha-sop-area-top: rgba(35,60,54,0.18); --ha-sop-area-bot: rgba(35,60,54,0); --ha-sop-card-fill: linear-gradient(180deg, rgba(255,253,248,0.96), rgba(247,243,235,0.92)); --ha-sop-card-edge: rgba(35,60,54,0.14); --ha-sop-card-shadow: 0 8px 24px rgba(35,60,54,0.08); --ha-sop-hero-fill: linear-gradient(180deg, #D3E6DA, #C7DCCD); --ha-sop-hero-edge: rgba(49,92,82,0.35); --ha-sop-hero-ink: #1C302B; --ha-sop-tile-fill: linear-gradient(180deg, #FFFDF8, #F4EEDF); --ha-sop-tile-edge: rgba(35,60,54,0.14); --ha-sop-tile-ink: #1C302B; --ha-sop-muted: rgba(35,60,54,0.62); --ha-sop-hairline: rgba(35,60,54,0.16); --ha-sop-lens-on-fill: #233C36; --ha-sop-lens-on-ink: #DEFF5A; --ha-sop-lens-ink: #315C52; --ha-sop-row-hover: rgba(199,220,205,0.28); --ha-sop-shell-fill: rgba(255,253,248,0.9); --ha-sop-head-fill: rgba(255,253,248,0.98); } @media (prefers-color-scheme: dark) { :root { --ha-sop-c-posForecast: #9CC7B8; --ha-sop-c-supplyPlan: #FF8FB5; --ha-sop-c-posActuals: #DEFF5A; --ha-sop-c-inStock: #D8C99A; --ha-sop-c-inFull: #E8996F; --ha-sop-c-onTime: #8FC2B2; --ha-sop-area-top: rgba(222,255,90,0.2); --ha-sop-area-bot: rgba(222,255,90,0); --ha-sop-card-fill: linear-gradient(180deg, rgba(43,74,68,0.7), rgba(35,60,54,0.7)); --ha-sop-card-edge: rgba(247,243,235,0.16); --ha-sop-card-shadow: 0 8px 24px rgba(0,0,0,0.3); --ha-sop-tile-fill: linear-gradient(180deg, rgba(43,74,68,0.9), rgba(35,60,54,0.9)); --ha-sop-tile-edge: rgba(247,243,235,0.16); --ha-sop-tile-ink: #F7F3EB; --ha-sop-muted: rgba(247,243,235,0.65); --ha-sop-hairline: rgba(247,243,235,0.18); --ha-sop-lens-on-fill: #DEFF5A; --ha-sop-lens-on-ink: #233C36; --ha-sop-lens-ink: #F7F3EB; --ha-sop-row-hover: rgba(199,220,205,0.12); --ha-sop-shell-fill: rgba(35,60,54,0.85); --ha-sop-head-fill: rgba(35,60,54,0.98); } } :root[data-theme="light"] { --ha-sop-c-posForecast: #315C52; --ha-sop-c-supplyPlan: #800039; --ha-sop-c-posActuals: #233C36; --ha-sop-c-inStock: #A49674; --ha-sop-c-inFull: #9C4423; --ha-sop-c-onTime: #5E8C7E; --ha-sop-area-top: rgba(35,60,54,0.18); --ha-sop-area-bot: rgba(35,60,54,0); --ha-sop-card-fill: linear-gradient(180deg, rgba(255,253,248,0.96), rgba(247,243,235,0.92)); --ha-sop-card-edge: rgba(35,60,54,0.14); --ha-sop-card-shadow: 0 8px 24px rgba(35,60,54,0.08); --ha-sop-tile-fill: linear-gradient(180deg, #FFFDF8, #F4EEDF); --ha-sop-tile-edge: rgba(35,60,54,0.14); --ha-sop-tile-ink: #1C302B; --ha-sop-muted: rgba(35,60,54,0.62); --ha-sop-hairline: rgba(35,60,54,0.16); --ha-sop-lens-on-fill: #233C36; --ha-sop-lens-on-ink: #DEFF5A; --ha-sop-lens-ink: #315C52; --ha-sop-row-hover: rgba(199,220,205,0.28); --ha-sop-shell-fill: rgba(255,253,248,0.9); --ha-sop-head-fill: rgba(255,253,248,0.98); } :root[data-theme="dark"] { --ha-sop-c-posForecast: #9CC7B8; --ha-sop-c-supplyPlan: #FF8FB5; --ha-sop-c-posActuals: #DEFF5A; --ha-sop-c-inStock: #D8C99A; --ha-sop-c-inFull: #E8996F; --ha-sop-c-onTime: #8FC2B2; --ha-sop-area-top: rgba(222,255,90,0.2); --ha-sop-area-bot: rgba(222,255,90,0); --ha-sop-card-fill: linear-gradient(180deg, rgba(43,74,68,0.7), rgba(35,60,54,0.7)); --ha-sop-card-edge: rgba(247,243,235,0.16); --ha-sop-card-shadow: 0 8px 24px rgba(0,0,0,0.3); --ha-sop-tile-fill: linear-gradient(180deg, rgba(43,74,68,0.9), rgba(35,60,54,0.9)); --ha-sop-tile-edge: rgba(247,243,235,0.16); --ha-sop-tile-ink: #F7F3EB; --ha-sop-muted: rgba(247,243,235,0.65); --ha-sop-hairline: rgba(247,243,235,0.18); --ha-sop-lens-on-fill: #DEFF5A; --ha-sop-lens-on-ink: #233C36; --ha-sop-lens-ink: #F7F3EB; --ha-sop-row-hover: rgba(199,220,205,0.12); --ha-sop-shell-fill: rgba(35,60,54,0.85); --ha-sop-head-fill: rgba(35,60,54,0.98); }