/* public/css/tokens.css — design tokens, verbatim from docs/UI-GUIDE.md §1. Derived, non-colour helpers live in
   base.css; this file holds ONLY the tokens. GENERATED by the palette script described in docs/UI-GUIDE.md §1, which
   also checks every contrast pair, so change the script's table rather than one value here.

   Two themes, one set of names. EVERY colour in the app is a token here. The dark theme IS the galaxy (2026-10-18)
   and it is the default; the light theme is the same structure as a pale dawn sky. A colour that exists in only one
   of the two blocks is caught by a test rather than by someone staring at white-on-white. */
:root {
  /* ---- text and surfaces. --soft is decorative only; text uses --soft-text. In the galaxy theme --paper is the solid
     colour a glass card averages to over the night sky, which is what the contrast tests measure against. */
  --ink:#1d1d1f; --body:#55555a; --soft:#86868b; --soft-text:#6b6b70; --canvas:#f5f5f7; --paper:#ffffff;
  --hairline:#d6d6d6; --neutral-bg:#ececf0;

  /* ---- brand. The Agadura orange; in the galaxy it glows warmer so it reads as the same orange against deep blue. */
  --brand:#bd581d; --brand-deep:#a34a15; --brand-soft:#e08b4e; --tint:#faf1e8; --cream:#f0e4d3;

  /* ---- advertising (Meta) — --meta fills, --meta-ink is legible ON the fill, --meta-text is blue text on a page,
     --meta-soft tints a background. */
  --meta:#3d84f5; --meta-ink:#0b1b33; --meta-text:#1c4fa1; --meta-soft:#e8f0fe;

  /* ---- status. --*-edge is the border that goes with each background. */
  --ok-bg:#e6f4e7; --ok-ink:#1e6b2d; --ok-edge:#bfdcc4; --warn-bg:#fff4e0; --warn-ink:#8a5a00; --warn-edge:#f0dcb0;
  --bad-bg:#fdeaea; --bad-ink:#a11a1a; --bad-edge:#f3c9c9; --bad-soft:#f8d9d9;

  /* ---- interface colours that are translucent, inverted or part of a control. */
  --glass:rgba(255,255,255,.82); --well:rgba(0,0,0,.055); --rule:rgba(0,0,0,.06); --scrim:rgba(0,0,0,.36);
  --sheen:#f7f7f9; --on-brand:#ffffff; --on-accent:#ffffff; --inverse-bg:#1d1d1f; --inverse-ink:#ffffff;
  --inverse-well:rgba(255,255,255,.12); --inverse-soft:rgba(255,255,255,.7); --inverse-ok:#7ed491;
  --inverse-warn:#ffc861; --inverse-bad:#ff8a8a; --inverse-info:#9ec5ff; --track:#c7c7cc; --knob:#ffffff;
  --field-line:#b8b8bd; --focus-ring:rgba(189,88,29,.18); --focus-bad:rgba(161,26,26,.15);

  /* ---- the galaxy (2026-10-18). The owner: a real galaxy that turns, off to one side, a deep night rather than purple,
     and no gradients on text or buttons — and every page its own colour (home blue, profit red, tests green …).
     --cosmos-* is the sky public/js/ui/galaxy.js paints, --nebula-* its dust, --star-* the stars, --core the bright
     centre of the spiral. --page-* is the colour of each page; galaxy.css makes the current one --accent
     (html[data-page], set by app.js), and the arms of the spiral, the active tab, the focus glow and the primary
     button all take it. Glass cards (--card-*) let the sky through. The light theme is the same as a pale dawn sky. */
  --cosmos-0:#f4f6fb; --cosmos-1:#e9eef8; --nebula-1:rgba(59,130,246,.16); --nebula-2:rgba(100,116,139,.12);
  --nebula-3:rgba(148,163,184,.14); --star:rgba(30,41,59,.55); --star-warm:rgba(180,83,9,.40);
  --star-cool:rgba(29,78,216,.40); --core:rgba(180,120,40,.35); --card-bg:rgba(255,255,255,.80);
  --card-bg-hover:rgba(255,255,255,.92); --card-edge:rgba(15,23,42,.10); --card-shine:rgba(255,255,255,.9);
  --page-analytics:#1d4ed8; --page-profit:#c81e1e; --page-channels:#6d28d9; --page-cro:#15803d;
  --page-orders:#b45309; --page-settings:#475569; --page-health:#0f766e; --page-lab:#a16207; --page-studio:#be185d;

  /* ---- one colour per CONCEPT, everywhere in the app (2026-10-18, the owner: "every graph and parameter its own colour,
     costs in their colour across the whole app"). Tiles, sparklines, lines, cost bars and legends all take their
     colour from here through public/js/palette.js. --m-*-ink is the text printed ON that colour (12px bold in the
     cost bar, so 4.5:1; a test computes every pair). */
  --m-revenue:#0369a1; --m-profit:#047857; --m-loss:#be123c; --m-orders:#86198f; --m-traffic:#0e7490;
  --m-conversion:#a21caf; --m-customers:#be185d; --m-quality:#475569; --m-vat:#64748b; --m-product:#b45309;
  --m-shipping:#0f766e; --m-picking:#6d28d9; --m-fees:#be185d; --m-credits:#b91c1c; --m-ads:#1d4ed8;
  --m-vat-ink:#ffffff; --m-product-ink:#ffffff; --m-shipping-ink:#ffffff; --m-picking-ink:#ffffff;
  --m-fees-ink:#ffffff; --m-credits-ink:#ffffff; --m-ads-ink:#ffffff; --m-profit-ink:#ffffff;

  /* ---- one colour per marketing channel (src/calc/channels.js), ready for TikTok and Google beside Meta. */
  --ch-meta:#2563eb; --ch-google:#b45309; --ch-tiktok:#be123c; --ch-google-organic:#15803d; --ch-social:#7e22ce;
  --ch-email:#be185d; --ch-whatsapp:#15803d; --ch-direct:#475569; --ch-referral:#0e7490; --ch-unknown:#6b7280;

  /* ---- the generic categorical palette (anything that has no concept of its own, e.g. a split by SKU). --c-N-ink is the
     12px bold label on the fill, so 4.5:1. */
  --c-1:#3c7f80; --c-1-ink:#ffffff; --c-2:#6b5ea8; --c-2-ink:#ffffff; --c-3:#a8527c; --c-3-ink:#ffffff;
  --c-4:#6e7a3a; --c-4-ink:#ffffff; --c-5:#636b78; --c-5-ink:#ffffff; --c-6:#7d6552; --c-6-ink:#ffffff;

  /* ---- geometry, elevation, space, type, motion. Identical in both themes except the shadows, which glow in the galaxy. */
  --radius-xl:28px; --radius-lg:18px; --radius-md:12px; --pill:980px;
  --shadow-1:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --shadow-2:0 2px 6px rgba(0,0,0,.06), 0 16px 40px rgba(0,0,0,.10); --space-1:4px; --space-2:8px; --space-3:12px;
  --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px;
  --font:'Assistant',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans Hebrew",Arial,sans-serif;
  --ease-out:cubic-bezier(.2,.6,.2,1); --ease-in:cubic-bezier(.8,.4,.8,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1); --dur-fast:150ms; --dur-base:300ms; --dur-slow:600ms;
}

/* The galaxy: a deep navy night, glass cards, one colour per page, and every concept lifted to a
   colour that reads as confident on a dark ground. Contrast against --paper, --canvas and --tint clears AA for every
   text token; the in-bar inks are near-black because every fill here is lighter than its light-theme counterpart. */
:root[data-theme="dark"] {
  --ink:#f1f5f9; --body:#cbd5e1; --soft:#64748b; --soft-text:#94a3b8; --canvas:#03050b; --paper:#0b1120;
  --hairline:#1e293b; --neutral-bg:#111827;
  --brand:#ff8a4c; --brand-deep:#ffb07f; --brand-soft:#d9682f; --tint:#121a2c; --cream:#1c2436;
  --meta:#5b8cff; --meta-ink:#060c22; --meta-text:#a9c6ff; --meta-soft:#17204a;
  --ok-bg:#0f2e2a; --ok-ink:#6ee7b7; --ok-edge:#1f5a4b; --warn-bg:#33260f; --warn-ink:#fcd34d; --warn-edge:#6b4f1a;
  --bad-bg:#3a1428; --bad-ink:#fda4af; --bad-edge:#6e2643; --bad-soft:#4c1d33;
  --glass:rgba(4,7,16,.66); --well:rgba(255,255,255,.07); --rule:rgba(255,255,255,.08); --scrim:rgba(1,3,8,.70);
  --sheen:#162033; --on-brand:#1c0a02; --on-accent:#03050b; --inverse-bg:#1e293b; --inverse-ink:#f8fafc;
  --inverse-well:rgba(255,255,255,.12); --inverse-soft:rgba(255,255,255,.7); --inverse-ok:#6ee7b7;
  --inverse-warn:#fcd34d; --inverse-bad:#fda4af; --inverse-info:#a9c6ff; --track:#334155; --knob:#e2e8f0;
  --field-line:#3b4a63; --focus-ring:rgba(96,165,250,.38); --focus-bad:rgba(253,164,175,.25);
  --cosmos-0:#02040a; --cosmos-1:#060c1a; --nebula-1:rgba(30,64,140,.30); --nebula-2:rgba(15,23,42,.45);
  --nebula-3:rgba(71,85,105,.18); --star:rgba(255,255,255,.95); --star-warm:rgba(255,226,190,.95);
  --star-cool:rgba(191,219,254,.95); --core:rgba(255,236,200,.95); --card-bg:rgba(8,13,26,.62);
  --card-bg-hover:rgba(12,19,36,.72); --card-edge:rgba(148,163,184,.16); --card-shine:rgba(255,255,255,.08);
  --page-analytics:#4f9dff; --page-profit:#ff6157; --page-channels:#9d8cff; --page-cro:#2fd477;
  --page-orders:#f5a524; --page-settings:#a3b3c8; --page-health:#2dd4bf; --page-lab:#e8c06a; --page-studio:#f472b6;
  --m-revenue:#38bdf8; --m-profit:#34d399; --m-loss:#fb7185; --m-orders:#f0abfc; --m-traffic:#22d3ee;
  --m-conversion:#e879f9; --m-customers:#f9a8d4; --m-quality:#e2e8f0; --m-vat:#94a3b8; --m-product:#fbbf24;
  --m-shipping:#2dd4bf; --m-picking:#a78bfa; --m-fees:#f472b6; --m-credits:#ff7a4d; --m-ads:#4f8cff;
  --m-vat-ink:#0a0818; --m-product-ink:#0a0818; --m-shipping-ink:#0a0818; --m-picking-ink:#0a0818;
  --m-fees-ink:#0a0818; --m-credits-ink:#0a0818; --m-ads-ink:#0a0818; --m-profit-ink:#0a0818;
  --ch-meta:#5b8cff; --ch-google:#fbbc04; --ch-tiktok:#ff3b6b; --ch-google-organic:#4ade80; --ch-social:#c084fc;
  --ch-email:#f9a8d4; --ch-whatsapp:#25d366; --ch-direct:#cbd5e1; --ch-referral:#67e8f9; --ch-unknown:#8b93a7;
  --c-1:#5eead4; --c-1-ink:#0a0818; --c-2:#a78bfa; --c-2-ink:#0a0818; --c-3:#f472b6; --c-3-ink:#0a0818;
  --c-4:#bef264; --c-4-ink:#0a0818; --c-5:#93c5fd; --c-5-ink:#0a0818; --c-6:#fdba74; --c-6-ink:#0a0818;
  --shadow-1:0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px rgba(0,2,8,.55);
  --shadow-2:0 1px 0 rgba(255,255,255,.06) inset, 0 18px 48px rgba(0,2,8,.65);
}

/* "System" with a dark device gets exactly the galaxy. An explicit choice — which sets data-theme on <html> — always
   wins, in both directions, which is why this is scoped away from [data-theme]. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --ink:#f1f5f9; --body:#cbd5e1; --soft:#64748b; --soft-text:#94a3b8; --canvas:#03050b; --paper:#0b1120;
    --hairline:#1e293b; --neutral-bg:#111827;
    --brand:#ff8a4c; --brand-deep:#ffb07f; --brand-soft:#d9682f; --tint:#121a2c; --cream:#1c2436;
    --meta:#5b8cff; --meta-ink:#060c22; --meta-text:#a9c6ff; --meta-soft:#17204a;
    --ok-bg:#0f2e2a; --ok-ink:#6ee7b7; --ok-edge:#1f5a4b; --warn-bg:#33260f; --warn-ink:#fcd34d; --warn-edge:#6b4f1a;
    --bad-bg:#3a1428; --bad-ink:#fda4af; --bad-edge:#6e2643; --bad-soft:#4c1d33;
    --glass:rgba(4,7,16,.66); --well:rgba(255,255,255,.07); --rule:rgba(255,255,255,.08); --scrim:rgba(1,3,8,.70);
    --sheen:#162033; --on-brand:#1c0a02; --on-accent:#03050b; --inverse-bg:#1e293b; --inverse-ink:#f8fafc;
    --inverse-well:rgba(255,255,255,.12); --inverse-soft:rgba(255,255,255,.7); --inverse-ok:#6ee7b7;
    --inverse-warn:#fcd34d; --inverse-bad:#fda4af; --inverse-info:#a9c6ff; --track:#334155; --knob:#e2e8f0;
    --field-line:#3b4a63; --focus-ring:rgba(96,165,250,.38); --focus-bad:rgba(253,164,175,.25);
    --cosmos-0:#02040a; --cosmos-1:#060c1a; --nebula-1:rgba(30,64,140,.30); --nebula-2:rgba(15,23,42,.45);
    --nebula-3:rgba(71,85,105,.18); --star:rgba(255,255,255,.95); --star-warm:rgba(255,226,190,.95);
    --star-cool:rgba(191,219,254,.95); --core:rgba(255,236,200,.95); --card-bg:rgba(8,13,26,.62);
    --card-bg-hover:rgba(12,19,36,.72); --card-edge:rgba(148,163,184,.16); --card-shine:rgba(255,255,255,.08);
    --page-analytics:#4f9dff; --page-profit:#ff6157; --page-channels:#9d8cff; --page-cro:#2fd477;
    --page-orders:#f5a524; --page-settings:#a3b3c8; --page-health:#2dd4bf; --page-lab:#e8c06a; --page-studio:#f472b6;
    --m-revenue:#38bdf8; --m-profit:#34d399; --m-loss:#fb7185; --m-orders:#f0abfc; --m-traffic:#22d3ee;
    --m-conversion:#e879f9; --m-customers:#f9a8d4; --m-quality:#e2e8f0; --m-vat:#94a3b8; --m-product:#fbbf24;
    --m-shipping:#2dd4bf; --m-picking:#a78bfa; --m-fees:#f472b6; --m-credits:#ff7a4d; --m-ads:#4f8cff;
    --m-vat-ink:#0a0818; --m-product-ink:#0a0818; --m-shipping-ink:#0a0818; --m-picking-ink:#0a0818;
    --m-fees-ink:#0a0818; --m-credits-ink:#0a0818; --m-ads-ink:#0a0818; --m-profit-ink:#0a0818;
    --ch-meta:#5b8cff; --ch-google:#fbbc04; --ch-tiktok:#ff3b6b; --ch-google-organic:#4ade80; --ch-social:#c084fc;
    --ch-email:#f9a8d4; --ch-whatsapp:#25d366; --ch-direct:#cbd5e1; --ch-referral:#67e8f9; --ch-unknown:#8b93a7;
    --c-1:#5eead4; --c-1-ink:#0a0818; --c-2:#a78bfa; --c-2-ink:#0a0818; --c-3:#f472b6; --c-3-ink:#0a0818;
    --c-4:#bef264; --c-4-ink:#0a0818; --c-5:#93c5fd; --c-5-ink:#0a0818; --c-6:#fdba74; --c-6-ink:#0a0818;
    --shadow-1:0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px rgba(0,2,8,.55);
    --shadow-2:0 1px 0 rgba(255,255,255,.06) inset, 0 18px 48px rgba(0,2,8,.65);
  }
}