/* Moneki Design System 4 — "Minimal Soft Neumorphism"
   Calm, monochrome, softly tactile. Depth from soft blurred shadows + layered
   surfaces, never color blocking or hard borders. Two matched registers on one
   palette: Morning (light, default) and Night (dark, user toggle via
   html[data-theme="night"]). Values lifted verbatim from the specimen
   "Neumorphism Design System.html". */

/* ═══════════════════════════════════════════════════════════════════════
   SECTION A — DS4 canonical tokens (Morning is the :root default)
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* Register declaration. Native controls (a <select>'s closed face, checkboxes, native
     scrollbars) are painted by the UA, not by our tokens, so without this they keep their
     light chrome in the Night register — a white select box on a dark card. Declaring the
     register hands the UA the same answer the tokens already give. */
  color-scheme: light;

  /* Core palette */
  --app-bg:         #ECECEC;
  --surface-main:   #F3F3F3;
  --surface-card:   #F6F6F6;
  --surface-high:   #FBFBFB;
  --soft-white:     #FFFFFF;
  --divider:        rgba(0,0,0,0.06);
  --text-primary:   #1E1E1E;
  /* The Morning ink ramp is held to the same 4.5:1 text bar as the status inks in Section B,
     measured against the DARKEST surface a token can land on. Morning is the mirror of Night:
     raised surfaces here are LIGHTER than the page, so the hard case is the page shell, not the
     card — --app-bg #ECECEC and the closing stop of --grad-shell (#E9E9E9), which is darker
     still. The shipped --text-muted #9A9A9A was 2.32:1 there — it carries table headers, "Not
     selling" / "Ineligible" / "Unsupported" status text, delta captions and every locked-metric
     explainer — so it moves down to 4.66:1. --text-secondary follows it down (5.26:1 -> 6.14:1)
     only so the three-step ramp keeps a visible step between secondary and muted; both
     directions are darker, so nothing that reads today reads worse. */
  --text-secondary: #555555;
  --text-muted:     #676767;
  --icon-neutral:   #2A2A2A;

  /* Brand + micro accent FILLS. The paired orange ink is dark enough for text and icon glyphs
     on every Morning surface and surface-gradient stop; keep the pastel fill unchanged. */
  --brand:         linear-gradient(135deg, #FFC84A 0%, #FF9A1D 50%, #FF7467 100%);
  --brand-cta-ink: #3A2500;   /* ink on the gradient — NEVER white */
  --acc-green:     #7FBF7F;
  --acc-pink:      #E9B8B8;
  --acc-orange:    #E89A3D;
  --acc-orange-ink: #945718;
  --acc-greyblue:  #AEB8C2;
  /* The two accents above are Morning values with NO night counterpart, so anything painted with
     them keeps its day ink through the Morning ⇄ Night flip. --acc-orange cannot simply be given
     one: --brand-violet, --accent-purple and --bloom-orange all resolve through it, and moving the
     brand orange at night is a product-wide decision, not a page's. These two carry the same two
     accents ACROSS the flip for non-text surfaces — the Store News tag bars — so a page that wants
     a register-following accent has one that is not the brand. Not bound by Section B's ink ramp:
     neither is ever text. Their night values are pulled clear of --warn and --info, which the same
     bar set already uses, so the seven tag accents stay apart in both registers. */
  --acc-orange-bar:   #E89A3D;
  --acc-greyblue-bar: #AEB8C2;

  /* Card / surface gradient fills */
  --grad-card:         linear-gradient(145deg, #F8F8F8 0%, #EFEFEF 100%);  /* raised card */
  --grad-card-feature: linear-gradient(145deg, #FAFAFA 0%, #EFEFEF 100%);  /* feature card */
  --grad-shell:        linear-gradient(145deg, #F4F4F4 0%, #E9E9E9 100%);  /* outer shell */

  /* Shadow recipes — the seven lifts (verbatim) */
  --sh-shell:   18px 18px 42px rgba(0,0,0,0.08), -14px -14px 34px rgba(255,255,255,0.9), inset 1px 1px 0 rgba(255,255,255,0.72);
  --sh-card:    12px 12px 28px rgba(0,0,0,0.075), -10px -10px 24px rgba(255,255,255,0.92), inset 1px 1px 0 rgba(255,255,255,0.7);
  --sh-feature: 14px 14px 30px rgba(0,0,0,0.07), -10px -10px 24px rgba(255,255,255,0.92), inset 1px 1px 0 rgba(255,255,255,0.72);
  --sh-control: 7px 7px 16px rgba(0,0,0,0.08), -6px -6px 14px rgba(255,255,255,0.92), inset 1px 1px 0 rgba(255,255,255,0.75);
  --sh-inset:   inset 5px 5px 12px rgba(0,0,0,0.075), inset -5px -5px 12px rgba(255,255,255,0.9);
  --sh-hover:   14px 14px 30px rgba(0,0,0,0.09), -10px -10px 24px rgba(255,255,255,0.95), inset 1px 1px 0 rgba(255,255,255,0.75);
  --sh-press:   inset 6px 6px 14px rgba(0,0,0,0.09), inset -6px -6px 14px rgba(255,255,255,0.85);

  /* Night shadow recipes — defined in :root so the night block can reference them */
  --sh-night-card:    8px 8px 22px rgba(0,0,0,0.45), inset 1px 1px 0 rgba(255,255,255,0.05);
  --sh-night-control: 6px 6px 16px rgba(0,0,0,0.4), inset 1px 1px 0 rgba(255,255,255,0.06);
  --sh-night-inset:   inset 4px 4px 10px rgba(0,0,0,0.5), inset -4px -4px 10px rgba(255,255,255,0.04);

  /* ═════════════════════════════════════════════════════════════════════
     SECTION B — semantic TEXT-GRADE status
     DS4 pastel accents fail 4.5:1 as text, so status TEXT uses these darker
     inks; the paired *-soft tokens are the pale fills behind them. Each ink is
     measured on the darkest ground it can land on — its own *-soft fill, or the
     page shell — not on white: the shipped --good was 4.22:1 on #E2EFE2 and
     4.13:1 on the shell's closing stop, so "darker than the pastel" was not yet
     dark enough. --info already cleared the bar (4.52:1) and is unchanged.
     ═════════════════════════════════════════════════════════════════════ */
  --good: #397246;  --good-soft: #E2EFE2;
  --warn: #945718;  --warn-soft: #F7E8D4;
  --bad:  #A64536;  --bad-soft:  #F5E0DC;
  --info: #5A6B7C;  --info-soft: #E7EBEF;

  /* Chart sub-palette (decided 2026-09-30, proto/chart-colors-identity-2). Data wears the brand's
     own sub colours, never the brand gradient: one series is the brand orange (--chart-1); two
     series — up / down, this / that — are orange and grey-blue (--chart-up / --chart-down); more
     take the slots in order (orange, grey-blue, gold, lavender, green, pink, taupe, sage-teal,
     ordered so neighbours stay apart). Status colours stay for status only. ui.jsx's ChartBox
     carries the same values for canvas charts. */
  --chart-1: #E89A3D; --chart-2: #AEB8C2; --chart-3: #FFC84A; --chart-4: #AB9BCB;
  --chart-5: #7FBF7F; --chart-6: #E9B8B8; --chart-7: #8A7F76; --chart-8: #83C6BD;
  --chart-up: var(--chart-1); --chart-down: var(--chart-2);
  /* Mist: the resting colour of a bar that isn't the point ("Focus", proto/bar-charts): the one
     that matters is --chart-1, every other bar rests here and turns --chart-1 on hover. */
  --chart-mist: #D3DAE2; --chart-mist-deep: #C3CCD5;
  --chart-compare: rgba(0,0,0,0.12);
  /* The Store card's texture: a pattern in the page's own ink at ~5%, never a colour fill. */
  --store-pattern-ink: rgba(0,0,0,0.055);

  /* ═════════════════════════════════════════════════════════════════════
     SECTION C — legacy aliases
     Every var name consumed by the existing app, remapped onto the DS4
     canon so nothing dangles. New code should prefer the Section A names.
     ═════════════════════════════════════════════════════════════════════ */
  --surface-app:    var(--app-bg);
  --surface-raised: var(--surface-card);
  --surface-rail:   var(--surface-main);
  --surface-page:   var(--surface-main);
  --surface-chip:   var(--surface-high);
  --border-subtle:  var(--divider);
  --border-strong:  rgba(0,0,0,0.10);
  --border-pill:    rgba(0,0,0,0.10);
  --grad-brand:     var(--brand);
  --grad-blur:      var(--brand);
  --brand-violet:   var(--acc-orange);
  --brand-violet-ink: var(--acc-orange-ink);
  --brand-gold:     #FFC84A;
  --brand-coral:    #FF7467;
  --accent-purple:  var(--acc-orange);
  --ink-900: var(--text-primary);
  --ink-800: var(--text-primary);
  --ink-600: var(--text-secondary);
  --ink-500: var(--text-secondary);
  --text-title:  var(--text-primary);
  --text-strong: var(--text-primary);
  --text-body:   var(--text-secondary);

  /* Old radial "bloom" stops — flattened to the neutral family (DS4 bans
     candy claymorphism); kept defined only so legacy references resolve. */
  --bloom-orange: var(--acc-orange);
  --bloom-yellow: #F3D9A0;
  --bloom-pink:   var(--acc-pink);
  --bloom-peach:  #F0C9A8;
  --bloom-card-1: radial-gradient(circle at 50% 0%, #F6F6F6 0%, #F3F3F3 60%, #F3F3F3 100%);
  --bloom-card-2: radial-gradient(circle at 50% 0%, #F6F6F6 0%, #F3F3F3 60%, #F3F3F3 100%);
  --bloom-card-3: radial-gradient(circle at 50% 0%, #F6F6F6 0%, #F3F3F3 60%, #F3F3F3 100%);
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION D — Night register (dark). Overrides the canonical names on the
   same palette + shadow philosophy: deep outer dark, inner highlight ~5% so
   nothing reads as a white halo. Brand + accents are unchanged.
   ═══════════════════════════════════════════════════════════════════════ */
html[data-theme="night"] {
  color-scheme: dark;
  --app-bg:         #1B1E25;
  --surface-main:   #23262E;
  --surface-card:   #23262E;
  --surface-high:   #2A2E37;
  --soft-white:     #2A2E37;
  --divider:        rgba(255,255,255,0.08);
  --text-primary:   #EDEFF3;
  /* The night ink ramp is held to the same 4.5:1 text bar as the status inks in Section B,
     measured against the LIGHTEST night surface (--surface-high #2A2E37) so a token cannot pass
     on the page background and fail on a raised card. The shipped --text-muted #6E7683 was
     2.97:1 there — it carried table headers, Store names, and "Not selling"/"Ineligible" status
     text — so it moves up to 4.80:1. --text-secondary follows it up (5.29:1 -> 6.66:1) only so
     the three-step ramp keeps a visible step between secondary and muted; both directions are
     lighter, so nothing that reads today reads worse. */
  --text-secondary: #AEB6C4;
  --text-muted:     #929AA8;
  --icon-neutral:   #C9CFD9;
  --acc-orange-ink: #E3A55C;

  /* Card / surface gradient fills — dark layered */
  --grad-card:         linear-gradient(145deg, #282C35 0%, #1E2129 100%);
  --grad-card-feature: linear-gradient(145deg, #2A2E37 0%, #1E2129 100%);
  --grad-shell:        linear-gradient(160deg, #1F222B 0%, #1B1E25 100%);

  /* Shadows — the night set for card/control/inset; shell/feature/hover/press
     derived darker with a low white highlight. */
  --sh-card:    var(--sh-night-card);
  --sh-control: var(--sh-night-control);
  --sh-inset:   var(--sh-night-inset);
  --sh-shell:   14px 14px 34px rgba(0,0,0,0.5), inset 1px 1px 0 rgba(255,255,255,0.05);
  --sh-feature: 12px 12px 30px rgba(0,0,0,0.48), inset 1px 1px 0 rgba(255,255,255,0.05);
  --sh-hover:   12px 12px 30px rgba(0,0,0,0.55), inset 1px 1px 0 rgba(255,255,255,0.07);
  --sh-press:   inset 5px 5px 13px rgba(0,0,0,0.6), inset -5px -5px 13px rgba(255,255,255,0.04);

  /* Status — text-grade lightened for the dark bg; soft fills are dark-tinted. */
  --good: #8FCF8F;  --good-soft: rgba(127,191,127,0.12);
  --warn: #E3A55C;  --warn-soft: rgba(232,154,29,0.14);
  --bad:  #E58877;  --bad-soft:  rgba(255,116,103,0.14);
  --info: #93A5B8;  --info-soft: rgba(90,107,124,0.18);
  --chart-1: #E89A3D; --chart-2: #AEB8C2; --chart-3: #FFC84A; --chart-4: #AB9BCB;
  --chart-5: #7FBF7F; --chart-6: #E9B8B8; --chart-7: #8A7F76; --chart-8: #83C6BD;
  --chart-up: var(--chart-1); --chart-down: var(--chart-2);
  --chart-mist: #464E57; --chart-mist-deep: #555F69;
  --chart-compare: rgba(255,255,255,0.16);
  --store-pattern-ink: rgba(255,255,255,0.06);

  /* Non-text accents that follow the register (see Section A). Brighter / lighter than the
     --warn and --info above so the Store News tag bars stay seven distinct accents at night. */
  --acc-orange-bar:   #F2A64A;
  --acc-greyblue-bar: #CBD4DE;

  /* Legacy raw-value aliases that don't auto-follow via var() */
  --border-strong: rgba(255,255,255,0.12);
  --border-pill:   rgba(255,255,255,0.10);
}