/*
 * SellFlow colours: every colour in the app is defined here, once, with its light and dark value.
 * light-dark(light, dark) picks one by the theme on <html data-theme="light|dark|system"> (theme.ts):
 * light is the default, dark is chosen with the toggle in the top bar, system follows the device.
 * Text pairs meet WCAG AA (4.5:1 for text, 3:1 for chart lines); check new pairs before adding them.
 */
:root {
  color-scheme: light;

  /* brand: a bright, friendly purple, with a light tint for selected items and badges */
  --brand: #7c3aed;
  --brand-dark: #a78bfa;
  --accent: light-dark(var(--brand), var(--brand-dark));
  --accent-ink: light-dark(#ffffff, #1a1033); /* text on --accent */
  --accent-soft: light-dark(#f1ebff, #2e2452); /* tint: selected items, badges, info banners */
  --accent-strong: light-dark(#6d28d9, #c4b2fd); /* purple text on the tint */

  /* surfaces and text */
  --bg: light-dark(#f7f8fa, #121119);
  --surface: light-dark(#ffffff, #1b1a25);
  --surface-2: light-dark(#f1f2f6, #25232f);
  --border: light-dark(#e4e6ec, #302e3d);
  --text: light-dark(#171a26, #f2f1f7);
  --muted: light-dark(#5d6273, #a9a7ba);

  /* meaning: green good news, amber warnings, red errors */
  --up: light-dark(#0f7b55, #4cc99a);
  --ok-bg: light-dark(#e6f6ee, #123328);
  --down: light-dark(#a65500, #f2a64b);
  --warn-bg: light-dark(#fff3e0, #3a2710);
  --warn-text: light-dark(#8a4500, #f2c27b);
  --bad: light-dark(#c4321f, #f58a7e);
  --bad-bg: light-dark(#fdecea, #3d1c18);
  --bad-ink: light-dark(#ffffff, #2a0d09); /* text on --bad (danger buttons) */

  /* brand panels: plan card, plan chip, the headline stat */
  --ink-panel: light-dark(#6d28d9, #4c1d95);
  --ink-panel-text: #ffffff;
  --ink-panel-muted: light-dark(#e6dcff, #d9ccff);
  --ink-panel-good: light-dark(#b9f6da, #9ff0c9);
  --ink-panel-bad: light-dark(#ffd3cc, #ffbcb2);
  --ink-panel-line: rgba(255, 255, 255, 0.22); /* dividers on the purple panel */
  --ink-panel-chip: rgba(255, 255, 255, 0.16); /* chips on the purple panel */

  /* charts (3:1 against --surface in both themes) */
  --series-1: light-dark(#7c3aed, #a78bfa);
  --series-2: light-dark(#e0632f, #e46a3a);
  --series-3: light-dark(#14a06f, #22b07d);
  --series-raised: light-dark(#16a34a, #4cc99a); /* green bars: prices raised (amber only ever means a warning) */
  --grid: light-dark(#eceef3, #2a2836);

  /* small fixed parts */
  --knob: #ffffff; /* the dot in on/off switches */
  --print-paper: #ffffff; /* printed labels: always black on white, whatever the theme */
  --print-ink: #000000;
  --overlay: light-dark(rgba(23, 26, 38, 0.4), rgba(0, 0, 0, 0.6)); /* behind dialogs */
  --shadow-color: light-dark(rgba(23, 26, 38, 0.06), transparent);
  --shadow: 0 1px 2px var(--shadow-color);
  --shadow-lift: 0 6px 20px light-dark(rgba(23, 26, 38, 0.12), rgba(0, 0, 0, 0.4));
  --shadow-modal: 0 20px 60px light-dark(rgba(23, 26, 38, 0.2), rgba(0, 0, 0, 0.5));
}
:root[data-theme='dark'] { color-scheme: dark; }
:root[data-theme='system'] { color-scheme: light dark; }