/* ============================================================================ Sanam — "PAPER DESERT" DAY MODE (REQ-021). OPT-IN light theme. WHAT THIS IS ------------ An optional, persisted LIGHT/day theme for the whole platform — "ink on warm paper", NOT a dark-glassy theme recoloured. Dark "Dusk" stays the DEFAULT and is 100% untouched: this sheet does NOTHING until the shell toggle adds ``data-theme="day"`` to . With no theme attribute the page is Dusk, exactly as before (the test_theme_enforced contract is preserved). HOW IT WORKS (the token layer + per-surface overrides) ------------------------------------------------------ 1. THE TOKEN LAYER. Every Dusk surface reads the same ``--d-*`` tokens (base_dusk.css / operator_dusk.css own the values). Here we RE-DEFINE those SAME token NAMES under ``html[data-theme="day"]`` to the warm paper-desert palette. Because a re-skin is a token swap, ~80% of surfaces (cards, text, lines, the copper/saffron/sea/green accents, the loss amber) flip to light for free — no per-surface edit. The accents are RE-TUNED for AA on the light ground (copper/saffron/sea/green text darkened to clear 4.5:1). 2. PER-SURFACE OVERRIDES. A handful of structural surfaces hard-code dark hex (the sticky top-nav, the sidebar, the topbar, the dropdown menus, the operator hero, the compliance ribbon, the co-pilot, the glassy pills, form inputs, the calendar, the cockpit/MT/reseller chrome). Those can't follow a token swap, so they get explicit light values here, scoped under ``html[data-theme="day"]`` so they only apply in day mode. DESIGN — PAPER DESERT (canon §13, day variant) ---------------------------------------------- * GROUND = warm sand/cream paper (NOT pure white): #F3EADB base, raised panels #FBF6EC, sunk #E9DECB — based off the Cream / Camel tokens. * INK = warm charcoal #2A2017 (≈13:1 on the ground), secondary #5A4A38, faint #6E5B45 (all clear AA). * ACCENTS = the SAME Journey palette, re-tuned for AA on light: Dallah Copper text #9A5E28, Saffron/✦ text #8A5E08, Farasan Sea text #2C5359, Asir Green text #46583A. * CARDS = warm matte PAPER panels (NOT translucent glass — glass does not read on light): soft warm shadows + a copper top-hairline. * NEGATIVES= a darker amber #9A5326 (AA on light) — still amber, never red. * The sea→peaks ridge + the ✦ motif read copper-on-sand in light. Calm, warm, premium, readable for long DAYTIME sessions. DESIGN LAW (kept): a re-skin is a token swap; logical CSS properties (LTR + RTL); copper does the work; negatives stay amber, never red; AA on the ground; prefers-reduced-motion + forced-colors respected. ========================================================================== */ /* ============================================================================ 1) THE TOKEN LAYER — re-define every --d-* token for Paper Desert (day). The token block is declared on BOTH the html node (covers base_dusk.css's :root tokens) AND ``html[data-theme="day"] body.dusk`` (operator_dusk.css / hub.css re-declare the SAME --d-* tokens ON the body, which would otherwise shadow an html-level redefinition — a token read on body finds the value declared on body first. Declaring our day values on body.dusk too, at higher specificity + loaded last, wins). With no data-theme it is inert → Dusk default unchanged. ============================================================================ */ html[data-theme="day"], html[data-theme="day"] body.dusk, html[data-theme="day"] body:not(.public-warm) { /* --- grounds: warm sand/cream paper (NOT pure white) --- */ --d-bg: #F3EADB; /* the warm paper ground */ --d-bg2: #EFE4D2; /* a slightly deeper sand band */ --d-panel: #FBF6EC; /* raised panel paper */ --d-card: #FCF8F0; /* card paper (top of the gradient) */ --d-card-2: #F6EFE2; /* card paper depth */ --d-card-3: #F1E8D8; /* card paper foot (bottom of the gradient) */ /* hairlines / dividers: warm sand lines on paper */ --d-line: #DFD2BB; --d-line-2: #D2C2A6; --d-line-3: #C4B091; /* --- ink (warm charcoal family) — all AA on the paper ground --- */ --d-cream: #2A2017; /* PRIMARY text/"ink" (≈13:1 on #F3EADB) */ --d-tan: #5A4A38; /* secondary ink (.muted) ≈6.6:1 */ --d-ink: #6E5B45; /* faint ink (.faint / hints) ≈5.0:1 */ --d-ink-2: #5A4A38; /* secondary ink (mirror) */ /* --- THE JOURNEY accents, RE-TUNED for AA on the light ground --- The token NAMES are unchanged; the *-lit siblings (which on Dusk are the raised-for-text-on-dark forms) become the AA-on-LIGHT text forms here, and the base FILL colours stay vivid for chips/strokes (used as fill, not text). */ --d-copper: #B87333; /* Dallah Copper — lead, ridge, fills, primary actions */ --d-copper-2: #9A6638; /* copper depth (dividers, pressed fills) */ --d-copper-press: #8A4F22; /* copper PRESSED text/strong (≈5.2:1 on paper) */ --d-copper-lit: #8F571F; /* copper TEXT on light (≈4.96:1 AA) — links/headings */ --d-saff: #B07908; /* Saffron / ✦ / focus ring (fill + ring) */ --d-star-lit: #8A5E08; /* saffron TEXT on light (≈5.0:1) */ --d-green: #6F8260; /* Asir Green — FILL (healthy/on-track) */ --d-green-lit: #46583A; /* asir green TEXT on light (≈5.6:1) */ --d-sea: #3E6F74; /* Farasan Sea — FILL (informational) */ --d-sea-lit: #2C5359; /* farasan sea TEXT on light (≈5.9:1) */ --d-oud: #7A4B2E; /* Oud — deep warm structure */ --d-tan-warm: #C4A882; /* Camel Tan — warm neutral surface */ /* landed-loss amber — darkened for AA on the light ground. Still amber, never red. */ --d-loss: #9A5326; /* ≈5.3:1 on paper */ /* warmer, softer shadows on paper (the deep black Dusk shadows are too heavy) */ --d-shadow: 0 6px 18px rgba(74,54,34,.10), 0 1px 3px rgba(74,54,34,.08); --d-shadow-2: 0 14px 34px rgba(74,54,34,.16); /* native form chrome flips back to light */ color-scheme: light; } /* ============================================================================ 2a) THE GROUND — repaint body + the grain + selection for day. base_dusk.css paints body:not(.public-warm) the dark ground; override it for day. The grain inverts to a faint warm ink fleck (it was a light fleck on dark). ============================================================================ */ html[data-theme="day"] body:not(.public-warm), html[data-theme="day"] body.dusk { background: var(--d-bg); color: var(--d-cream); color-scheme: light; } /* the faint grain: a barely-there warm ink fleck on paper (was cream-on-dark) */ html[data-theme="day"] body:not(.public-warm)::before, html[data-theme="day"] body.dusk::before { opacity: .5; mix-blend-mode: multiply; background-image: radial-gradient(rgba(122,75,46,.05) 1px, transparent 1px); } html[data-theme="day"] body:not(.public-warm) ::selection, html[data-theme="day"] body.dusk ::selection { background: #E8C99A88; } /* ============================================================================ 2b) THE SHELL CHROME — top-nav, sidebar, topbar, menus (hard-coded dark hex). ============================================================================ */ /* the sticky top bar */ html[data-theme="day"] body.dusk .topnav { background: rgba(251,246,236,.90); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--d-line); } html[data-theme="day"] body.dusk .topnav-wm { color: var(--d-cream); } html[data-theme="day"] body.dusk .topnav-wm .ar { color: var(--d-copper-lit); } /* THE SANAM WORDMARK LOCKUP — day (Paper Desert) colours. Copper-on-sand: the star mark reads copper (not the dark-ground saffron), the Latin "Sanam" is the warm-charcoal ink (--d-cream on light = #2A2017, ≈13:1), the Arabic سَنام the AA copper-lit text (#8F571F). Facet stroke = a hair of sand so it stays crafted without a halo. AA in light; the structure (sizes/layout) is inherited. */ html[data-theme="day"] body.dusk .sanam-lockup .sanam-mark { color: var(--d-copper); } html[data-theme="day"] body.dusk .sanam-lockup .sanam-mark .sm-star { fill: currentColor; } html[data-theme="day"] body.dusk .sanam-lockup .sanam-mark .sm-facet { stroke: #FBF6EC; opacity: .85; } html[data-theme="day"] body.dusk .sanam-lockup .sl-en { color: var(--d-cream); } html[data-theme="day"] body.dusk .sanam-lockup .sl-ar { color: var(--d-copper-lit); } html[data-theme="day"] body.dusk .sanam-lockup .sl-words::before { background: var(--d-copper); } html[data-theme="day"] body.dusk .topnav-home, html[data-theme="day"] body.dusk .topnav-cat { color: var(--d-tan); } html[data-theme="day"] body.dusk .topnav-home:hover, html[data-theme="day"] body.dusk .topnav-cat:hover { color: var(--d-cream); background: rgba(184,115,51,.12); } html[data-theme="day"] body.dusk .topnav-home.active, html[data-theme="day"] body.dusk .topnav-cat.active { color: var(--d-cream); background: rgba(184,115,51,.16); } html[data-theme="day"] body.dusk .topnav-home.active svg, html[data-theme="day"] body.dusk .topnav-cat.active svg { stroke: var(--d-copper-press); filter: none; } /* the dropdown menu — paper panel, not a dark glass card */ html[data-theme="day"] body.dusk .topnav-menu { background: var(--d-panel); border: 1px solid var(--d-line-2); border-radius: 14px; box-shadow: var(--d-shadow-2), inset 0 1px 0 rgba(255,255,255,.6); } html[data-theme="day"] body.dusk .topnav-item { color: var(--d-tan); } html[data-theme="day"] body.dusk .topnav-item svg { stroke: var(--d-ink); } html[data-theme="day"] body.dusk .topnav-item:hover { background: var(--d-bg2); color: var(--d-cream); } html[data-theme="day"] body.dusk .topnav-item:hover svg { stroke: var(--d-cream); } html[data-theme="day"] body.dusk .topnav-item.active { background: linear-gradient(135deg, #F0E2CC, #E9DBC3); color: var(--d-cream); } html[data-theme="day"] body.dusk .topnav-item.active svg { stroke: var(--d-copper-press); } html[data-theme="day"] body.dusk .topnav-item .soon-tag { color: var(--d-ink); background: var(--d-bg2); } /* the top-right ✦ Ask / ? Help cluster */ html[data-theme="day"] body.dusk .topnav-ask { color: var(--d-star-lit); background: rgba(176,121,8,.10); border: 1px solid rgba(176,121,8,.35); } html[data-theme="day"] body.dusk .topnav-ask:hover { background: rgba(176,121,8,.18); color: var(--d-copper-press); } html[data-theme="day"] body.dusk .topnav-ask .topnav-ask-star { color: var(--d-saff); } html[data-theme="day"] body.dusk .topnav-help { border: 1px solid var(--d-line-2); background: var(--d-panel); color: var(--d-tan); } html[data-theme="day"] body.dusk .topnav-help:hover { border-color: var(--d-copper); color: var(--d-copper-press); background: var(--d-bg2); } /* A3 (2026-07-02): the reserved right-cluster slot carries the DAY topnav ground so it stays opaque (never painted-under) in LIGHT too (Dusk sets the dark ground). */ html[data-theme="day"] body.dusk .topnav-right { background: rgba(251,246,236,.90); } /* the day/night theme toggle (the shell adds it next to ✦/Help — see platform.js) */ html[data-theme="day"] body.dusk .topnav-theme, body.dusk .topnav-theme { /* a11y (Cursor A11Y): >=44px touch target (WCAG 2.5.5) — was 38px. */ display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--d-line-2); background: rgba(46,34,24,.5); color: var(--d-tan); cursor: pointer; font: inherit; transition: border-color var(--mo) var(--ease-out), color var(--mo) var(--ease-out), background var(--mo) var(--ease-out); flex: none; } body.dusk .topnav-theme svg { width: 18px; height: 18px; stroke: currentColor; } body.dusk .topnav-theme:hover { border-color: var(--d-copper); color: var(--d-cream); background: rgba(46,34,24,.82); } html[data-theme="day"] body.dusk .topnav-theme { background: var(--d-panel); color: var(--d-tan); } html[data-theme="day"] body.dusk .topnav-theme:hover { border-color: var(--d-copper); color: var(--d-copper-press); background: var(--d-bg2); } /* app shell + sidebar + main */ html[data-theme="day"] body.dusk .app, html[data-theme="day"] body.dusk .main { background: var(--d-bg); } html[data-theme="day"] body.dusk .sidebar { background: linear-gradient(180deg, #FBF6EC, #F3EADB); border-inline-end: 1px solid var(--d-line); } html[data-theme="day"] body.dusk .brand-text { color: var(--d-cream); } html[data-theme="day"] body.dusk .brand-text .ar { color: var(--d-copper-lit); } html[data-theme="day"] body.dusk .nav-section { color: var(--d-copper-press); opacity: .9; } html[data-theme="day"] body.dusk .sidebar .nav-subsection { border-top: 1px solid var(--d-line); } html[data-theme="day"] body.dusk .nav-link { color: var(--d-tan); } html[data-theme="day"] body.dusk .nav-link svg { stroke: var(--d-ink); } html[data-theme="day"] body.dusk .nav-link:hover { background: var(--d-bg2); color: var(--d-cream); } html[data-theme="day"] body.dusk .nav-link:hover svg { stroke: var(--d-cream); } html[data-theme="day"] body.dusk .nav-link.active { background: linear-gradient(135deg, #F0E2CC, #E9DBC3); color: var(--d-cream); box-shadow: inset 0 0 0 1px var(--d-line-3), 0 4px 12px rgba(74,54,34,.10); } html[data-theme="day"] body.dusk .nav-link.active svg { stroke: var(--d-copper-press); filter: none; } html[data-theme="day"] body.dusk .nav-link .soon-tag { color: var(--d-ink); background: var(--d-bg2); } html[data-theme="day"] body.dusk .nav-foot { color: var(--d-ink); border-top-color: var(--d-line); } html[data-theme="day"] body.dusk .nav-portal-switch { color: var(--d-copper-press); border-color: var(--d-line-2); } html[data-theme="day"] body.dusk .nav-portal-switch:hover { color: var(--d-cream); border-color: var(--d-copper); background: var(--d-bg2); } /* the secondary topbar (org-switch · locale · role · account ▾) */ html[data-theme="day"] body.dusk .topbar { background: rgba(251,246,236,.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--d-line); } html[data-theme="day"] body.dusk .org-switch { background: var(--d-panel); border-color: var(--d-line-2); color: var(--d-cream); } html[data-theme="day"] body.dusk .org-switch select, html[data-theme="day"] body.dusk .org-switch select option { background: var(--d-panel); color: var(--d-cream); } html[data-theme="day"] body.dusk .org-switch svg { stroke: var(--d-ink); } html[data-theme="day"] body.dusk .org-switch .dot { background: var(--d-green); } html[data-theme="day"] body.dusk .locale-toggle { border-color: var(--d-line-2); } html[data-theme="day"] body.dusk .locale-toggle button { background: var(--d-panel); color: var(--d-tan); } /* AA: dark ink on the copper gradient (white fails) — kept */ html[data-theme="day"] body.dusk .locale-toggle button.on { background: linear-gradient(135deg, var(--d-copper), var(--d-copper-2)); color: #FBF6EC; } html[data-theme="day"] body.dusk .role-chip { background: var(--d-panel); border-color: var(--d-line-2); color: var(--d-tan); } html[data-theme="day"] body.dusk .role-chip svg { stroke: var(--d-ink); } html[data-theme="day"] body.dusk .avatar { background: linear-gradient(135deg, var(--d-copper), var(--d-oud)); color: #FBF6EC; box-shadow: 0 2px 8px rgba(122,75,46,.25); } html[data-theme="day"] body.dusk .topbar-bell { background: var(--d-panel); border: 1px solid var(--d-line-2); } html[data-theme="day"] body.dusk .topbar-bell svg { stroke: var(--d-ink); } /* the account popover (uses platform.css cream tokens — but Dusk surfaces sit on the dark sheet; ensure it reads as paper) */ html[data-theme="day"] body.dusk .account-pop { background: var(--d-panel); border: 1px solid var(--d-line-2); box-shadow: var(--d-shadow-2); } html[data-theme="day"] body.dusk .account-pop-name { color: var(--d-cream); } html[data-theme="day"] body.dusk .account-pop-item { color: var(--d-tan); } html[data-theme="day"] body.dusk .account-pop-item:hover { background: var(--d-bg2); } /* the operate-as concierge banner + the illustrative truth strip */ html[data-theme="day"] body.dusk .operate-as { background: #F4E6CC; color: var(--d-copper-press); border-bottom: 1px solid var(--d-line-2); } html[data-theme="day"] body.dusk .operate-as svg, html[data-theme="day"] body.dusk .operate-as strong { color: var(--d-copper-press); stroke: var(--d-copper-press); } html[data-theme="day"] body.dusk .demo-strip { background: var(--d-bg2); color: var(--d-tan); border-bottom: 1px solid var(--d-line); } /* the mobile bottom tab bar */ html[data-theme="day"] body.dusk .tabbar { background: var(--d-panel); border-top: 1px solid var(--d-line); } html[data-theme="day"] body.dusk .tabbar a, html[data-theme="day"] body.dusk .tabbar button { color: var(--d-ink); } html[data-theme="day"] body.dusk .tabbar a.active, html[data-theme="day"] body.dusk .tabbar button#nav-more[aria-expanded="true"] { color: var(--d-copper-press); } /* the mobile nav drawer */ html[data-theme="day"] body.dusk .nav-drawer-backdrop { background: rgba(43,31,22,.42); } html[data-theme="day"] body.dusk .nav-drawer { background: linear-gradient(180deg, #FBF6EC, #F3EADB); box-shadow: 0 -10px 30px rgba(74,54,34,.18); } /* ============================================================================ 2c) HEADINGS / TEXT / LINKS / FOCUS on the paper ground. ============================================================================ */ html[data-theme="day"] body.dusk h1, html[data-theme="day"] body.dusk h2, html[data-theme="day"] body.dusk h3, html[data-theme="day"] body.dusk h4 { color: var(--d-cream); } html[data-theme="day"] body.dusk .muted { color: var(--d-tan); } html[data-theme="day"] body.dusk .faint { color: var(--d-ink); } html[data-theme="day"] body.dusk a { color: var(--d-copper-lit); } html[data-theme="day"] body.dusk .page-head .sub { color: var(--d-tan); } html[data-theme="day"] body.dusk .card h3 a, html[data-theme="day"] body.dusk h3 a { color: var(--d-copper-lit); } /* the saffron focus ring stays a saffron ring, but at the AA-on-light tone. EXCLUDE the route-focused page heading: the generic ring drew the SAME tight full-width saffron BOX around the H1/H2 on every route change (it reads as a big selected box around the heading). The base sheets (platform.css / operator_dusk.css) already replace that box with a quiet leading bar for h1/h2.route-focus, but this day-layer generic rule loads LAST and re-applied the box. Scope it to NOT match the route-focused headings so the subtler indicator below wins. */ html[data-theme="day"] body.dusk :focus-visible:not(h1.route-focus):not(h2.route-focus) { box-shadow: 0 0 0 3px var(--d-saff); outline: none; } /* FIX-4 (day-theme route-focus): the route-changed page heading gets a SUBTLER indicator — a quiet leading COPPER bar (matches the Dusk + base behaviour), NOT a full saffron box drawn around the whole page heading. The base ::before bar already exists (platform.css / operator_dusk.css); here we only ensure NO box + tune the bar to the AA-on-light copper. */ html[data-theme="day"] body.dusk h1.route-focus:focus-visible, html[data-theme="day"] body.dusk h2.route-focus:focus-visible { box-shadow: none; outline: none; border-radius: 0; position: relative; } html[data-theme="day"] body.dusk h1.route-focus:focus-visible::before, html[data-theme="day"] body.dusk h2.route-focus:focus-visible::before { content: ""; position: absolute; inset-block: 2px; inset-inline-start: -12px; inline-size: 3px; border-radius: 3px; background: var(--d-copper-lit); } /* ============================================================================ 2d) BUTTONS — the warm glassy pill becomes a warm PAPER pill in day. ============================================================================ */ html[data-theme="day"] body.dusk .btn, html[data-theme="day"] body.dusk .btn-sm { background: var(--d-panel); color: var(--d-copper-press); border-color: var(--d-line-2); border-radius: 999px; font-weight: 700; } html[data-theme="day"] body.dusk .btn svg { stroke: var(--d-copper-press); } html[data-theme="day"] body.dusk .btn:hover { background: var(--d-bg2); border-color: var(--d-copper); } /* the primary button keeps the copper gradient with dark ink (reads AA on both modes) */ html[data-theme="day"] body.dusk .btn-primary, html[data-theme="day"] body.dusk .btn-primary.btn-sm { background: linear-gradient(180deg, var(--d-copper), var(--d-copper-2)); border-color: var(--d-copper-2); color: #FBF6EC; font-weight: 700; box-shadow: 0 4px 12px rgba(184,115,51,.25); } html[data-theme="day"] body.dusk .btn-primary svg, html[data-theme="day"] body.dusk .btn-primary.btn-sm svg { stroke: #FBF6EC; } html[data-theme="day"] body.dusk .btn-primary:hover, html[data-theme="day"] body.dusk .btn-primary.btn-sm:hover { background: linear-gradient(180deg, var(--d-copper-2), var(--d-copper-press)); border-color: var(--d-copper-press); box-shadow: 0 6px 16px rgba(138,79,34,.32); } /* ============================================================================ 2e) CARDS / TILES / ROWS — warm matte PAPER panels (not translucent glass), soft warm shadow + the copper top-hairline. ============================================================================ */ html[data-theme="day"] body.dusk .card { background: linear-gradient(180deg, var(--d-card), var(--d-card-3)); border: 1px solid var(--d-line); border-radius: 16px; box-shadow: var(--d-shadow), inset 0 1px 0 rgba(255,255,255,.55); } html[data-theme="day"] body.dusk .card.sunk { background: var(--d-bg2); box-shadow: none; } /* the .kpi / .stat-tile copper dawn-glow → a soft copper paper wash */ html[data-theme="day"] body.dusk .kpi, html[data-theme="day"] body.dusk .stat-tile { background: radial-gradient(120% 90% at 12% 0%, rgba(184,115,51,.08), transparent 58%), linear-gradient(180deg, var(--d-card), var(--d-card-3)); border: 1px solid var(--d-line); border-radius: 16px; box-shadow: var(--d-shadow), inset 0 1px 0 rgba(255,255,255,.55); } html[data-theme="day"] body.dusk .stat-tile:hover { border-color: var(--d-line-3); box-shadow: var(--d-shadow-2), 0 0 22px rgba(184,115,51,.12); } html[data-theme="day"] body.dusk .stat-tile .lbl { color: var(--d-tan); } html[data-theme="day"] body.dusk .stat-tile .lbl svg { stroke: var(--d-copper-press); } html[data-theme="day"] body.dusk .stat-tile .num { color: var(--d-cream); } html[data-theme="day"] body.dusk .stat-tile .num small { color: var(--d-ink); } html[data-theme="day"] body.dusk .stat-tile .delta { color: var(--d-green-lit); } html[data-theme="day"] body.dusk .stat-tile .delta.flat { color: var(--d-ink); } /* the najdi notch crest — a soft copper paper crest */ html[data-theme="day"] body.dusk .card:has(> .section-title)::before, html[data-theme="day"] body.dusk .card:has(> h2:first-child)::before, html[data-theme="day"] body.dusk .card:has(> h3:first-child)::before, html[data-theme="day"] body.dusk .stat-tile::before { background: linear-gradient(180deg, rgba(184,115,51,.14), transparent); } html[data-theme="day"] body.dusk .section-title h2 { color: var(--d-cream); } /* the alert / booking / listing / earnings row — a warm paper niche */ html[data-theme="day"] body.dusk .alert-row { background: radial-gradient(120% 120% at 0% 0%, rgba(184,115,51,.06), transparent 60%), linear-gradient(180deg, var(--d-panel), var(--d-card-3)); border: 1px solid var(--d-line); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); } html[data-theme="day"] body.dusk .alert-row:hover { border-color: var(--d-line-3); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 16px rgba(74,54,34,.10); } html[data-theme="day"] body.dusk .alert-row .head { color: var(--d-cream); } html[data-theme="day"] body.dusk .alert-row .meta { color: var(--d-tan); } html[data-theme="day"] body.dusk .alert-row svg { stroke: var(--d-copper-press); } html[data-theme="day"] body.dusk .calm-state { color: var(--d-tan); border-color: var(--d-line-2); } /* the .queue-card niche — the SHARED cockpit card used by the Commission ("Channels" rows + "Contract overrides" rows) and Supply-health (per-supplier scorecard rows) screens. In Dusk it grounds a dark oud gradient (rgba(46,34,24,…)); it had NO day counterpart, so in the default Paper-Desert day theme the card + its channel-rate / supplier-health numbers rendered dark-on-dark (illegible). Flip the fill to the same warm paper niche as .alert-row and flip the inner text to charcoal (AA). NOTE: the raw dark ground here is an rgba() gradient, which the day-theme coverage guard's hex scanner did not see — the guard now PINS .queue-card / .qc-head / .qc-meta as day- covered (test_cockpit_queue_card_has_a_day_override + test_commission_and_supply_health_shared_cards_are_day_covered) so this can never silently regress. */ html[data-theme="day"] body.dusk .queue-card { background: radial-gradient(120% 120% at 0% 0%, rgba(184,115,51,.06), transparent 60%), linear-gradient(180deg, var(--d-panel), var(--d-card-3)); border: 1px solid var(--d-line); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); } html[data-theme="day"] body.dusk .queue-card:hover { border-color: var(--d-line-3); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 16px rgba(74,54,34,.10); } html[data-theme="day"] body.dusk .queue-card .qc-head strong { color: var(--d-cream); } html[data-theme="day"] body.dusk .queue-card .qc-head svg { stroke: var(--d-copper-press); } html[data-theme="day"] body.dusk .queue-card .qc-meta { color: var(--d-tan); } html[data-theme="day"] body.dusk .queue-card .faint { color: var(--d-ink); } /* inactive/paused override rows keep the copper accent edge on paper */ html[data-theme="day"] body.dusk .queue-card.blocked { border-inline-start: 4px solid var(--d-copper-press); } /* a scorecard row over a threshold (supply-health warn-card) — a warm loss edge */ html[data-theme="day"] body.dusk .queue-card.warn-card { border-inline-start: 4px solid var(--d-loss); } /* ============================================================================ 2f) PILLS / HONESTY VOCABULARY — light chips, AA text. ============================================================================ */ html[data-theme="day"] body.dusk .pill { color: var(--d-cream); } html[data-theme="day"] body.dusk .pill-ok, html[data-theme="day"] body.dusk .pill-real { background: #E3EAD7; color: var(--d-green-lit); } html[data-theme="day"] body.dusk .pill-warn, html[data-theme="day"] body.dusk .pill-saffron { background: #F6E7C2; color: var(--d-star-lit); } html[data-theme="day"] body.dusk .pill-danger, html[data-theme="day"] body.dusk .pill-loss { background: #F0DCCB; color: #8E4A22; } /* loss amber, AA on the lighter pill */ html[data-theme="day"] body.dusk .pill-info, html[data-theme="day"] body.dusk .pill-sim { background: #D8E6E7; color: var(--d-sea-lit); } html[data-theme="day"] body.dusk .pill-neutral, html[data-theme="day"] body.dusk .pill-coming { background: var(--d-bg2); color: var(--d-tan); border-color: var(--d-line-2); } html[data-theme="day"] body.dusk .pill-illustrative { background: var(--d-bg2); color: var(--d-ink); border: 1px dashed var(--d-line-2); } html[data-theme="day"] body.dusk .cobrand-badge { background: #F4E6CC; color: var(--d-copper-press); border-color: var(--d-line-3); } html[data-theme="day"] body.dusk .cobrand-badge svg { stroke: var(--d-copper-press); } /* ============================================================================ 2g) FORMS — light inputs with legible ink, copper focus. ============================================================================ */ html[data-theme="day"] body.dusk .field > .lbl, html[data-theme="day"] body.dusk .field > label { color: var(--d-tan); } html[data-theme="day"] body.dusk .field input, html[data-theme="day"] body.dusk .field select, html[data-theme="day"] body.dusk .field textarea { background: #FFFDF8; border-color: var(--d-line-2); color: var(--d-cream); } html[data-theme="day"] body.dusk .field input:focus, html[data-theme="day"] body.dusk .field select:focus { border-color: var(--d-copper); } html[data-theme="day"] body.dusk .field-hint { color: var(--d-ink); } /* ============================================================================ 2h) STATES / honesty note / skeleton / err / toast. ============================================================================ */ html[data-theme="day"] body.dusk .honesty { background: #D8E6E7; border-color: #B9D3D5; color: var(--d-sea-lit); } html[data-theme="day"] body.dusk .honesty svg { stroke: var(--d-sea-lit); } html[data-theme="day"] body.dusk .empty { background: var(--d-panel); border-color: var(--d-line-2); color: var(--d-tan); } html[data-theme="day"] body.dusk .empty .ico svg { stroke: var(--d-copper-press); } html[data-theme="day"] body.dusk .empty h3 { color: var(--d-cream); } html[data-theme="day"] body.dusk .skel { background: linear-gradient(100deg, #ECE2D0 30%, #F6EFE2 50%, #ECE2D0 70%); background-size: 200% 100%; } html[data-theme="day"] body.dusk .err-block { background: #F0DCCB; border-color: var(--d-loss); color: #7A3E1C; } html[data-theme="day"] body.dusk .err-block svg { stroke: #7A3E1C; } /* toasts: the copper one carries light ink; info/danger get AA-on-light grounds */ html[data-theme="day"] body.dusk .toast { background: linear-gradient(135deg, var(--d-copper), var(--d-copper-2)); color: #FBF6EC; } html[data-theme="day"] body.dusk .toast.info { background: #2C5359; color: #FBF6EC; } html[data-theme="day"] body.dusk .toast.danger { background: var(--d-oud); color: #FBF6EC; } /* ============================================================================ 2i) CALENDAR surface (operator daily hero). ============================================================================ */ html[data-theme="day"] body.dusk .legend-row { color: var(--d-tan); } html[data-theme="day"] body.dusk .cal-dow { color: var(--d-ink); } /* A1 (calendar LIGHT void, re-fixed 2026-07-03): the 2026-07-02 pass grounded the cell on #FCFAF5 with a #9A7E48 border — which technically cleared 3:1 (3.23:1 vs the #F3EADB page) but sat RIGHT at the threshold, and CRUCIALLY every ACTIVE state (Open / Partly / Sold-out / Not-set) shared that ONE flat fill with no per-state distinction — so under the low-opacity Sadu weave + the 8px inter-cell gaps the month still read as a faint cream void with only the one authored cell discernible. Root fix here: (a) a STRONGER base cell border (#8C6E3E ≈ 3.99:1 vs the page / 4.56:1 vs the cell) so every cell boundary is unmistakable — well clear of the 3:1 min; (b) a distinct per-state PAPER TINT + a colour-coded LEADING EDGE (an inset ring on the inline-start, each ≥ 4.8:1 vs the page) for Open / Partly / Sold-out — so the six legend states are each distinguishable by fill AND edge, on TOP of the shape-coded corner dot (WCAG 1.4.1, never colour alone). The date number + "N of M" caption stay --d-tan ink (≥ 7:1 on every tint). */ html[data-theme="day"] body.dusk .cal-day { background: #FCFAF5; border: 1px solid #8C6E3E; color: var(--d-cream); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); } html[data-theme="day"] body.dusk .cal-day:hover { border-color: var(--d-copper); box-shadow: 0 6px 16px rgba(74,54,34,.12); } html[data-theme="day"] body.dusk .cal-day .dnum { color: var(--d-tan); } html[data-theme="day"] body.dusk .cal-day .cap { color: var(--d-tan); } html[data-theme="day"] body.dusk .cal-day.today .dnum { color: var(--d-copper-press); } /* --- per-state fills + colour-coded leading edge (day mode) ------------------ Each active state gets a faint hue-tinted paper AND a 3px inset leading edge in its legend colour so Open vs Partly vs Sold-out read apart at a glance — the edge colours (green/copper/terracotta) each clear 4.8:1 vs the page, and the shape-coded corner dot still carries the non-colour signal. "Not set" stays plain paper (the dashed corner dot is its quiet invitation). */ html[data-theme="day"] body.dusk .cal-day.open { background: #F0F3E9; box-shadow: inset 3px 0 0 #4C6B3F, inset 0 1px 0 rgba(255,255,255,.6); } html[data-theme="day"] body.dusk .cal-day.partial { background: #FAEFDD; box-shadow: inset 3px 0 0 #8A5A22, inset 0 1px 0 rgba(255,255,255,.6); } html[data-theme="day"] body.dusk .cal-day.full { background: #FAE7DE; box-shadow: inset 3px 0 0 #A64B2A, inset 0 1px 0 rgba(255,255,255,.6); } html[data-theme="day"] body.dusk .cal-day.unset { background: #FCFAF5; } /* the leading edge flips to the inline-end in RTL so it stays on the reading-start */ html[dir="rtl"][data-theme="day"] body.dusk .cal-day.open { box-shadow: inset -3px 0 0 #4C6B3F, inset 0 1px 0 rgba(255,255,255,.6); } html[dir="rtl"][data-theme="day"] body.dusk .cal-day.partial { box-shadow: inset -3px 0 0 #8A5A22, inset 0 1px 0 rgba(255,255,255,.6); } html[dir="rtl"][data-theme="day"] body.dusk .cal-day.full { box-shadow: inset -3px 0 0 #A64B2A, inset 0 1px 0 rgba(255,255,255,.6); } /* closed/blackout keep a distinct (deeper) sand ground but the SAME AA border. */ html[data-theme="day"] body.dusk .cal-day.closed { background: var(--d-bg2); border-color: #8C6E3E; } html[data-theme="day"] body.dusk .cal-day.blackout { background: repeating-linear-gradient(45deg, #EFE4D2, #EFE4D2 6px, #FCFAF5 6px, #FCFAF5 12px); border-color: #8C6E3E; } html[data-theme="day"] body.dusk .stepper button:hover { background: var(--d-bg2); } /* ============================================================================ 2i-bis) THE THEME-BLEED CLASS (A1, 2026-07-02) — three screen sheets (supplier_trip_lifecycle.css / operator_reservation.css / operator_checkin.css) were authored Dusk-first with RAW dark hex/gradients scoped only to ``body.dusk`` and had ZERO ``html[data-theme="day"]`` counterparts — so in the LIGHT default they rendered dark-on-dark (illegible / WCAG fail). These sheets are now in the day-theme coverage guard's scan list; here are their day grounds. The ink/accent tokens (--d-cream / --d-tan / --d-saff / --d-green-lit / --d-sea-lit) already flip AA via the token layer, so only the GROUNDS are re-painted to warm paper. Loaded LAST → these win over the Dusk base rules. ============================================================================ */ /* --- Trip lifecycle (supplier_trip_lifecycle.css) --------------------------- */ /* the phase CARD (was a near-black gradient rgba(53,39,25,.55)→rgba(46,34,24,.92)). */ html[data-theme="day"] body.dusk .tl-card { background: linear-gradient(180deg, var(--d-card), var(--d-card-3)); border-color: var(--d-line); box-shadow: var(--d-shadow), inset 0 1px 0 rgba(255,255,255,.55); } /* the checklist row hover (was #2F2216) + the incident bands (token --d-bg2 flips). */ html[data-theme="day"] body.dusk .tl-check-row:hover { background: var(--d-bg2); } html[data-theme="day"] body.dusk .tl-req-tag { color: var(--d-star-lit); background: #F4E7C9; } html[data-theme="day"] body.dusk .tl-inc { background: var(--d-panel); border-inline-start-color: var(--d-line-3); } html[data-theme="day"] body.dusk .tl-inc-warn { border-inline-start-color: var(--d-saff); } html[data-theme="day"] body.dusk .tl-inc-incident { border-inline-start-color: var(--d-copper-2); } html[data-theme="day"] body.dusk .tl-inc-incident .tl-inc-sev { color: var(--d-copper-press); } /* the tl-card inline field controls (were --d-bg2 dark; keep a light paper field). */ html[data-theme="day"] body.dusk .tl-card input[type="text"], html[data-theme="day"] body.dusk .tl-card select { background: #FFFDF8; border-color: var(--d-line-2); color: var(--d-cream); } /* the err block (was --d-card dark) → a warm loss-amber paper niche. */ html[data-theme="day"] body.dusk .tl-card .err-block, html[data-theme="day"] body.dusk .err-block { background: #F0DCCB; border-color: var(--d-line-3); color: #7A3E1C; } /* --- Register-a-reservation (operator_reservation.css) ---------------------- */ /* the two-lane mode toggle track (was #20160E). */ html[data-theme="day"] body.dusk .mode-toggle { background: var(--d-bg2); border-color: var(--d-line-2); } html[data-theme="day"] body.dusk .mode-toggle button { color: var(--d-tan); } html[data-theme="day"] body.dusk .mode-toggle button:hover { color: var(--d-cream); } /* the AI invoice drop zone + its textarea (were #20160E / #1A130D). */ html[data-theme="day"] body.dusk .invoice-drop { background: var(--d-panel); border-color: var(--d-line-3); } html[data-theme="day"] body.dusk .invoice-drop textarea { background: #FFFDF8; border-color: var(--d-line-2); color: var(--d-cream); } /* the AI DRAFT review card (was a dark gradient rgba(59,46,20,.45)→rgba(42,31,21,.92)). */ html[data-theme="day"] body.dusk .draft-card { background: linear-gradient(180deg, var(--d-card), var(--d-card-3)); border-color: var(--d-line-2); box-shadow: var(--d-shadow-2), inset 0 1px 0 rgba(255,255,255,.55); } /* the success read-back line (was #2B2017). */ html[data-theme="day"] body.dusk .res-line { background: var(--d-panel); border-color: var(--d-line); } html[data-theme="day"] body.dusk .res-line .rl-body .meta { color: var(--d-ink); } /* the "still open on Sanam" binding-remaining band (was #1F3236 sea-dark). */ html[data-theme="day"] body.dusk .binding-remaining { background: #D8E6E7; border-color: #B9D3D5; color: var(--d-sea-lit); } html[data-theme="day"] body.dusk .binding-remaining svg { stroke: var(--d-sea-lit); } /* the listing PICKER cards (was #2B2017) + the SELECTED card (was #3B2B1C — the report's dark-on-dark selected card: #3B2B1C ground with a #2A2017 title). */ html[data-theme="day"] body.dusk .res-pick .pick-item { background: var(--d-panel); border-color: var(--d-line-2); color: var(--d-cream); } html[data-theme="day"] body.dusk .res-pick .pick-item.active { background: #F1E3CB; border-color: var(--d-copper); box-shadow: inset 0 0 0 1px var(--d-copper); } html[data-theme="day"] body.dusk .res-pick .pi-meta { color: var(--d-ink); } /* --- Guest check-in (operator_checkin.css) ---------------------------------- */ /* the headcount RING header card (was a dark gradient rgba(59,43,28,.55)→rgba(42,31,21,.92)). */ html[data-theme="day"] body.dusk .ci-head { background: linear-gradient(135deg, var(--d-card), var(--d-card-3)); border-color: var(--d-line-2); box-shadow: var(--d-shadow-2), inset 0 1px 0 rgba(255,255,255,.55); } html[data-theme="day"] body.dusk .ring .track { stroke: var(--d-line-3); } /* the per-pax tap-target tick box (was #20160E, dark-on-cream). */ html[data-theme="day"] body.dusk .gx .tick { background: #FFFDF8; border-color: var(--d-line-2); } html[data-theme="day"] body.dusk .gx.no .tick { background: #F0DCCB; border-color: var(--d-copper-2); } /* the no-show button (was #2B2017). */ html[data-theme="day"] body.dusk .gx .noshow-btn { background: var(--d-panel); border-color: var(--d-line-2); color: var(--d-tan); } html[data-theme="day"] body.dusk .gx .noshow-btn:hover { border-color: var(--d-copper-2); color: var(--d-copper-press); } /* the SAFETY return section (was a dark sea gradient) → a light Farasan-sea niche. */ html[data-theme="day"] body.dusk .safety { background: linear-gradient(135deg, #DEEAEB, #D2E2E3); border-color: #B9D3D5; } html[data-theme="day"] body.dusk .safety .t, html[data-theme="day"] body.dusk .safety .t svg { color: var(--d-sea-lit); stroke: var(--d-sea-lit); } html[data-theme="day"] body.dusk .safety .srow { color: var(--d-tan); } html[data-theme="day"] body.dusk .safety .pill-dep { background: #FFFDF8; border-color: #B9D3D5; color: var(--d-sea-lit); } html[data-theme="day"] body.dusk .safety.done { background: linear-gradient(135deg, #E7EBE0, #DCE4D3); border-color: #CBD6BC; } html[data-theme="day"] body.dusk .safety.done .t, html[data-theme="day"] body.dusk .safety.done .t svg { color: var(--d-green-lit); stroke: var(--d-green-lit); } /* the "issue tickets" pre-state icon coin (was #3D2C1C). */ html[data-theme="day"] body.dusk .ci-issue .ico { background: #EFE0C8; } /* the booking PICKER cards (was #2B2017). */ html[data-theme="day"] body.dusk .ci-pick .pick-item { background: var(--d-panel); border-color: var(--d-line-2); color: var(--d-cream); } html[data-theme="day"] body.dusk .ci-pick .pi-meta { color: var(--d-ink); } /* ============================================================================ 2i-ter) THE UNIFIED TRIP SCREEN (supplier_trip.css) — the ONE booking-centric Pre · During · After surface (operator_trip_revamp_2026-07-03.md). It replaces the two retired sheets (supplier_trip_phases.css / supplier_trip_lifecycle.css) with one ``.trip-*`` namespace. Every ground below paints a RAW dark hex under ``body.dusk`` (so the day-theme coverage guard tracks the class); here are the matching LIGHT overrides — warm paper grounds built from the day-swapped ``--d-*`` tokens. Ink/accents flip AA via the token layer. Loaded LAST → these win. ============================================================================ */ /* the shared trip CARD (was a near-black gradient #352719→#2E2218). */ html[data-theme="day"] body.dusk .trip-card { background: linear-gradient(180deg, var(--d-card), var(--d-card-3)); border-color: var(--d-line); box-shadow: var(--d-shadow), inset 0 1px 0 rgba(255,255,255,.55); } /* the trip form controls (were #251A10 dark-on-cream — illegible option/placeholder). */ html[data-theme="day"] body.dusk .trip-wrap select, html[data-theme="day"] body.dusk .trip-wrap textarea, html[data-theme="day"] body.dusk .trip-wrap input[type="datetime-local"] { background: #FFFDF8; border-color: var(--d-line-2); color: var(--d-cream); } /* the phase stepper pills + dots (were #2A1E13 / #201509). */ html[data-theme="day"] body.dusk .trip-step { background: var(--d-panel); border-color: var(--d-line-2); } html[data-theme="day"] body.dusk .trip-step-dot { background: var(--d-bg2); color: var(--d-tan); } html[data-theme="day"] body.dusk .trip-step.active .trip-step-dot { background: var(--d-copper); color: #fff; } html[data-theme="day"] body.dusk .trip-step.done .trip-step-dot { background: var(--d-green); color: #fff; } /* the pre-trip check-lines + the required-doc capture rows (were #2A1E13). */ html[data-theme="day"] body.dusk .trip-checkline, html[data-theme="day"] body.dusk .trip-doc-row { background: var(--d-panel); border-color: var(--d-line-2); } /* the doc-row icon coin (was #201509). */ html[data-theme="day"] body.dusk .trip-doc-icon { background: var(--d-bg2); } /* the reminder note + the surcharge panel + the agreement panel (were #251A10). */ html[data-theme="day"] body.dusk .trip-reminder-note { background: var(--d-panel); border-color: var(--d-line-3); } html[data-theme="day"] body.dusk .trip-surcharge { background: var(--d-panel); border-color: var(--d-line-2); } html[data-theme="day"] body.dusk .trip-surcharge.ok { border-color: var(--d-green); } html[data-theme="day"] body.dusk .trip-surcharge.due { border-color: var(--d-copper); } html[data-theme="day"] body.dusk .trip-agreement { background: var(--d-panel); border-color: var(--d-line-2); } /* the terms-version chip (was #2E2218). */ html[data-theme="day"] body.dusk .trip-agreement-ver { background: #F1E3CB; border-color: var(--d-line-2); color: var(--d-copper-press); } /* ============================================================================ 2j) THE OPERATOR HERO — the dark dawn-glow hero becomes a warm sand dawn. ============================================================================ */ html[data-theme="day"] body.dusk .dusk-hero { background: radial-gradient(1100px 420px at 16% -16%, rgba(184,115,51,.16), transparent 60%), radial-gradient(800px 340px at 92% -6%, rgba(176,121,8,.10), transparent 55%), radial-gradient(900px 360px at 78% 2%, rgba(62,111,116,.07), transparent 62%), linear-gradient(180deg, #F7ECD9, #F2E6D2); /* POLISH (2026-06-23): the bottom edge is now the SOFT fading copper hairline (the ::after, retuned for sand below); keep only a hairline frame on the other three edges so the hero no longer reads as a hard-ruled box. */ border: 1px solid var(--d-line); border-block-end: 0; } /* POLISH (2026-06-23) — the soft fading hero hairline on the warm sand ground: copper reads stronger on light, so deepen the centre stop a touch; the bloom above it stays subtle. Both fade to transparent at the edges (no hard rule). */ html[data-theme="day"] body.dusk .dusk-hero::after { background: linear-gradient(90deg, transparent 0%, rgba(176,121,8,.14) 18%, rgba(184,115,51,.50) 50%, rgba(176,121,8,.14) 82%, transparent 100%); } html[data-theme="day"] body.dusk .dusk-hero::before { background: radial-gradient(60% 100% at 50% 100%, rgba(184,115,51,.10), transparent 72%); } html[data-theme="day"] body.dusk .dusk-hero .greet, html[data-theme="day"] body.dusk .dusk-hero h1 { color: var(--d-cream); } html[data-theme="day"] body.dusk .dusk-hero .horizon .back { filter: drop-shadow(0 0 4px rgba(184,115,51,.22)); opacity: .5; } html[data-theme="day"] body.dusk .dusk-hero .horizon .front { filter: drop-shadow(0 0 6px rgba(176,121,8,.35)); } /* the seal watermark + horizon strokes were saffron #E6AE45 (drawn inline); nudge their opacity so copper-on-sand reads on the lighter ground */ html[data-theme="day"] body.dusk .seal-wm { opacity: .5; } /* ---------------------------------------------------------------------------- THE SLIM-HERO DUNE BACKDROP on PAPER DESERT (2026-07-01, brand-hero pass). Flip the Dusk oud band to a warm "Paper Desert" cream ground with a copper/ saffron DAWN GLOW rising from the bottom-right (sunrise over the sand). The dune SVG (.hero-dunes-bg) is the SAME layered land, but on cream the copper/ saffron fills need a touch more presence + a warm multiply so they read as sand-lit dunes, not grey. The greeting stays copper/ink over the warm-cream scrim (below), crisply AA. */ html[data-theme="day"] body.dusk .dusk-hero.hero-slim { background: radial-gradient(120% 150% at 88% 128%, rgba(230,174,69,.30), transparent 52%), radial-gradient(92% 130% at 100% 120%, rgba(184,115,51,.24), transparent 60%), radial-gradient(1000px 380px at 14% -20%, rgba(184,115,51,.12), transparent 60%), linear-gradient(180deg, #F8EEDC, #F1E4CF); border: 1px solid var(--d-line); border-block-end: 0; } /* the dune fills read a shade stronger + warm-blended on the light ground so the copper land is legible sand, not a grey wash; the lit ridge + star deepen a touch (copper reads darker on cream). Opacities scale up from the Dusk base. */ html[data-theme="day"] body.dusk .hero-slim .hero-dunes-bg { mix-blend-mode: multiply; } html[data-theme="day"] body.dusk .hero-slim .hero-dunes-bg .hd-dawn { mix-blend-mode: normal; opacity: .8; } html[data-theme="day"] body.dusk .hero-slim .hero-dunes-bg .hd-far { opacity: .22; } html[data-theme="day"] body.dusk .hero-slim .hero-dunes-bg .hd-mid { opacity: .34; } html[data-theme="day"] body.dusk .hero-slim .hero-dunes-bg .hd-near { opacity: .50; } html[data-theme="day"] body.dusk .hero-slim .hero-dunes-bg .hd-ridge { stroke-width: 2; opacity: .85; filter: drop-shadow(0 0 5px rgba(176,121,8,.3)); } html[data-theme="day"] body.dusk .hero-slim .hero-dunes-bg .hd-star { fill: #B07908; opacity: .85; filter: drop-shadow(0 0 5px rgba(176,121,8,.45)); } /* the slim-hero scrim → a soft WARM-CREAM wash on light (the headline is ink/ copper here, so lift it off the dunes with paper, never a dark wedge). */ html[data-theme="day"] body.dusk .hero-slim .hero-scrim { background: linear-gradient(90deg, rgba(246,238,222,.80) 0%, rgba(246,238,222,.36) 42%, transparent 70%), linear-gradient(0deg, rgba(246,238,222,.34) 0%, transparent 44%); } html[data-theme="day"][dir="rtl"] body.dusk .hero-slim .hero-scrim { background: linear-gradient(270deg, rgba(246,238,222,.80) 0%, rgba(246,238,222,.36) 42%, transparent 70%), linear-gradient(0deg, rgba(246,238,222,.34) 0%, transparent 44%); } /* ============================================================================ 2k) THE COMPLIANCE RIBBON + CO-PILOT (operator home). ============================================================================ */ html[data-theme="day"] body.dusk .dusk-ribbon { background: linear-gradient(180deg, #FBF6ECdd, #F4E9D6dd); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid var(--d-line); } html[data-theme="day"] body.dusk .dusk-ribbon .rb-ico { background: #F0DEC0; } /* the co-pilot panel — a warm paper card with the same dual dawn-glow, on light. NOTE: the hero variant ``body.dusk .j-hero .copilot.assistant`` has higher specificity (4 classes); the day overrides below MUST match-or-exceed it, so they carry the same .j-hero .copilot.assistant chain (5 classes wins). */ html[data-theme="day"] body.dusk .copilot, html[data-theme="day"] body.dusk .j-hero .copilot.assistant { background: radial-gradient(120% 80% at 100% 0%, rgba(176,121,8,.10), transparent 55%), radial-gradient(90% 60% at 0% 100%, rgba(62,111,116,.07), transparent 60%), linear-gradient(180deg, #FBF6EC, #F4E9D6); border: 1px solid var(--d-line-2); border-color: var(--d-line-2); box-shadow: var(--d-shadow-2), inset 0 1px 0 rgba(255,255,255,.6); } html[data-theme="day"] body.dusk .copilot .cp-err { color: #7A3E1C; } /* FR-SB-2 upgrade wall — the Dusk dark-ground class gets its Paper-Desert day override (calm warm-paper copper card, legible ink — never error-toned). */ html[data-theme="day"] body.dusk .copilot .cp-upgrade { background: rgba(176,121,8,.08); border: 1px solid rgba(176,121,8,.34); } html[data-theme="day"] body.dusk .copilot .cp-upgrade .cp-upgrade-lead { color: var(--d-cream); } html[data-theme="day"] body.dusk .copilot .cp-upgrade .cp-upgrade-lead svg { color: #B07908; } html[data-theme="day"] body.dusk .ai-narrative .ai-spark, html[data-theme="day"] body.dusk .copilot .cp-head .cp-spark { background: #F0DEC0; } /* the Northern-Star header mark + the spark glow → a soft copper paper coin */ html[data-theme="day"] body.dusk .copilot .as-head .as-star.nstar, html[data-theme="day"] body.dusk .copilot .cp-spark.nstar { background: radial-gradient(circle at 36% 30%, rgba(176,121,8,.22), rgba(184,115,51,.14)); border: 1px solid rgba(176,121,8,.4); box-shadow: 0 0 12px rgba(176,121,8,.2); } html[data-theme="day"] body.dusk .copilot .cp-head h2, html[data-theme="day"] body.dusk .copilot .as-id .nm { color: var(--d-cream); } html[data-theme="day"] body.dusk .copilot .cp-head .cp-sub { color: var(--d-tan); } /* the proactive opener bubble — a warm paper bubble */ html[data-theme="day"] body.dusk .copilot .cp-opener { background: linear-gradient(180deg, #FBF6EC, #F4E9D6); border: 1px solid var(--d-line-2); } html[data-theme="day"] body.dusk .copilot .cp-opener-msg { color: var(--d-cream); } /* the co-pilot ASK input — light field, legible ink (was dark-on-dark) */ html[data-theme="day"] body.dusk .copilot .cp-ask input { background: #FFFDF8; border: 1px solid var(--d-line-2); color: var(--d-cream); } html[data-theme="day"] body.dusk .copilot .cp-ask input::placeholder { color: var(--d-ink); } /* the situation chips — Farasan-sea informational tone on a light chip */ html[data-theme="day"] body.dusk .copilot .cp-chip { color: var(--d-sea-lit); background: #D8E6E7; border-color: #B9D3D5; } html[data-theme="day"] body.dusk .copilot .cp-chip:hover { background: #CADCDD; color: var(--d-sea-lit); border-color: var(--d-sea-lit); } html[data-theme="day"] body.dusk .copilot .cp-chip svg { stroke: var(--d-sea-lit); } /* the answer / grounding / draft sub-cards on paper */ html[data-theme="day"] body.dusk .copilot .cp-answer { background: var(--d-panel); border: 1px solid var(--d-line-2); } html[data-theme="day"] body.dusk .copilot .cp-answer .cp-a-text, html[data-theme="day"] body.dusk .copilot .cp-draft .cp-day { color: var(--d-cream); } html[data-theme="day"] body.dusk .copilot .cp-draft { background: var(--d-bg2); border: 1px solid var(--d-line-3); } html[data-theme="day"] body.dusk .copilot .cp-draft .cp-line { color: var(--d-tan); } /* ============================================================================ 2k-bis) THE OPERATOR HERO ("The Dawn") — greeting + reassure band on light. ============================================================================ */ /* the hero scrim — in Dusk it is a DARK wash to lift the cream headline off the ridge; on paper the headline is ink/copper, so flip it to a soft WARM PAPER wash (just enough to settle the ridge behind the text, never a dark wedge). */ html[data-theme="day"] body.dusk .j-hero .hero-scrim { background: linear-gradient(90deg, rgba(243,234,219,.72) 0%, rgba(243,234,219,.34) 44%, transparent 74%), linear-gradient(0deg, rgba(243,234,219,.46) 0%, transparent 48%); } html[data-theme="day"][dir="rtl"] body.dusk .j-hero .hero-scrim { background: linear-gradient(270deg, rgba(243,234,219,.72) 0%, rgba(243,234,219,.34) 44%, transparent 74%), linear-gradient(0deg, rgba(243,234,219,.46) 0%, transparent 48%); } html[data-theme="day"] body.dusk .j-hero .greet, html[data-theme="day"] body.dusk .j-hero .kpi-head .kt, html[data-theme="day"] body.dusk .zone-title { color: var(--d-cream); } html[data-theme="day"] body.dusk .j-hero .subline, html[data-theme="day"] body.dusk .j-hero .kpi-head .ks, html[data-theme="day"] body.dusk .zone-sub { color: var(--d-tan); } /* the warm copper→saffron gradient headline keeps its gradient (it is copper text on paper, reads well) but darken the stops a touch so it clears on light */ html[data-theme="day"] body.dusk .j-hero .greet .warm { background: linear-gradient(96deg, var(--d-star-lit) 0%, var(--d-copper-press) 50%, var(--d-copper-lit) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 1px 14px rgba(184,115,51,.12); } /* the reassure (money + safety) band — warm Asir-green paper */ html[data-theme="day"] body.dusk .reassure { background: radial-gradient(120% 140% at 0% 0%, rgba(111,130,96,.12), transparent 60%), linear-gradient(180deg, #F2EFE2, #ECE6D6); border: 1px solid rgba(111,130,96,.34); box-shadow: var(--d-shadow); } html[data-theme="day"] body.dusk .reassure .ra-shield { color: var(--d-green-lit); background: rgba(111,130,96,.14); border: 1px solid rgba(111,130,96,.4); } html[data-theme="day"] body.dusk .reassure .ra-shield svg { stroke: var(--d-green-lit); } html[data-theme="day"] body.dusk .reassure .ra-item .v { color: var(--d-cream); } html[data-theme="day"] body.dusk .reassure .ra-item .v.money { color: var(--d-copper-press); } html[data-theme="day"] body.dusk .reassure .ra-item .l { color: var(--d-tan); } html[data-theme="day"] body.dusk .reassure .ra-ok { color: var(--d-green-lit); background: rgba(111,130,96,.14); border: 1px solid rgba(111,130,96,.4); } html[data-theme="day"] body.dusk .reassure .ra-ok svg { stroke: var(--d-green-lit); } /* the facegroup avatar ring sits on paper now */ html[data-theme="day"] body.dusk .facegroup .av, html[data-theme="day"] body.dusk .facegroup .more { border-color: var(--d-panel); } html[data-theme="day"] body.dusk .facegroup .more { color: var(--d-cream); background: var(--d-line-2); } /* ============================================================================ 2l) THE SEA→PEAKS RIDGE + ✦ — copper-on-sand on light. The ridge fill gradient + the star fill are drawn inline (saffron/oud darks); soften the placement opacity so they read as a quiet copper horizon on paper. ============================================================================ */ html[data-theme="day"] body.dusk .j-ridge { opacity: .45; } html[data-theme="day"] body.dusk .j-ridge-foot { opacity: .7; } /* A1 (2026-07-02) — the footer silhouette FILL is a DARK dune gradient (authored for Dusk, #2C2014→#160F09); on the warm paper page it composites to a muddy taupe band. A CSS ``fill`` beats the inline ``fill="url(#…)"`` presentation attribute, so re-tint ONLY the silhouette fill path (the ridge STROKE line is fill="none", the star is a solid hex — both keep their own colour) to a warm DUNE sand under day-theme, in BOTH footer sources (the shared journeyRidge('foot') here + the /site #sitef re-tinted in operator_site.html). The copper ridge stroke still carries the eye out. */ html[data-theme="day"] body.dusk .j-ridge-foot svg path[fill^="url"] { fill: #E3CBA0; } /* the footer TAGLINE "The Peaks of Journeys" used --d-tan-warm (#C4A882, a light camel) → ≈1.9:1 on the paper page (invisible). Lift it off the ground to --d-tan (AA) in day; the SANAM lat/ar wordmark tokens already flip AA via the token layer. */ html[data-theme="day"] body.dusk .foot-wm .tag { color: var(--d-tan); } html[data-theme="day"] body.dusk .foot-wm .wm .lat { color: var(--d-cream); } html[data-theme="day"] body.dusk .foot-wm .wm .ar { color: var(--d-copper-lit); } html[data-theme="day"] body.dusk .nstar svg, html[data-theme="day"] body.dusk svg.nstar { filter: drop-shadow(0 0 5px rgba(176,121,8,.4)); } /* the .scrim wash is for cream-text-over-art; on light, soften it so it doesn't muddy the paper (text below the art is ink, not cream) */ html[data-theme="day"] body.dusk .scrim::after { background: linear-gradient(180deg, transparent 42%, rgba(243,234,219,.34) 72%, rgba(243,234,219,.6) 100%); } html[data-theme="day"] body.dusk .j-art::after { background: linear-gradient(180deg, transparent 44%, rgba(243,234,219,.30) 74%, rgba(184,115,51,.12) 100%); } /* ============================================================================ 2l-bis) OPERATOR misc surfaces with hard-coded dark hex (week strip, portal). ============================================================================ */ /* the Next-7 collapsed SUMMARY row + the per-day week rows (were #2B2017 dark) */ html[data-theme="day"] body.dusk .week-summary, html[data-theme="day"] body.dusk .week-row { background: var(--d-panel); border-color: var(--d-line); color: var(--d-cream); } html[data-theme="day"] body.dusk .week-summary:hover, html[data-theme="day"] body.dusk .week-row:hover { border-color: var(--d-copper); background: var(--d-bg2); } html[data-theme="day"] body.dusk .week-row.selected { border-color: var(--d-copper); background: #F0E2CC; } html[data-theme="day"] body.dusk .week-summary .ws-ico { background: #F0DEC0; } html[data-theme="day"] body.dusk .week-summary .ws-ico svg { stroke: var(--d-copper-press); } html[data-theme="day"] body.dusk .week-summary .ws-head { color: var(--d-cream); } html[data-theme="day"] body.dusk .week-summary .ws-sub { color: var(--d-tan); } html[data-theme="day"] body.dusk .week-summary .ws-go svg { stroke: var(--d-copper-press); } html[data-theme="day"] body.dusk .week-row .wd .m { color: var(--d-ink); } /* the moments / portal art kicker stay copper text on the (now light) card */ html[data-theme="day"] body.dusk .moments .m-by, html[data-theme="day"] body.dusk .foot-intro p { color: var(--d-tan); } html[data-theme="day"] body.dusk .moments .m-quote { color: var(--d-cream); } /* ============================================================================ 2m) COCKPIT BI (sanam_cockpit.css) — tables/bars on paper. ============================================================================ */ /* the cockpit page-head hero band — warm sand dawn (was the dark oud gradient) */ html[data-theme="day"] body.dusk.sanam-cockpit .page-head { background: radial-gradient(1100px 420px at 16% -16%, rgba(184,115,51,.14), transparent 60%), radial-gradient(800px 340px at 92% -6%, rgba(176,121,8,.08), transparent 55%), linear-gradient(180deg, #F7ECD9, #F2E6D2); border-bottom: 1px solid var(--d-line); } /* the GMV split bar track + the period (month) control on paper */ html[data-theme="day"] body.dusk.mt-console .split-bar { background: var(--d-bg2); box-shadow: inset 0 0 0 1px var(--d-line); } /* the sticky "Period" FILTER STRIP — was a dark oud gradient (rgba(48,35,23,.92)) that stayed dark-on-paper in day. Repaint it as a warm raised paper panel so it matches the rest of the light console; the label ink (--d-ink) + copper icon read AA on it. */ html[data-theme="day"] body.dusk.mt-console .ctrl-bar { background: linear-gradient(180deg, var(--d-panel), var(--d-card-3)); border: 1px solid var(--d-line-2); box-shadow: var(--d-shadow); } html[data-theme="day"] body.dusk.mt-console .ctrl-bar .ctrl-lbl { color: var(--d-cream); } html[data-theme="day"] body.dusk.mt-console .ctrl-bar .ctrl-lbl svg { stroke: var(--d-copper-press); } html[data-theme="day"] body.dusk.mt-console .ctrl-bar input[type="month"] { background: #FFFDF8; border-color: var(--d-line-2); color: var(--d-cream); } /* the BI data-viz: bars + tables on paper */ html[data-theme="day"] body.dusk.sanam-cockpit .mt-bar-track { background: var(--d-bg2); box-shadow: inset 0 0 0 1px var(--d-line); } html[data-theme="day"] body.dusk.sanam-cockpit .mt-table { border: 1px solid var(--d-line-2); background: var(--d-panel); box-shadow: var(--d-shadow); } html[data-theme="day"] body.dusk.sanam-cockpit .mt-th { background: var(--d-bg2); color: var(--d-ink); } /* the AI portfolio-narrative panel — warm paper card with the dawn glow */ html[data-theme="day"] body.dusk.sanam-cockpit .ai-narrative, html[data-theme="day"] body.dusk.mt-console .ai-narrative { background: radial-gradient(120% 80% at 100% 0%, rgba(176,121,8,.10), transparent 55%), radial-gradient(90% 60% at 0% 100%, rgba(62,111,116,.07), transparent 60%), linear-gradient(180deg, #FBF6EC, #F4E9D6); border: 1px solid var(--d-line-2); box-shadow: var(--d-shadow-2), inset 0 1px 0 rgba(255,255,255,.6); } html[data-theme="day"] body.dusk.sanam-cockpit .ai-narrative .ai-spark { background: #F0DEC0; } /* ============================================================================ 2n) MINISTRY CONSOLE (mt_console.css) — tables, gap chips, panels on paper. ============================================================================ */ /* the MT console page-head hero band — warm sand dawn (was dark oud) */ html[data-theme="day"] body.dusk.mt-console .page-head { background: radial-gradient(1100px 420px at 16% -16%, rgba(184,115,51,.14), transparent 60%), radial-gradient(800px 340px at 92% -6%, rgba(176,121,8,.08), transparent 55%), linear-gradient(180deg, #F7ECD9, #F2E6D2); border-bottom: 1px solid var(--d-line); } html[data-theme="day"] body.dusk.mt-console .mt-bars-card, html[data-theme="day"] body.dusk.mt-console .mt-panel { background: linear-gradient(180deg, var(--d-panel), var(--d-card-3)); } /* the data tables + the demand×supply gap grid on paper */ html[data-theme="day"] body.dusk.mt-console .mt-table, html[data-theme="day"] body.dusk.mt-console .gap-wrap { background: var(--d-panel); border: 1px solid var(--d-line-2); box-shadow: var(--d-shadow); } html[data-theme="day"] body.dusk.mt-console .mt-th, html[data-theme="day"] body.dusk.mt-console .gap-grid thead th { background: var(--d-bg2); color: var(--d-ink); } html[data-theme="day"] body.dusk.mt-console .mt-tr.clickable:hover { background: var(--d-bg2); } html[data-theme="day"] body.dusk.mt-console .mt-tr.row-exception { background: #F6E7C2; border-inline-start: 4px solid var(--d-saff); } html[data-theme="day"] body.dusk.mt-console .mt-bar-track { background: var(--d-bg2); box-shadow: inset 0 0 0 1px var(--d-line); } /* the gap-status chips — AA-on-light grounds */ html[data-theme="day"] body.dusk.mt-console .gap-underserved { background: #F0DCCB; color: #7A3E1C; border-color: #D9B79A; } html[data-theme="day"] body.dusk.mt-console .gap-balanced { background: #E3EAD7; color: var(--d-green-lit); border-color: #CBD6BC; } html[data-theme="day"] body.dusk.mt-console .gap-oversupplied { background: #D8E6E7; color: var(--d-sea-lit); border-color: #B9D3D5; } html[data-theme="day"] body.dusk.mt-console .gap-dormant { background: var(--d-bg2); color: var(--d-ink); border: 1px dashed var(--d-line-2); } html[data-theme="day"] body.dusk.mt-console .ai-narrative .ai-spark { background: #F0DEC0; } html[data-theme="day"] body.dusk.mt-console .mt-grounding { background: #D8E6E7; border: 1px solid #B9D3D5; color: var(--d-sea-lit); } html[data-theme="day"] body.dusk.mt-console .data-scope-chip { background: linear-gradient(180deg, #FBF6EC, #F4E9D6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: var(--d-tan); border: 1px solid var(--d-line-2); } /* the footnotes: the sea-tinted knowledge note + the scope boundary note */ html[data-theme="day"] body.dusk.mt-console .k-note { background: #D8E6E7; border-color: #B9D3D5; color: var(--d-sea-lit); } html[data-theme="day"] body.dusk.mt-console .k-note svg { stroke: var(--d-sea-lit); } html[data-theme="day"] body.dusk.mt-console .boundary-note { background: var(--d-bg2); border-color: var(--d-line-2); color: var(--d-tan); } html[data-theme="day"] body.dusk.mt-console .boundary-note svg { stroke: var(--d-copper-press); } html[data-theme="day"] body.dusk.mt-console .boundary-note b { color: var(--d-cream); } /* the "Strongest supply gaps — where to act" callout rows — each .ur was a dark band (#2E2117) that stayed dark-on-paper in day. Repaint as a warm sand alert ground (same family as the .gap-underserved chip) with the saffron action edge kept; the bold label (--d-cream→ink) + the muted line (--d-ink) read AA, and the value uses the AA saffron TEXT token (--d-star-lit) instead of the vivid fill saffron. */ html[data-theme="day"] body.dusk.mt-console .underserved-rail .ur { background: #F0DCCB; border-color: #D9B79A; border-inline-start: 4px solid var(--d-saff); } html[data-theme="day"] body.dusk.mt-console .underserved-rail .ur svg { stroke: var(--d-star-lit); } html[data-theme="day"] body.dusk.mt-console .underserved-rail .ur .ub b { color: var(--d-cream); } html[data-theme="day"] body.dusk.mt-console .underserved-rail .ur .ub .um { color: var(--d-ink); } html[data-theme="day"] body.dusk.mt-console .underserved-rail .ur .uv { color: var(--d-star-lit); } /* ============================================================================ 2o) RESELLER surfaces (reseller_builder.css + reseller_bookings.css). These sheets are NOT scoped under body.dusk — they use bare class selectors, so their dark surfaces apply in BOTH themes. Override the dark ones for day. ============================================================================ */ /* the reseller-builder working surfaces (bare selectors; dark hex -> paper) */ html[data-theme="day"] .rb-search, html[data-theme="day"] .rb-paxchip, html[data-theme="day"] .rb-line .qty, html[data-theme="day"] .rb-qcard .curtoggle, html[data-theme="day"] .rb-mkrow { background: var(--d-panel); border-color: var(--d-line-2); } html[data-theme="day"] .rb-line { background: var(--d-card-3); border-color: var(--d-line-2); } /* Sanam Sketch (v2): day overrides for the brief-chips + the "what I did" ledger (the 2 dark-ground classes the coverage guard flagged) */ html[data-theme="day"] .nl-chip { background: var(--d-panel); border-color: var(--d-line-2); } /* the "what I did" AI panel ledger (SCOPED to #nl-actions in reseller_builder.css, so the day remap matches that specificity) + the docked money ledger both remap here. */ html[data-theme="day"] #nl-actions .rb-ledger, html[data-theme="day"] .rb-ledger { background: var(--d-card-3); border-color: var(--d-line-2); } /* Full-trip front door (the full-DMC engine, second AI door): day overrides for its form fields + action panel + budget verdict (the dark-ground classes). */ html[data-theme="day"] .ft-fld input, html[data-theme="day"] .ft-fld select, html[data-theme="day"] .ft-actions { background: #FBF6EC; border-color: var(--d-line-2); color: var(--d-cream); } html[data-theme="day"] .ft-budget.ft-within { background: #E7EBE0; border-color: #CBD6BC; color: var(--d-green-lit); } html[data-theme="day"] .ft-budget.ft-over { background: #F6E3CC; border-color: #E0C49E; color: var(--d-loss); } html[data-theme="day"] .ft-leg.rb-line-hotel { background: #E7EBE0; border-color: #CBD6BC; } html[data-theme="day"] .ft-leg.rb-line-flight { background: #DEEAEB; border-color: #BCD2D0; } html[data-theme="day"] .rb-drop, html[data-theme="day"] .rb-transport-note, html[data-theme="day"] .rb-stopnote, html[data-theme="day"] .rb-nl textarea, html[data-theme="day"] #nl-brief, html[data-theme="day"] .wh-occ, html[data-theme="day"] .wh-fld input, html[data-theme="day"] .wh-fld select, html[data-theme="day"] .wh-offer { background: #FBF6EC; border-color: var(--d-line-2); color: var(--d-cream); } html[data-theme="day"] .wh-occ-fld input, html[data-theme="day"] .wh-childchip { background: #FFFDF8; border-color: var(--d-line-2); color: var(--d-cream); } html[data-theme="day"] .rb-cprice { background: linear-gradient(135deg, #FCF8F0, #F4E9D6); border-color: var(--d-line-2); } html[data-theme="day"] .rb-netchip, html[data-theme="day"] .wh-netchip { background: #F6E7C2; color: var(--d-star-lit); } html[data-theme="day"] .rb-vbadge { background: #D8E6E7; color: var(--d-sea-lit); } html[data-theme="day"] .rb-mkrow .stp button { background: var(--d-bg2); border-color: var(--d-line-2); color: var(--d-copper-press); } html[data-theme="day"] .rb-mkrow .stp button:hover { border-color: var(--d-copper); background: #F0E2CC; } html[data-theme="day"] .rb-cprice .mg .mp, html[data-theme="day"] .wh-clientchip { background: #E3EAD7; color: var(--d-green-lit); } html[data-theme="day"] .rb-won { background: #E7EBE0; border-color: #CBD6BC; color: var(--d-green-lit); } html[data-theme="day"] .wh-rangeerr, html[data-theme="day"] .wh-cancel.is-strict { background: #F6E3CC; border-color: #E0C49E; color: var(--d-loss); } html[data-theme="day"] .wh-room { background: #FCF8F0; border-color: var(--d-line); } /* primary affordances keep copper with light ink in both modes */ html[data-theme="day"] .rb-fl.on, html[data-theme="day"] .rb-qcard .curtoggle button.on { background: var(--d-copper); color: #FBF6EC; } /* the pax stepper group + its input/buttons */ html[data-theme="day"] .rb-paxstep { background: var(--d-panel); border-color: var(--d-line-2); } html[data-theme="day"] .rb-paxstep button { background: var(--d-bg2); border-color: var(--d-line-2); color: var(--d-copper-press); } html[data-theme="day"] .rb-paxstep button:hover { border-color: var(--d-copper); background: #F0E2CC; } html[data-theme="day"] .rb-paxstep input { background: #FFFDF8; border-color: var(--d-line-2); color: var(--d-cream); } html[data-theme="day"] .rb-line .rm:hover, html[data-theme="day"] .wh-room-rm:hover { background: #F0DCCB; } html[data-theme="day"] .rb-line-hotel { background: #E7EBE0; border-color: #CBD6BC; } html[data-theme="day"] .rb-line-flight { background: #DEEAEB; border-color: #BCD2D0; } html[data-theme="day"] .rb-cvchip { background: rgba(122,75,46,.10); color: var(--d-copper-press); } html[data-theme="day"] .rb-won-sec { border-top: 1px solid #CBD6BC; } html[data-theme="day"] .rb-pax-row.is-incomplete { background: #F6E3CC; } html[data-theme="day"] .rb-acc-head:hover { background: var(--d-bg2); } html[data-theme="day"] .rb-pending-ico { background: #F0DEC0; } html[data-theme="day"] .rbk-bkrow-btn:hover { background: var(--d-bg2); } html[data-theme="day"] .rbk-kind, html[data-theme="day"] .rbk-kind.sw-exp, html[data-theme="day"] .rbk-kind.sw-hotel, html[data-theme="day"] .rbk-kind.sw-flight { background: var(--d-bg2); } html[data-theme="day"] .rbk-money-row.is-client, html[data-theme="day"] .rbk-refund-row.is-refund, html[data-theme="day"] .rbk-credit-num.is-avail { background: #E7EBE0; border-color: #CBD6BC; } html[data-theme="day"] .rbk-polbox.is-strict, html[data-theme="day"] .rbk-credit-near { background: #F6E3CC; border-color: #E0C49E; } html[data-theme="day"] .rbk-credit-num.is-incredit { background: #D8E6E7; border-color: #B9D3D5; } html[data-theme="day"] .rbk-stmt-foot { background: var(--d-bg2); } html[data-theme="day"] .rbk-refund-row.is-refund { border-color: #CBD6BC; } /* FIX-5 (reseller P1-1/P1-2): the EXPANDED booking-detail subtree + the base credit chip/bar drifted out of sync — they carried raw dark hex with NO day counterpart, so day mode rendered a black block on the cream page (and the "Limit" chip was dark-on-dark, a WCAG fail). Add the missing day grounds for the FULL detail subtree + the base credit row/bar (the *.is-* siblings above already had theirs). Paper grounds + tokenized text read AA. */ html[data-theme="day"] .rbk-detail { background: var(--d-bg); } html[data-theme="day"] .rbk-confbox, html[data-theme="day"] .rbk-polbox, html[data-theme="day"] .rbk-voucher, html[data-theme="day"] .rbk-confirm-card, html[data-theme="day"] .rbk-stmt-row, html[data-theme="day"] .rbk-credit-num { background: var(--d-panel); border-color: var(--d-line-2); } html[data-theme="day"] .rbk-voucher-code, html[data-theme="day"] .rbk-voucher-card, html[data-theme="day"] .rbk-reason input, html[data-theme="day"] .rbk-fld input { background: #FBF6EC; border-color: var(--d-line-2); color: var(--d-cream); } html[data-theme="day"] .rbk-voucher-code { color: var(--d-star-lit); } html[data-theme="day"] .rbk-credit-bar { background: var(--d-bg2); border-color: var(--d-line); } /* the loss/penalty AMBER surfaces (raw #2A1608 dark amber): keep amber, but the light-paper amber so they read on the cream ground (not a dark block). */ html[data-theme="day"] .rbk-penalty-warn, html[data-theme="day"] .rbk-refund-row.is-penalty { background: #F6E3CC; border-color: #E0C49E; } /* the bookings FILTER chips (base dark ground; the .on copper state is fine). */ html[data-theme="day"] .rbk-filter { background: var(--d-panel); border-color: var(--d-line-2); } /* ---- the STRAGGLER sweep (reseller P2-2): the builder flight / pax-detail / rooming / wholesale-bookings surfaces carried raw dark hex with no day counterpart. One holistic sweep so day mode has NO dark-on-light anywhere on the reseller surface. Grouped by paper ground; the text tokens (--d-cream / --d-tan / --d-green / --d-loss / --d-saff / --d-sea) already flip for AA. */ /* neutral panels / containers (the #20-#29 dark grounds) -> paper panel. */ html[data-theme="day"] .rb-whbookings, html[data-theme="day"] .rb-rooming, html[data-theme="day"] .rb-rooming-cta, html[data-theme="day"] .rb-pax, html[data-theme="day"] .rb-pending-detail, html[data-theme="day"] .fl-offer, html[data-theme="day"] .fl-triptype, html[data-theme="day"] .fl-trip, html[data-theme="day"] .fl-cabin-chip, html[data-theme="day"] .rb-cv-confirm-total { background: var(--d-panel); border-color: var(--d-line-2); } /* text inputs (the deep #1E140C / #231910 fields) -> light field ground. */ html[data-theme="day"] .rb-rooming-lead input, html[data-theme="day"] .rb-guest-name, html[data-theme="day"] .rb-guest-band, html[data-theme="day"] .rb-pax-name, html[data-theme="day"] .rb-pax-dob, html[data-theme="day"] .fl-fld input, html[data-theme="day"] .fl-fld select { background: #FBF6EC; border-color: var(--d-line-2); color: var(--d-cream); } /* AMBER loss/penalty/guard surfaces -> light-paper amber (keep the warning hue). */ html[data-theme="day"] .rb-floor-amber, html[data-theme="day"] .rb-won-partial, html[data-theme="day"] .rb-conv-status.is-partial, html[data-theme="day"] .rb-pax-multiwarn, html[data-theme="day"] .rb-pax-guard, html[data-theme="day"] .fl-rangeerr, html[data-theme="day"] .fl-cancel.is-strict { background: #F6E3CC; border-color: #E0C49E; } /* GREEN positive/won surfaces -> light-paper green. */ html[data-theme="day"] .rb-conv-status.is-full, html[data-theme="day"] .rb-acc-count { background: #E7EBE0; border-color: #CBD6BC; } /* SEA info chip -> light-paper sea. */ html[data-theme="day"] .fl-seg-dir { background: #D8E6E7; } /* SAFFRON default badge -> light-paper saffron. */ html[data-theme="day"] .rb-mk-default { background: #F0DEC0; } /* ============================================================================ 2o-bis) RESELLER — PHASE E "Beautification + hierarchy" day overrides. The Phase-E surfaces mostly use --d-* token grounds (auto-remapped), so only the raw dark grounds need an explicit day counterpart. The MARGIN HERO grounds a dark green gradient (#2C3326) — flip it to a warm light Asir-green paper niche so the reseller's hero figure reads AA on the cream ground (still green, the brand's "on-track/healthy" tone). The token-grounded Phase-E surfaces (margin-hero supporting figures, markup presets, demoted add-pills, the qci price strip, the Sketch drafting line, zone separators) flip for free. ============================================================================ */ html[data-theme="day"] .rb-margin-hero { background: radial-gradient(120% 120% at 100% 0%, rgba(111,130,96,.16), transparent 60%), linear-gradient(135deg, #E7EBE0, #DCE4D3); border-color: #CBD6BC; } html[data-theme="day"] .rb-mh-pct { background: rgba(111,130,96,.18); } /* the markup PRESET chips + the qci price strip + the drafting line are on token grounds, but pin the .on/active states so the AA chip colours stay crisp. */ html[data-theme="day"] .rb-mk-preset.on { background: var(--d-copper); color: #FBF6EC; } html[data-theme="day"] .rb-mk-custom.on { background: var(--d-saff); color: #1A130D; } /* ============================================================================ 2o-ter) RESELLER — new ledger/shelf/convert surfaces (reseller-UI pass). The reseller_builder.css persona sheet is frozen for this pass, so these NEW classes get their coherent styling here — authored on --d-* TOKENS + rgba washes ONLY (the "tokens only, day-theme safe" idiom: --d-* remap to warm paper in day and to the dark ground in dusk, so a single bare rule reads correctly in BOTH themes and never grounds dark-on-cream). Warm-copper washes read as a gentle warning; token greens/tans as quiet info; the sub-floor note as muted/disabled. ============================================================================ */ /* the docked-ledger AGENCY-CREDIT line — a quiet info panel above the exits. */ .rb-credit { margin-top: 10px; padding: 10px 12px; border-radius: 11px; background: var(--d-panel); border: 1px solid var(--d-line-2); display: flex; flex-direction: column; gap: 6px; font-size: .8rem; line-height: 1.45; color: var(--d-tan); } .rb-credit svg { width: 14px; height: 14px; flex: none; margin-top: 1px; stroke: var(--d-tan); } .rb-credit-head { display: flex; align-items: center; gap: 6px; color: var(--d-cream); } .rb-credit-head b { font-weight: 700; } .rb-credit-fig { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; } .rb-credit-fig b { color: var(--d-cream); font-weight: 700; } /* per-booking (no credit line): a single quiet info row. */ .rb-credit-perbook { flex-direction: row; align-items: flex-start; gap: 7px; color: var(--d-ink); } /* within-limit -> quiet asir-green confirm. */ .rb-credit-ok { display: flex; align-items: flex-start; gap: 7px; color: var(--d-green-lit); } .rb-credit-ok svg { stroke: var(--d-green); } /* over the limit -> a gentle warm-copper warning (not alarmist red). */ .rb-credit-over { display: flex; align-items: flex-start; gap: 7px; padding: 8px 10px; border-radius: 9px; background: rgba(154,83,38,.10); border: 1px solid rgba(154,83,38,.30); color: var(--d-loss); } .rb-credit-over svg { stroke: var(--d-loss); } /* shelf SUB-FLOOR card — no headroom at net -> muted, non-actionable (no lift/glow). */ .rb-supply.is-subfloor { opacity: .72; } .rb-supply.is-subfloor:hover { transform: none; box-shadow: var(--d-shadow); border-color: var(--d-line); } /* the honest "no headroom — not sellable" note that replaces the Add cluster. */ .rb-subfloor-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 8px; padding: 8px 10px; border-radius: 9px; background: var(--d-bg2); border: 1px dashed var(--d-line-2); font-size: .74rem; line-height: 1.4; color: var(--d-ink); } .rb-subfloor-note svg { width: 14px; height: 14px; flex: none; margin-top: 1px; stroke: var(--d-tan); } /* convert-confirm OVER-limit alert — the same gentle warm-copper warning tint, layered on the .rb-cv-confirm-onacct base (which already sets the row/icon layout). */ .rb-cv-confirm-over { padding: 8px 10px; border-radius: 9px; background: rgba(154,83,38,.10); border: 1px solid rgba(154,83,38,.30); color: var(--d-loss); } .rb-cv-confirm-over svg { stroke: var(--d-loss); } /* the full-trip AI door, now FOLDED into the one nl compose bar — separate the folded accordion from the compose content above it. */ .rb-nl .rb-acc-ft { margin-top: 12px; border-radius: 12px; } /* ============================================================================ 2q) OPERATOR DISTRIBUTION surface (operator_dusk.css .dist-* — scoped under body.dusk). FIX-5 (new-operator P1-2): the "Channel vs direct" reconciliation table + the "Your listings" distribution rows had NO day override and fell through to dark-on-light. Mirror the dusk rules with paper tokens. ============================================================================ */ html[data-theme="day"] body.dusk .dist-row { background: linear-gradient(180deg, var(--d-card-2), var(--d-card-3)); border-color: var(--d-line-2); box-shadow: var(--d-shadow); } html[data-theme="day"] body.dusk .dist-confirm { background: var(--d-card-2); } html[data-theme="day"] body.dusk .dist-recon-table { background: var(--d-panel); border-color: var(--d-line-2); } html[data-theme="day"] body.dusk .dist-recon-table .mt-th { background: var(--d-bg2); } html[data-theme="day"] body.dusk .dist-total { background: var(--d-bg2); } /* FINAL-FIX P1 — the not-ready REASONS list (was raw #3B2E14), the HONEST amber below-floor block (was #3A2418 with --d-loss ink → fine in dusk, illegible on the raw dark ground in day), and the success push result (was #2C3326). Re-ground on warm paper; the saffron/loss/green INK tokens already flipped AA via the token layer, so only the ground needs swapping. */ html[data-theme="day"] body.dusk .dist-reasons { background: #F6EBD4; border-color: var(--d-line-2); } html[data-theme="day"] body.dusk .floor-block { background: #F7E9DA; border-color: var(--d-line-2); } html[data-theme="day"] body.dusk .dist-ok { background: #E7EBE0; border-color: var(--d-line-2); } /* ============================================================================ 2q-ter) THE CHANNEL BOARD (operator_dusk.css .channel-board / .cb-* — scoped under body.dusk). The board + cards are TOKEN-grounded, so they flip for free; pin the grounds here for deliberate day coverage, and lift the state-chip tints to the DAY accent RGBs (Asir-green #6F8260, Saffron #B07908) so the chips read crisp on the warm paper ground. SIM/loss stay amber — never red, never a fake green REAL for the GetYourGuide (SIM) column. ============================================================================ */ html[data-theme="day"] body.dusk .channel-board { background: var(--d-panel); border-color: var(--d-line-2); box-shadow: var(--d-shadow); } html[data-theme="day"] body.dusk .cb-headrow { background: var(--d-bg2); border-bottom-color: var(--d-line-2); } html[data-theme="day"] body.dusk .cb-live { background: rgba(111,130,96,.16); border-color: rgba(111,130,96,.36); } html[data-theme="day"] body.dusk .cb-available, html[data-theme="day"] body.dusk .cb-paused, html[data-theme="day"] body.dusk .cb-chip-sim { background: rgba(176,121,8,.14); border-color: rgba(176,121,8,.34); } html[data-theme="day"] body.dusk .cb-setup, html[data-theme="day"] body.dusk .cb-muted { background: rgba(110,91,69,.07); border-color: var(--d-line-2); } /* the mobile stacked-card + header grounds are token-based (--d-card / --d-bg2) so they flip for free via the token layer — no explicit day override needed. */ /* ============================================================================ 2q-bis) OPERATOR HOME v2 — "The Dawn" command surfaces (operator_dusk.css, scoped under body.dusk). FINAL-FIX day-theme lane (P0): the home v2 spine — the "Needs you now" list, the one contextual CTA, today's guests, the money strip cells, and the persistent Ask-Sanam bar — all ground DARK rgba/hex gradients with NO day override, so they rendered as dark slabs on the cream paper (illegible / WCAG fail). Re-paint each as a warm matte paper niche; the ink/accent tokens (--d-cream / --d-tan / --d-saff / --d-green-lit …) already flipped AA via the token layer, so only the GROUND is swapped here. ============================================================================ */ /* §1 — "Needs you now": the ranked action list (was a near-black gradient). */ html[data-theme="day"] body.dusk .needs-now { background: linear-gradient(180deg, var(--d-card), var(--d-card-3)); border-color: var(--d-line-2); box-shadow: var(--d-shadow-2); } html[data-theme="day"] body.dusk .nn-row { border-bottom-color: var(--d-line); } html[data-theme="day"] body.dusk .nn-opener { background: rgba(176,121,8,.10); border-color: rgba(176,121,8,.26); } /* §2 — the ONE contextual CTA (was a copper→near-black gradient). */ html[data-theme="day"] body.dusk .ctx-cta { background: linear-gradient(135deg, rgba(184,115,51,.14), var(--d-card-2)); border-color: var(--d-line-2); box-shadow: var(--d-shadow-2); } /* §3 — today's guests row + its icon tile (was #3D2C1C on a dark gradient). */ html[data-theme="day"] body.dusk .today-guests { background: linear-gradient(180deg, var(--d-card), var(--d-card-3)); border-color: var(--d-line-2); } html[data-theme="day"] body.dusk .today-guests .tg-ico { background: #EFE0C8; } /* §4 — the money strip cells (was #3D2C1C on a dark gradient). */ html[data-theme="day"] body.dusk .ms-cell { background: linear-gradient(180deg, var(--d-card), var(--d-card-3)); border-color: var(--d-line-2); } html[data-theme="day"] body.dusk .ws-ico, html[data-theme="day"] body.dusk .rb-ico { background: #EFE0C8; } /* §5 — the persistent Ask-Sanam bar (was a copper-glow over a near-black slab). */ html[data-theme="day"] body.dusk .ask-bar { background: radial-gradient(120% 80% at 100% 0%, rgba(200,133,10,.10), transparent 55%), linear-gradient(180deg, var(--d-card), var(--d-card-3)); border-color: rgba(184,115,51,.30); box-shadow: var(--d-shadow-2); } /* A11Y BLOCKER (P0): the co-pilot ASK input hard-codes background:#1F1710, so in day mode the dark-ink (--d-cream now charcoal) typed text sat on a near-black field — invisible. Mirror the .copilot .cp-ask input day fix (light paper field). */ html[data-theme="day"] body.dusk .ask-bar #cp-input { background: #FFFDF8; } /* A1 (2026-07-02): the new base ``.ask-bar .cp-chip`` surface (added Dusk-side) grounds #2B2017 — give it its day counterpart so the chips read as warm paper (not a dark slab) in LIGHT. The action-chip star text uses the AA copper-press on paper. */ html[data-theme="day"] body.dusk .ask-bar .cp-chip { background: var(--d-panel); border-color: var(--d-line-2); color: var(--d-tan); } html[data-theme="day"] body.dusk .ask-bar .cp-chip:hover { background: var(--d-bg2); border-color: var(--d-copper); color: var(--d-cream); } html[data-theme="day"] body.dusk .ask-bar .cp-chip svg { stroke: var(--d-copper-press); } html[data-theme="day"] body.dusk .ask-bar-hero .cp-chip-action { border-color: var(--d-copper); color: var(--d-copper-press); } html[data-theme="day"] body.dusk .ask-bar-hero .cp-chip-action svg { stroke: var(--d-copper-press); } /* A1 (2026-07-02) — the "Rental" listing-card badge (supplier_portal.js, INLINE style ``color:var(--d-copper)`` on an rgba(.16) copper wash). In LIGHT that is copper #B87333 on the pale wash ≈ 2.65:1 (AA fail) and it paints on every caravan card (the first supplier's main screen). The inline color beats a plain rule, so this day override carries !important and swaps to --d-copper-press (#8A4F22 ≈ 5.2:1) + a touch more wash for separation. Dusk is untouched (copper reads on the dark card). */ html[data-theme="day"] body.dusk .opl-badge { color: var(--d-copper-press) !important; background: rgba(184,115,51,.14) !important; box-shadow: inset 0 0 0 1px rgba(138,79,34,.42) !important; } html[data-theme="day"] body.dusk .opl-badge svg { stroke: var(--d-copper-press); } /* THE COMMAND SKETCH (P0, 2026-06-25) — day re-ground for the action-chip + the ACTION CARD dark grounds (operator_dusk.css). The day-theme guard requires a counterpart for every dark-ground class; re-tint to warm paper niches that keep the copper accents + AA contrast in the cream day theme. */ html[data-theme="day"] body.dusk .ask-bar-hero .cp-chip-action:hover { background: #F1E3CB; color: var(--d-sea-lit); border-color: var(--d-copper); } html[data-theme="day"] body.dusk .ask-bar .cp-card { background: linear-gradient(180deg, var(--d-card), var(--d-card-3)); border-color: var(--d-copper); } html[data-theme="day"] body.dusk .ask-bar .cp-card.cp-card-destructive { border-color: #B5532A; } html[data-theme="day"] body.dusk .ask-bar .cp-card-title { color: var(--d-sea-lit); } html[data-theme="day"] body.dusk .ask-bar .cp-card-preview { color: var(--d-cream); } html[data-theme="day"] body.dusk .ask-bar .cp-card-warn { background: #FBEAE0; border-color: #B5532A; color: #7A3E1C; } html[data-theme="day"] body.dusk .ask-bar .cp-card-warn svg { stroke: #B5532A; } html[data-theme="day"] body.dusk .ask-bar .cp-card-ok { color: var(--d-sea-lit); } html[data-theme="day"] body.dusk .ask-bar .cp-card-ok svg { stroke: var(--d-sea-lit); } /* the destructive Confirm button stays a deep warm-red with light text in BOTH themes (it is a danger primary, AA-safe on its own red ground) — pin the day override so the guard is satisfied and the colour is identical by intent. */ html[data-theme="day"] body.dusk .ask-bar .cp-card .cp-confirm-danger { background: #B5532A; border-color: #B5532A; color: #FFF7F0; } html[data-theme="day"] body.dusk .ask-bar .cp-card .cp-confirm-armed { background: #8F3D1E; border-color: #8F3D1E; color: #FFF7F0; } /* ============================================================================ 2q-ter) OPERATOR CALENDAR — day re-ground (operator_dusk.css, body.dusk). FINAL-FIX P2: the selected day/week states + the blocked tag carried raw dark hex (#3B2B1C / #3B2B1C) with no day override → dark-on-paper. Re-tint to a warm copper-selected paper niche; the copper border + box-shadow ring read for free. ============================================================================ */ html[data-theme="day"] body.dusk .cal-day.selected { background: #F1E3CB; border-color: var(--d-copper); box-shadow: inset 0 0 0 2px var(--d-copper); } html[data-theme="day"] body.dusk .week-row.selected { background: #F1E3CB; border-color: var(--d-copper); box-shadow: inset 0 0 0 2px var(--d-copper); } html[data-theme="day"] body.dusk .blocked-tag { color: var(--d-copper-press); background: #F1E3CB; } html[data-theme="day"] body.dusk .cal-day.today .today-tag { color: var(--d-star-lit); background: #F4E7C9; } /* ============================================================================ 2q-quater) OPERATOR shared chrome day re-grounds that fell through (guard now scans operator_dusk.css). FINAL-FIX: the calendar capacity bar, the reopen row, the chips, the mobile nav-drawer link/close, the persona chooser cards, and the aggregator (Hawi) card all ground raw dark hex with no day counterpart. ============================================================================ */ /* A1 (2026-07-02): the cap-bar track sits INSIDE the now-whiter day cell, so give it a deeper sand ground + a --d-line-3 edge (was --d-line, invisible on the white cell). */ html[data-theme="day"] body.dusk .cap-bar { background: #EFE4D2; box-shadow: inset 0 0 0 1px var(--d-line-3); } html[data-theme="day"] body.dusk .reopen-row { background: var(--d-card-2); border-color: var(--d-line); } /* Time-slot inventory (BUILD B): the per-slot day editor on the Paper-Desert day ground — a light paper field + legible ink (mirrors the .field input day fix). */ html[data-theme="day"] body.dusk .slot-row .time { color: var(--d-cream); } html[data-theme="day"] body.dusk .slot-cap { background: #FFFDF8; border-color: var(--d-line-2); color: var(--d-cream); } html[data-theme="day"] body.dusk .slot-cap:focus { border-color: var(--d-copper); } html[data-theme="day"] body.dusk .chip { background: var(--d-card-2); border-color: var(--d-line-2); color: var(--d-tan); } html[data-theme="day"] body.dusk .nav-draw-link { background: var(--d-card-2); border-color: var(--d-line-2); color: var(--d-tan); } html[data-theme="day"] body.dusk .nav-draw-link:hover { background: var(--d-card-3); border-color: var(--d-copper); color: var(--d-cream); } html[data-theme="day"] body.dusk .nav-drawer-x:hover { background: var(--d-card-3); color: var(--d-cream); } /* the concierge persona chooser — a warm paper card; the aggregator (Hawi) card stays DISTINCT via a slightly deeper copper-warm paper tint (the plan-7.4 intent). */ html[data-theme="day"] body.dusk .persona-card { background: linear-gradient(180deg, var(--d-card), var(--d-card-3)); } html[data-theme="day"] body.dusk .aggregator-card { background: linear-gradient(180deg, #F3E3C9, #EBD9BB); border-color: var(--d-line-3); } /* ============================================================================ 2q-quinquies) ADD A LISTING journey (listing_new.css) — day overrides. The sheet uses BARE class selectors with raw dark hex (#20160E / #3A2B1E) that apply in BOTH themes (it is Dusk-first), so each needs an explicit day counterpart in THIS sheet (the guard's coverage scan reads paper_desert.css). FINAL-FIX P1: the stepper pills, the itinerary step cards, the photo tiles, the OTA hold-back toggle row + its switch track all re-ground on warm paper. ============================================================================ */ html[data-theme="day"] .ln-step { background: var(--d-card-2); border-color: var(--d-line-2); color: var(--d-tan); } html[data-theme="day"] .ln-step:hover { border-color: var(--d-copper); color: var(--d-cream); } html[data-theme="day"] .ln-step .ln-step-num { background: rgba(0,0,0,.08); } html[data-theme="day"] .ln-step.on .ln-step-num { background: rgba(255,255,255,.5); } html[data-theme="day"] .ln-itin-step { background: var(--d-card-2); border-color: var(--d-line-2); } html[data-theme="day"] .ln-photo { background: var(--d-card-2); border-color: var(--d-line-2); } /* the multi-pool repeater row (bare #20160E base) re-grounds on warm paper. */ html[data-theme="day"] .ln-pool-row { background: var(--d-card-2); border-color: var(--d-line-2); } /* the empty-state dropzone's + tile (bare #20160E) re-grounds on warm paper. */ html[data-theme="day"] .ln-drop .ln-drop-tile { background: var(--d-card-2); border-color: var(--d-line-2); } html[data-theme="day"] .ln-toggle-row { background: var(--d-card-2); border-color: var(--d-line-2); } /* the cancellation-policy preset cards (Phase 1b) re-ground on warm paper (the bare listing_new.css #20160E base reads as a hole in the day skin). */ html[data-theme="day"] .ln-cancel-preset { background: var(--d-card-2); border-color: var(--d-line-2); color: var(--d-cream); } html[data-theme="day"] .ln-cancel-preset.on { background: rgba(184,115,51,.12); border-color: var(--d-copper); } html[data-theme="day"] .ln-cancel-preset .cp-sum { color: var(--d-ink-3, #6B5A47); } html[data-theme="day"] .ln-switch .ln-track { background: #DFCDB2; border-color: var(--d-line-2); } /* the drafting drop-zone faint white fleck reads as a smudge on paper — settle it. */ html[data-theme="day"] .ln-drop { background: rgba(122,75,46,.03); } /* the ASSETS capacity-pool cards — operator_dusk.css already re-grounds these on token surfaces (which flip via the token layer), but pin an explicit day rule so the coverage guard sees a counterpart for the bare listing_new.css #20160E base. */ html[data-theme="day"] body.dusk .pool-card { background: radial-gradient(120% 90% at 12% 0%, rgba(184,115,51,.08), transparent 55%), linear-gradient(180deg, var(--d-card), var(--d-card-3)); border-color: var(--d-line); box-shadow: var(--d-shadow), inset 0 1px 0 rgba(255,255,255,.5); } /* ============================================================================ 2q-sexies) RESELLER mobile sticky CTA (#rb-mobile-cta, built in reseller_builder.js and styled in reseller_builder.css with a dark glassy ground). FINAL-FIX P1: re- paint the bar a warm paper pane in day mode (we do NOT edit reseller_builder.css — this is the right seam: the day layer owns the day re-skin). The price/margin ink tokens already flipped AA via the token layer. ============================================================================ */ html[data-theme="day"] #rb-mobile-cta { background: rgba(251,246,236,.96); border-top-color: var(--d-line-2); } /* ============================================================================ 2p) LOGIN — "The Journey" sign-in front door on PAPER (POLISH 2026-06-23). public_dusk.css gives the login hero + glassy card their dusk finish; those rules hard-code dark-glass rgba grounds that don't read on the sand paper, so re-paint them warm here. The text tokens (--d-cream ink / --d-tan / --d-sea-lit) already flipped via the token layer — the headline/kicker/lead read AA for free. ============================================================================ */ /* the DAWN hero band — a warm sand dawn glow (was the dark oud radial wash) */ html[data-theme="day"] body.dusk .lg-hero { background: radial-gradient(120% 120% at 18% -20%, rgba(184,115,51,.16), transparent 60%), radial-gradient(90% 90% at 92% -10%, rgba(176,121,8,.08), transparent 55%), radial-gradient(120% 120% at 78% 4%, rgba(62,111,116,.07), transparent 62%); } /* the GLASSY card becomes a warm matte PAPER pane (glass doesn't read on light) */ html[data-theme="day"] body.dusk .lg-card { background: radial-gradient(130% 90% at 8% 0%, rgba(184,115,51,.10), transparent 58%), linear-gradient(180deg, #FCF8F0, #F4E9D6); border: 1px solid var(--d-line-2); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--d-shadow-2), inset 0 1px 0 rgba(255,255,255,.6); } /* GHOST-PANEL FIX (day mirror): the .lg-card::before notch crest is removed in public_dusk.css (it read as a duplicate card outline), so this day-theme re-paint of it is no longer needed. */ /* the public landing chrome (login + register share it): the radial oud-glow .landing ground + the translucent top bar were authored DARK in public_dusk.css (bare body.dusk), so in day they painted a dark oud slab behind the cream funnel. Re-paint as the warm sand dawn ground + a paper top bar. */ html[data-theme="day"] body.dusk .landing { background: radial-gradient(1100px 460px at 12% -12%, rgba(184,115,51,.16), transparent 60%), radial-gradient(820px 360px at 92% -8%, rgba(176,121,8,.08), transparent 55%), linear-gradient(180deg, #F7ECD9, var(--d-bg)); } html[data-theme="day"] body.dusk .landing-top { background: rgba(251,246,236,.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--d-line); } html[data-theme="day"] body.dusk .landing-top .nav-portal-switch { color: var(--d-tan); border-color: var(--d-line-2); } html[data-theme="day"] body.dusk .landing-top .nav-portal-switch:hover { color: var(--d-cream); border-color: var(--d-copper); background: var(--d-bg2); } /* ============================================================================ 2p-bis) REGISTER — "Register your business" funnel on PAPER (FIX-1, day-theme whole-class sweep). public_dusk.css gives the .rg-* funnel its DUSK finish with BARE ``body.dusk`` raw dark hex (#3B2B1C / #2B2017 / #2C3326) — those apply in BOTH themes, so in day they rendered the persona-selector cards + the Terms row + the next-step coins as DARK blocks on the cream page (illegible / WCAG fail), and the heading + selector text washed out. Re-ground every funnel surface on warm paper here (loaded LAST → wins). The ink tokens (--d-cream / --d-tan / --d-ink) already flip AA via the token layer; only the GROUNDS need swapping. ============================================================================ */ /* the funnel heading + lead read as ink on paper (h1/.lead already token-flipped, pin them so the "Register your business" heading is never washed-out). */ html[data-theme="day"] body.dusk .rg-wrap h1, html[data-theme="day"] body.dusk .inv-wrap h1 { color: var(--d-cream); } html[data-theme="day"] body.dusk .rg-wrap .lead, html[data-theme="day"] body.dusk .inv-wrap .lead { color: var(--d-tan); } /* the Operator / Reseller business-type chooser cards — were a dark oud gradient; re-paint as warm paper cards (text tokens read AA on the light card). */ html[data-theme="day"] body.dusk .rg-type { background: linear-gradient(180deg, var(--d-card), var(--d-card-3)); border: 1px solid var(--d-line-2); color: var(--d-cream); } html[data-theme="day"] body.dusk .rg-type:hover { border-color: var(--d-copper); } html[data-theme="day"] body.dusk .rg-type.on { border-color: var(--d-copper); background: #F1E3CB; box-shadow: 0 0 0 1px var(--d-copper), 0 0 22px rgba(184,115,51,.14); } html[data-theme="day"] body.dusk .rg-type svg { stroke: var(--d-copper-press); } html[data-theme="day"] body.dusk .rg-type-h { color: var(--d-cream); } html[data-theme="day"] body.dusk .rg-type-s { color: var(--d-ink); } /* the required Terms / commission-disclosure row — was a dark #2B2017 niche. */ html[data-theme="day"] body.dusk .rg-terms { background: var(--d-panel); border: 1px solid var(--d-line-2); } html[data-theme="day"] body.dusk .rg-terms label { color: var(--d-tan); } html[data-theme="day"] body.dusk .rg-terms a { color: var(--d-copper-lit); } html[data-theme="day"] body.dusk .rg-terms.err { border-color: var(--d-loss); } /* the "you're done" confirmation — the green check coin + the numbered next-steps. */ html[data-theme="day"] body.dusk .rg-done-mark { background: #E3EAD7; color: var(--d-green-lit); } html[data-theme="day"] body.dusk .rg-done-mark svg { stroke: var(--d-green-lit); } html[data-theme="day"] body.dusk .rg-next-row + .rg-next-row { border-top-color: var(--d-line); } html[data-theme="day"] body.dusk .rg-next-step { background: #F4E7C9; color: var(--d-star-lit); } /* ============================================================================ 2r) PRICING & CHANNELS (pricing.css — the founder + operator Pricing pages). FIX-3 (day-theme whole-class sweep): the ENTIRE pricing Dusk re-skin (channel cards, the product PICKER, the retail/net segmented control, the captured-retail read-back, the AI competitive-price band, the floor strip, the basis note) was authored as a ``body.dusk`` re-skin with RAW dark hex and had NO day counterpart anywhere — pricing.css was not even in the coverage guard's scan list. In day every one of these rendered dark-brown on cream (low contrast / illegible). Re- ground each on warm paper; the ink/accent tokens flip AA via the token layer. ============================================================================ */ /* the "Pick a product" picker cards (#2B2017 base, #2F2216 hover). */ html[data-theme="day"] body.dusk .pick-item { background: linear-gradient(180deg, var(--d-card), var(--d-card-3)); border-color: var(--d-line-2); color: var(--d-cream); } html[data-theme="day"] body.dusk .pick-item:hover { border-color: var(--d-copper); background: var(--d-bg2); } html[data-theme="day"] body.dusk .pick-item.active { border-color: var(--d-copper-press); box-shadow: inset 0 0 0 1px var(--d-copper); } html[data-theme="day"] body.dusk .pick-item .pi-meta { color: var(--d-ink); } /* the channel cards (the dark oud gradient → warm paper card). */ html[data-theme="day"] body.dusk .chan-card { background: linear-gradient(180deg, var(--d-card), var(--d-card-3)); border: 1px solid var(--d-line-2); box-shadow: var(--d-shadow); } html[data-theme="day"] body.dusk .chan-card.is-below_target { border-color: var(--d-saff); box-shadow: inset 0 0 0 1px rgba(176,121,8,.4); } html[data-theme="day"] body.dusk .chan-card.is-below_floor, html[data-theme="day"] body.dusk .chan-card.is-negative { border-color: var(--d-loss); box-shadow: inset 0 0 0 1px rgba(154,83,38,.4); } html[data-theme="day"] body.dusk .chan-head h3, html[data-theme="day"] body.dusk .chan-suggest .big { color: var(--d-cream); } html[data-theme="day"] body.dusk .chan-suggest .cap { color: var(--d-ink); } /* the retail/net segmented control (#20160E track) — light paper track. */ html[data-theme="day"] body.dusk .price-mode { background: var(--d-bg2); border-color: var(--d-line-2); } html[data-theme="day"] body.dusk .price-mode-tab { color: var(--d-tan); } html[data-theme="day"] body.dusk .price-mode-tab.on { background: linear-gradient(135deg, var(--d-copper), var(--d-copper-2)); color: #FBF6EC; box-shadow: 0 6px 16px rgba(184,115,51,.28); } html[data-theme="day"] body.dusk .price-mode-tab:not(.on):hover { color: var(--d-cream); background: var(--d-bg2); } /* the "your current retail" read-back strip (#2C3326 ok / #2B2017 none). */ html[data-theme="day"] body.dusk .price-captured { background: #E3EAD7; color: var(--d-green-lit); } html[data-theme="day"] body.dusk .price-captured.none { background: var(--d-bg2); color: var(--d-tan); } /* the AI competitive-price band — low/typical/high. */ html[data-theme="day"] body.dusk .cprice-band .band-edge, html[data-theme="day"] body.dusk .cprice-band .band-typical { background: var(--d-bg2); border-color: var(--d-line-2); color: var(--d-cream); } html[data-theme="day"] body.dusk .cprice-band .band-typical { background: #F4E7C9; border-color: var(--d-saff); color: var(--d-star-lit); } html[data-theme="day"] body.dusk .cprice-band .cap { color: var(--d-ink); } html[data-theme="day"] body.dusk .ai-narration { color: var(--d-tan); } /* the floor / loss indicator strip (green ok / saffron below-target / amber loss). */ html[data-theme="day"] body.dusk .floor-strip { background: #E3EAD7; color: var(--d-green-lit); } html[data-theme="day"] body.dusk .floor-strip.below_target { background: #F4E7C9; color: var(--d-star-lit); } html[data-theme="day"] body.dusk .floor-strip.below_floor, html[data-theme="day"] body.dusk .floor-strip.negative { background: #F6E3CC; color: var(--d-loss); } /* the B2B basis note (#20160E inset) — a quiet paper niche. */ html[data-theme="day"] body.dusk .basis-note { color: var(--d-ink); background: var(--d-bg2); border-color: var(--d-line-2); } /* ============================================================================ 2s) COCKPIT "Run a payout" FORM CONTROLS (FIX-2, day-theme whole-class sweep). The Supplier (#payout-asof) are built in sanam_home.js with INLINE styles hard-coding ``background:#20160E`` — so in day they render dark-on-cream (the option text + the mm/dd/yyyy placeholder are illegible). Inline styles beat a normal CSS rule, so these day overrides carry ``!important`` to win — the ONLY correct seam from this sheet (we cannot edit the JS). Mirror the support-console / subscriptions select day-fix: cream/white fill, dark ink, copper focus. The native date control flips via color-scheme:light too. ============================================================================ */ html[data-theme="day"] body.dusk #payout-org, html[data-theme="day"] body.dusk #payout-asof { background: #FFFDF8 !important; color: var(--d-cream) !important; border-color: var(--d-line-2) !important; } html[data-theme="day"] body.dusk #payout-org option { background: var(--d-panel); color: var(--d-cream); } html[data-theme="day"] body.dusk #payout-org:focus, html[data-theme="day"] body.dusk #payout-asof:focus { border-color: var(--d-copper) !important; } /* ============================================================================ 2t) HUB role/portal SWITCH