/* Design tokens — single source (spec 2026-09-22-cabinets-ui-unification).
   Roles, not colours: pages use var(--surface), never #fff.
   Light values on :root, dark on :root[data-theme="dark"]; the theme is set by
   partials/_head_common.php before this file loads. Brand book: --brand is the
   interactive accent (hover, focus, links); loud #B8FF5A is --cta only — fills
   for CTA/active states with near-black --cta-text on top. */
:root {
  color-scheme: light;

  --brand: #7db521;
  --brand-dark: #669718;
  --cta: #B8FF5A;
  --cta-hover: #a9ec48;
  --cta-text: #1c1c1c;
  --appbar: #454343;

  --bg: #fafaf9;
  --surface: #ffffff;
  --card: var(--surface);
  --surface-2: #f6f5f2;
  --surface-3: #eceae6;
  --overlay: rgba(28, 28, 28, 0.45);

  --text: #403e3e;
  --muted: #706e6a;
  --text-inverse: #ffffff;
  /* Theme-invariant: text drawn on a DATA-driven saturated background (status/
     tag colour picked in the admin UI or coming from the DB) — that background
     doesn't follow the theme, so its label can't use --text-inverse (which
     flips to near-black in dark mode and would vanish against a still-light
     accent colour). Stays #ffffff in both themes on purpose. */
  --on-accent: #ffffff;

  --border: #e0ded9;
  --border-strong: #d9d7d2;
  --border-soft: #eceae6;

  --danger: #c0392b;
  --danger-bg: #fbeaea;
  --danger-border: #f1c1c1;
  --success: #2e9e4d;
  --success-bg: #eaf6ee;
  --success-border: #b7e0b9;
  --success-ink: #1c6b3f; /* text on --success-bg / light fills; the plain token is for dots, borders, fills */
  --warn: #b7791f;
  --warn-bg: #fff7e6;
  --warn-ink: #7a5b12; /* text on --warn-bg / light fills; the plain token is for dots, borders, fills */
  --info: #2563eb;
  --info-bg: #eff6ff;
  --caution: #c2410c;
  --caution-bg: #ffedd5;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 15px;
  --shadow-card: 0 1px 2px rgba(35, 33, 31, 0.05), 0 4px 12px rgba(35, 33, 31, 0.05);
  --shadow-dropdown: 0 6px 18px rgba(35, 33, 31, 0.08);
  --shadow-modal: 0 20px 50px rgba(35, 33, 31, 0.22);

  /* Categorical palette — series/types that are NOT statuses (promo types, …). */
  --cat-1: #5c67ff;
  --cat-2: #2e9e4d;
  --cat-3: #f59e0b;
  --cat-4: #dc2626;
  --cat-5: #8b5cf6;
  --cat-6: #ec4899;
  --cat-7: #0891b2;
  --cat-8: #a8a5a0;

  /* Detailed rating heatmap's mid tier (.hm-l2, rating/daily.php): a brand-tinted fill
     whose text (--cta-text) needs a touch more brand share in dark mode to clear 4.5:1 —
     dark's much brighter --brand means the same 60% share light theme uses lands at a
     mid-luminance dark-theme fill neither --cta-text nor --on-accent reads well on. */
  --hm-l2-fill: color-mix(in srgb, var(--brand) 60%, var(--surface));

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --brand: #9bd13a;
  --brand-dark: #b8e46a;
  --cta: #B8FF5A;
  --cta-hover: #a9ec48;
  --cta-text: #1c1c1c;
  --appbar: #2a2928;

  --bg: #1a1918;
  --surface: #242322;
  --card: var(--surface);
  --surface-2: #2c2b29;
  --surface-3: #353331;
  --overlay: rgba(0, 0, 0, 0.6);

  --text: #ecebe8;
  --muted: #a5a29c;
  --text-inverse: #1c1c1c;
  --on-accent: #ffffff;

  --border: #3a3835;
  --border-strong: #4a4744;
  --border-soft: #302e2c;

  --danger: #f08a7e;
  --danger-bg: #3a2220;
  --danger-border: #5a2e2a;
  --success: #6fcf8a;
  --success-bg: #1f3325;
  --success-border: #2d5236;
  --success-ink: var(--success); /* dark --success is already light enough as ink on the dark tint */
  --warn: #e6b35a;
  --warn-bg: #3a2f1a;
  --warn-ink: var(--warn); /* dark --warn is already light enough as ink on the dark tint */
  --info: #7aa7ff;
  --info-bg: #1c2740;
  --caution: #f4a261;
  --caution-bg: #3a2618;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-dropdown: 0 6px 18px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.55);

  --cat-1: #8b93ff;
  --cat-2: #6fcf8a;
  --cat-3: #fbbf24;
  --cat-4: #f87171;
  --cat-5: #a78bfa;
  --cat-6: #f472b6;
  --cat-7: #22d3ee;
  --cat-8: #8d8a85;

  --hm-l2-fill: color-mix(in srgb, var(--brand) 65%, var(--surface));
}