/* SPOTTOOLS palette — Primary Multicolour Monoline
   Hues taken from the approved wordmark artwork (uploads/spotitools-logo-color.svg):
   blue #447BDB · red #D3453A · yellow #EEBA26 · green #22965B · ink #050505.
   Four logo hues + neutrals. Every component reads these variables; nothing defines colour locally.

   ROLES (the same colour always means the same kind of thing)
   blue    convert family · primary action (buttons, Go, active chips/segments, focus ring)
   yellow  optimise family (compress, resize) · progress / working
   red     privacy-removal family (remove EXIF) · errors, failed, destructive
   green   RESERVED SIGNAL — privacy pill, savings figures, chain hand-over. Never decorative; no icon family uses it.
   ink     text-tools family (neutral) · body text
   Ads     neutral grey only (surface + line). No brand colour, ever.

   *-strong = text-safe variant, passes 4.5:1 behind white type on light; -ink = text-safe on light backgrounds. */

:root, [data-nought-theme="light"] {
  color-scheme: light;
  /* neutrals */
  --bg: #FAFAFA; --surface: #FFFFFF; --ink: #111111; --ink2: #5F6368; --line: #E3E3E3; --grid: rgba(0,0,0,.03);
  /* four logo hues */
  --blue: #447BDB;   --blue-strong: #2F63C4;   --blue-ink: #2F63C4;   --blue-tint: #D6DFFA;
  --yellow: #EEBA26; --yellow-strong: #8A6200; --yellow-ink: #8A6200; --yellow-tint: #FCE6C2;
  --red: #D3453A;    --red-strong: #B8372D;    --red-ink: #A8321F;    --red-tint: #F8D3DB;
  --green: #22965B;  --green-strong: #1B7A4A;  --green-ink: #1B7A4A;  --green-tint: #D3EEE6;
  /* roles */
  --action: var(--blue-strong); --action-hover: #2A5AB8; --on-action: #FFFFFF;
  --progress: var(--yellow);
  --danger: var(--red-strong); --danger-ink: var(--red-ink);
  --signal: var(--green); --signal-strong: var(--green-strong); --signal-ink: var(--green-ink); --on-signal: #FFFFFF;
  --grad-a: var(--green-strong); --grad-b: #22965B;
  /* legacy aliases used by components (privacy pill, dropzone breathe, dots) → the reserved signal */
  --accent: var(--signal); --accent-2: #2DB894; --accent-ink: var(--signal-ink); --wash: var(--green-tint);
  --ad-bg: var(--surface); --ad-line: var(--line);
}
[data-nought-theme="dark"] {
  color-scheme: dark;
  --bg: #0B0B0C; --surface: #151517; --ink: #F4F4F5; --ink2: #A1A1AA; --line: #27272A; --grid: rgba(255,255,255,.022);
  --blue: #7A93F2;   --blue-strong: #3B5FE0;   --blue-ink: #9DAEF5;   --blue-tint: #171F45;
  --yellow: #F7B54A; --yellow-strong: #8A6200; --yellow-ink: #F7B54A; --yellow-tint: #3A2A0E;
  --red: #F0708A;    --red-strong: #B8372D;    --red-ink: #F49AAC;    --red-tint: #3E1420;
  --green: #3ED3A8;  --green-strong: #128C6C;  --green-ink: #3ED3A8;  --green-tint: #0E2A23;
  --action-hover: #4A6DEB; --accent-2: #6FE0C0; --grad-a: #3ED3A8; --grad-b: #7BE5CC;
}
/* tool families */
[data-fam="convert"]  { --fam-ink: var(--blue);   --fam-tint: var(--blue-tint); }
[data-fam="optimise"] { --fam-ink: var(--yellow); --fam-tint: var(--yellow-tint); }
[data-fam="privacy"]  { --fam-ink: var(--red);    --fam-tint: var(--red-tint); }
[data-fam="text"]     { --fam-ink: #B03A7A;       --fam-tint: color-mix(in srgb, #E86AA6 16%, var(--surface)); }  /* fancy text: IG-style magenta, gradient tile red→yellow→violet */
/* states are never colour-only: pressed segments also change weight, focus has a visible ring */
[data-on="true"] { background: var(--action) !important; color: var(--on-action) !important; border-color: var(--action) !important; font-weight: 700 !important; }
:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }