/* ==========================================================================
   Adfure — design tokens.  Increment I0 of _NIGHT-2026-09-19-LENS-design-system.md.

   TWO RULES GOVERN THIS FILE.

   1. THE LIGHT THEME MUST RENDER EXACTLY AS IT DID BEFORE THIS FILE EXISTED.
      Every light value below is a value app-v4.html already used. Where a value looks
      arbitrary (--ink3:#8a9, --warn-bg:rgba(220,120,0,.10)) it is because that literal was
      the FALLBACK of a var() the app never defined, so it is what the browser painted.
      Writing the fallback in as the token keeps the pixel and removes the undefined token.

   2. THE DARK THEME IS THE DEFAULT (owner's decision, 25.09.2026; until then it was a preview).
      It lives under :root[data-theme="dark"], which <html> carries from the first byte; light
      is chosen with ?theme=light or the row in Settings, remembered in localStorage 'adf_theme'
      and applied before first paint by the small script in <head>. The dark set is screen-only:
      print always resolves the light values, because what the app prints is paper.
      Its values are adfure.com's: near-black surfaces, #25D9D9 accent.

   MEASURED CONTRAST OF THE DARK SET (WCAG, computed 2026-09-20, not estimated)
      ink   #EEF4F7 on surface #0B1018 .. 17.17:1   (required >= 7)
      ink-2 #AEBECB on surface .......... 10.01:1
      mut   #7C8B98 on surface ...........  5.45:1  (required >= 4.5)
      accent#25D9D9 on surface .......... 10.90:1   (required >= 4.5)
      accent-d #0FB5B5 on surface ........  7.53:1
      ok / warn / bad / info on surface .. 11.34 / 10.75 / 6.87 / 8.42:1
      on-accent #001C22 on accent ....... 10.6:1

   THE SIX LIGHT VALUES THAT DID MOVE (25.09.2026, Stage A "text meets AA in both themes").
   Rule 1 held until a light value itself failed WCAG AA for the text drawn with it:
      --c-mut   #90a0b0 -> #5e7184  (-50/-47/-44)  2.42:1 -> 4.54:1 on --c-accent-soft, the
                darkest surface the grey captions sit on (table heads, word counts, "ТЕНДЕНЦИЯ").
                #64748B, the fix first written here, is 4.29:1 on that surface, so it was not enough.
      --c-mut-5 #6a7b87 -> #61707b  (-9/-11/-12)    3.89:1 -> 4.54:1 on --c-wash-3 (the grey
                source-state caption and its neutral chip).
      --c-ok-ink-2   #0e9b6e -> #0b7e5a  (-3/-29/-20)  3.19:1 -> 4.57:1 on --c-ok-soft-2 (the green
                     badges and chips: .ok-b .act-b .q-ok .chip.ok)
      --c-warn-ink-2 #a96f0a -> #976309  (-18/-12/-1)  3.78:1 -> 4.58:1 on --c-warn-soft (.warn-b, .q-avg,
                     the "soon" and "learning" chips, the anomaly chip, the unclear test verdict)
      --c-bad-ink-2  #cf3a3a -> #cb3131  (-4/-9/-9)    4.26:1 -> 4.57:1 on --c-bad-soft (.bad-b, .q-bad,
                     .chip.no, .mockwarn, the "now" chip, the failed test verdict, the declining trend word)
      --c-ok-ink-4   #0f8a5f -> #0e8159  (-1/-9/-6)    4.08:1 -> 4.57:1 on --c-bg (two "saved" words)
   Every one is a TEXT role and every use of it is words, so nothing but words moved.
   All six are the same hue, only darker. app/gates/w6-contrast.test.mjs recomputes every text
   role on the surface it is used on, in both themes, from the values below.

   NAMING. --c-* are colour ROLES. The ramps (-2, -3, ...) exist because the app carries 194
   distinct colour literals with no system; each ramp step is one literal the app really uses,
   kept exactly, so that a LATER wave can merge them in light without touching dark again.
   The old variable names (--pri, --ink, --card, ...) are kept at the bottom as ALIASES so no
   existing rule in app-v4.html has to change.
   ========================================================================== */

:root{

  /* ---- type ------------------------------------------------------------ */
  --font-sans:'Plus Jakarta Sans','Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",monospace;

  --t-hero:48px;  --t-hero-lh:1.0;
  --t-h1:28px;    --t-h1-lh:1.15;
  --t-h2:20px;    --t-h2-lh:1.25;
  --t-h3:16px;    --t-h3-lh:1.35;
  --t-body:14px;  --t-body-lh:1.55;
  --t-small:13px; --t-small-lh:1.5;
  --t-label:11px; --t-label-lh:1.2;

  /* ---- spacing --------------------------------------------------------- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;

  /* ---- radii ----------------------------------------------------------- */
  /* the spec asks for --r-lg:22px; the app's --r-lg is 20px and 100+ rules use it, so 22px
     lives as --r-xl and --r-lg keeps the shipped 20px until a wave is allowed to change it. */
  --r-sm:8px; --r-md:14px; --r-xl:22px; --r-pill:999px;

  /* ---- motion ---------------------------------------------------------- */
  --ease:cubic-bezier(.32,.72,0,1); --d-1:120ms; --d-2:200ms; --d-3:320ms;

  /* ---- layers ---------------------------------------------------------- */
  --z-sticky:10; --z-menu:20; --z-drawer:30; --z-dialog:40; --z-toast:50;

  /* ---- surfaces -------------------------------------------------------- */
  --c-bg:#F4F8FB;
  --c-bg-2:#f6f9fb;
  --c-surface:#FFFFFF;
  --c-surface-2:#f3fbfd;          /* near-white blue panel */
  --c-surface-3:#eaf9ff;          /* blue wash panel */
  --c-surface-4:#f8fdff;
  --c-surface-glass:#fffffff5;    /* the sticky top bar */
  --c-wash:#eef2f7;               /* neutral grey wash */
  --c-wash-2:#e5e7eb;

  /* ---- lines ----------------------------------------------------------- */
  --c-line:#E3ECF2;
  --c-line-2:#eef2f7;
  --c-line-3:#d8dee6;
  --c-line-4:#e6ebf1;
  --c-line-strong:#dbe4ea;

  /* ---- ink ------------------------------------------------------------- */
  --c-ink:#13243a;
  --c-ink-2:#5a6b80;
  --c-ink-3:#475569;
  --c-ink-max:#050505;
  --c-mut:#5e7184;                /* was #90a0b0 (2.68:1 on white) — see the note at the top */
  --c-mut-2:#65676b;

  /* ---- accent ---------------------------------------------------------- */
  --c-accent:#0088b9;
  --c-accent-2:#07add4;
  --c-accent-d:#016a90;
  --c-accent-d2:#1a6a90;
  --c-on-accent:#FFFFFF;          /* text that sits ON the teal button / chip */
  --c-on-dark:#FFFFFF;            /* text on a panel that is dark in BOTH themes */
  --c-on-dark-2:#eaf9ff;
  --c-on-dark-3:#cdeaf6;
  --c-on-dark-mut:#9cc8da;
  --c-accent-soft:#EAF5FA;
  --c-accent-soft-2:#DEF1F8;
  --c-accent-soft-3:#e3f2f9;
  --c-accent-line:#cfe9f4;
  --c-accent-line-2:#bfe4f0;
  --c-accent-line-3:#c7e0f0;

  /* panels that are already dark in the light theme (hero cards, code blocks, previews) */
  --c-deep:#0a3a52;
  --c-deep-2:#004f7c;
  --c-deep-3:#003f5e;
  --c-deep-4:#015a82;
  --c-deep-5:#0b4f66;
  --c-panel-dark:#0d2233;
  --c-panel-dark-2:#23253c;
  --c-panel-dark-3:#191a2e;
  --c-panel-dark-4:#0f172a;

  /* ---- ok -------------------------------------------------------------- */
  --c-ok:#12B886;
  --c-ok-ink:#12805c;
  --c-ok-ink-2:#0b7e5a;           /* was #0e9b6e (3.19:1 on --c-ok-soft-2) — see the note at the top */
  --c-ok-ink-3:#0a7d4f;
  --c-ok-soft:#ecfdf5;
  --c-ok-soft-2:#e3f8f0;
  --c-ok-soft-3:#eafaef;
  --c-ok-line:#c7f0dd;
  --c-ok-line-2:#bfead2;
  --c-ok-line-3:#bfe6cb;

  /* ---- warn ------------------------------------------------------------ */
  --c-warn:#F08C00;
  --c-warn-ink:#8a5a00;
  --c-warn-ink-2:#976309;         /* was #a96f0a (3.78:1 on --c-warn-soft) — see the note at the top */
  --c-warn-soft:#fcf1df;
  --c-warn-soft-2:#fff8e6;
  --c-warn-soft-3:#fff8ec;
  --c-warn-line:#f0d890;
  --c-warn-line-2:#f6e6c8;
  --c-warn-line-3:#f0e2c2;
  --c-warn-line-4:#f0c36d;

  /* ---- bad ------------------------------------------------------------- */
  --c-bad:#E5484D;
  --c-bad-ink:#b42318;
  --c-bad-ink-2:#cb3131;          /* was #cf3a3a (4.26:1 on --c-bad-soft) — see the note at the top */
  --c-bad-ink-3:#991b1b;
  --c-bad-ink-4:#a33;
  --c-bad-soft:#fdecec;
  --c-bad-soft-2:#fef6f6;
  --c-bad-soft-3:#fecaca;
  --c-bad-line:#f3c9c9;
  --c-bad-line-2:#e6b8b8;

  /* ---- info ------------------------------------------------------------ */
  --c-info:#5b3fa8;
  --c-info-soft:#efeafb;
  --c-info-line:#a98fe0;

  /* ---- the rest of the ramps, added when I1 found the literals that were blocking whole rules ----
     A rule is tokenised all at once or not at all, so one unnamed literal kept its neighbours literal
     too. These are the ones that were in the way. Each light value is exactly what the app already drew.
     The -ink steps are TEXT and go LIGHT in dark; the -panel steps are SURFACES and stay dark in both. */
  --c-accent-ink:#0b4f66;
  --c-accent-ink-2:#0b3b52;
  --c-accent-line-4:#bfe3e5;
  --c-accent-soft-4:#eef7ff;
  --c-accent-soft-5:#eef7fb;
  --c-mut-3:#8199ab;
  --c-mut-4:#5c6178;
  --c-on-dark-4:#6fd0ec;
  --c-ok-ink-4:#0e8159;           /* was #0f8a5f (4.08:1 on --c-bg) — see the note at the top */
  --c-ok-ink-5:#1a8a5a;
  --c-ok-ink-6:#065f46;
  --c-ok-soft-4:#eefaf2;
  --c-ok-soft-5:#d1fae5;
  --c-warn-ink-3:#7a4f00;
  --c-warn-ink-4:#92400e;
  --c-warn-soft-4:#fffaf0;
  --c-warn-soft-5:#fcf7ec;
  --c-warn-soft-6:#fef3c7;
  --c-bad-ink-5:#b4432f;
  --c-bad-on-dark:#ffb3b3;
  --c-bad-on-dark-2:#ffd9d9;
  --c-bad-panel:#5b1111;
  --c-bad-panel-2:#4a1616;
  --c-bad-soft-4:#fee2e2;
  --c-bad-line-3:#f3cfcf;
  --c-bad-line-4:#8a2a2a;
  --c-bad-line-5:#f0c2c2;
  --c-bad-line-6:#f3c9bd;
  --c-bad-soft-5:#fdecea;
  --c-bad-soft-6:#fff5f2;
  --c-mut-5:#61707b;              /* was #6a7b87 (4.10:1 on --c-bg) — see the note at the top */
  --c-ok-ink-7:#16794a;
  --c-ok-soft-6:#e4f7ec;
  --c-wash-3:#eef2f5;
  --c-surface-5:#f8fbfd;
  --c-panel-dark-5:#0b0b16;
  --c-surface-6:#f0fafd;
  /* Ink for a note that stays PAPER in both themes because a gate pins its amber background
     character-for-character. Same value in dark — it is dark text on a light amber card. */
  --c-on-paper-warn:#8a5a00;
  --c-accent-soft-6:#e6f7fb;
  /* 25.09.2026, dark became the default: three literals that stayed light in dark. The veil over a
     locked card (white at 55% turned a dark card grey under light words) and the pink "Spark" chip. */
  --c-veil:rgba(255,255,255,.55);
  --c-spark-soft:#FCE8F3;
  --c-spark-ink:#be185d;

  /* ---- chart series ---------------------------------------------------- */
  --c-series-1:#0088b9; --c-series-2:#5b3fa8; --c-series-3:#F08C00; --c-series-4:#12B886;
  --c-grid:#E3ECF2;

  /* ---- elevation ------------------------------------------------------- */
  --e-1:0 1px 2px rgba(19,36,58,.05);
  --e-2:0 3px 8px rgba(19,36,58,.06),0 18px 40px rgba(0,136,185,.12);
  --e-glow:0 6px 18px rgba(0,136,185,.28),inset 0 1px 0 rgba(255,255,255,.25);

  /* ---- brand gradient -------------------------------------------------- */
  --c-grad:linear-gradient(125deg,#004f7c,#0088b9 55%,#07add4);

  /* ======================================================================
     BRIDGE — the names app-v4.html already uses. Keeping them as aliases is
     what lets 936 existing references repaint themselves when the theme flips.
     ====================================================================== */
  --pri:var(--c-accent);
  --pri2:var(--c-accent-2);
  --pri-d:var(--c-accent-d);
  --ink:var(--c-ink);
  --ink2:var(--c-ink-2);
  --muted:var(--c-mut);
  /* --mut is a TYPO for --muted, 20 times, all in the campaign table (sortable column heads, "n/a" cells,
     the totals notes). It has never been defined, and `color:var(--mut)` with no fallback is invalid at
     computed-value time, which for an inherited property means the element simply inherits — so those
     cells have always been drawing in --ink, not in grey. `inherit` reproduces that to the pixel and also
     reads correctly in dark. Changing them to real muted grey is a VISIBLE change to the light theme and
     belongs to the wave that is allowed to make one. */
  --mut:inherit;
  --ink3:#8a9;                         /* the shipped var(--ink3,#8a9) fallback — kept to the pixel */
  --bg:var(--c-bg);
  --bg2:var(--c-bg-2);
  --card:var(--c-surface);
  --line:var(--c-line);
  --soft:var(--c-accent-soft);
  --soft2:var(--c-accent-soft-2);
  --ok:var(--c-ok);
  --warn:var(--c-warn);
  --bad:var(--c-bad);
  --warn-bg:rgba(220,120,0,.10);       /* the shipped var(--warn-bg,...) fallback */
  --grad:var(--c-grad);
  --sh-sm:var(--e-1);
  --sh:var(--e-2);
  --r:16px;
  --r-lg:20px;
  --fm:var(--font-mono);
}

/* ==========================================================================
   DARK — the default since 25.09.2026 (<html data-theme="dark">; light is ?theme=light or the
   row in Settings). Values are adfure.com's.
   SCREEN ONLY. Printing is paper: the scored audit and the branded report are printed from
   inside the app, and some of what they print (the offer head's card, its words) still reads
   bridge names like --card and --ink. Under @media screen the dark set simply does not exist
   for print, so every token resolves its light value on paper, whatever the screen shows.
   ========================================================================== */
@media screen{
:root[data-theme="dark"]{
  color-scheme:dark;
  background:#04060A;

  --c-bg:#04060A;
  --c-bg-2:#070A10;
  --c-surface:#0B1018;
  --c-surface-2:#101722;
  --c-surface-3:#0E1622;
  --c-surface-4:#0C121B;
  --c-surface-glass:rgba(11,16,24,.94);
  --c-wash:#0D131C;
  --c-wash-2:#131A24;

  --c-line:rgba(255,255,255,.09);
  --c-line-2:rgba(255,255,255,.055);
  --c-line-3:rgba(174,190,203,.34);
  --c-line-4:rgba(255,255,255,.075);
  --c-line-strong:rgba(174,190,203,.28);

  --c-ink:#EEF4F7;
  --c-ink-2:#AEBECB;
  --c-ink-3:#9FB0BE;
  --c-ink-max:#F7FBFD;
  --c-mut:#7C8B98;
  --c-mut-2:#8B97A3;

  --c-accent:#25D9D9;
  --c-accent-2:#5FE6E6;
  --c-accent-d:#0FB5B5;
  --c-accent-d2:#12A7A7;
  --c-on-accent:#001C22;
  --c-on-dark:#EEF4F7;
  --c-on-dark-2:#DCEEF4;
  --c-on-dark-3:#B9DDE8;
  --c-on-dark-mut:#8FB6C6;
  --c-accent-soft:rgba(37,217,217,.10);
  --c-accent-soft-2:rgba(37,217,217,.16);
  --c-accent-soft-3:rgba(37,217,217,.13);
  --c-accent-line:rgba(37,217,217,.28);
  --c-accent-line-2:rgba(37,217,217,.34);
  --c-accent-line-3:rgba(37,217,217,.24);

  --c-deep:#062A34;
  --c-deep-2:#05303E;
  --c-deep-3:#042634;
  --c-deep-4:#073B49;
  --c-deep-5:#08333F;
  --c-panel-dark:#0A1420;
  --c-panel-dark-2:#191B2C;
  --c-panel-dark-3:#131426;
  --c-panel-dark-4:#0B1220;

  --c-ok:#33E29A;
  --c-ok-ink:#57E9AE;
  --c-ok-ink-2:#43E4A2;
  --c-ok-ink-3:#6BEDBB;
  --c-ok-soft:rgba(51,226,154,.08);
  --c-ok-soft-2:rgba(51,226,154,.12);
  --c-ok-soft-3:rgba(51,226,154,.10);
  --c-ok-line:rgba(51,226,154,.30);
  --c-ok-line-2:rgba(51,226,154,.36);
  --c-ok-line-3:rgba(51,226,154,.26);

  --c-warn:#F5B84B;
  --c-warn-ink:#F8C86E;
  --c-warn-ink-2:#F5B84B;
  --c-warn-soft:rgba(245,184,75,.10);
  --c-warn-soft-2:rgba(245,184,75,.08);
  --c-warn-soft-3:rgba(245,184,75,.07);
  --c-warn-line:rgba(245,184,75,.30);
  --c-warn-line-2:rgba(245,184,75,.24);
  --c-warn-line-3:rgba(245,184,75,.26);
  --c-warn-line-4:rgba(245,184,75,.40);

  --c-bad:#FF6B6B;
  --c-bad-ink:#FF8B8B;
  --c-bad-ink-2:#FF7A7A;
  --c-bad-ink-3:#FF9A9A;
  --c-bad-ink-4:#FF8080;
  --c-bad-soft:rgba(255,107,107,.10);
  --c-bad-soft-2:rgba(255,107,107,.07);
  --c-bad-soft-3:rgba(255,107,107,.20);
  --c-bad-line:rgba(255,107,107,.32);
  --c-bad-line-2:rgba(255,107,107,.38);

  --c-info:#9AA6FF;
  --c-info-soft:rgba(110,123,255,.12);
  --c-info-line:rgba(110,123,255,.30);

  --c-accent-ink:#7FE3E3;
  --c-accent-ink-2:#8FE8E8;
  --c-accent-line-4:rgba(37,217,217,.30);
  --c-accent-soft-4:rgba(37,217,217,.09);
  --c-accent-soft-5:rgba(37,217,217,.07);
  --c-mut-3:#8FA0AE;
  --c-mut-4:#9AA6B4;
  --c-on-dark-4:#6FD0EC;            /* already sits on a panel that is dark in both themes */
  --c-ok-ink-4:#4BE7A8;
  --c-ok-ink-5:#5CEAB2;
  --c-ok-ink-6:#7CEFC4;
  --c-ok-soft-4:rgba(51,226,154,.09);
  --c-ok-soft-5:rgba(51,226,154,.18);
  --c-warn-ink-3:#F9CE80;
  --c-warn-ink-4:#F6C264;
  --c-warn-soft-4:rgba(245,184,75,.06);
  --c-warn-soft-5:rgba(245,184,75,.09);
  --c-warn-soft-6:rgba(245,184,75,.18);
  --c-bad-ink-5:#FF9478;
  --c-bad-on-dark:#FFB3B3;
  --c-bad-on-dark-2:#FFD9D9;
  --c-bad-panel:#3A0E0E;
  --c-bad-panel-2:#310F0F;
  --c-bad-soft-4:rgba(255,107,107,.14);
  --c-bad-line-3:rgba(255,107,107,.30);
  --c-bad-line-4:rgba(255,107,107,.45);
  --c-bad-line-5:rgba(255,107,107,.34);
  --c-bad-line-6:rgba(255,107,107,.28);
  --c-bad-soft-5:rgba(255,107,107,.11);
  --c-bad-soft-6:rgba(255,107,107,.09);
  --c-mut-5:#93A2AE;
  --c-ok-ink-7:#4FE8AC;
  --c-ok-soft-6:rgba(51,226,154,.11);
  --c-wash-3:#0D131C;
  --c-surface-5:#0C121B;
  --c-panel-dark-5:#08080F;
  --c-surface-6:#0C1219;
  --c-on-paper-warn:#8a5a00;
  --c-accent-soft-6:rgba(37,217,217,.12);
  --c-veil:rgba(4,6,10,.62);
  --c-spark-soft:rgba(244,114,182,.14);
  --c-spark-ink:#F9A8D4;

  --c-series-1:#25D9D9; --c-series-2:#6E7BFF; --c-series-3:#F5B84B; --c-series-4:#33E29A;
  --c-grid:rgba(255,255,255,.06);

  --e-1:inset 0 1px 0 rgba(255,255,255,.05);
  --e-2:0 24px 60px -24px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05);
  --e-glow:0 8px 24px -8px rgba(37,217,217,.55),inset 0 1px 0 rgba(255,255,255,.25);

  --c-grad:linear-gradient(125deg,#0FB5B5,#25D9D9 55%,#5FE6E6);

  /* the bridge names whose light value is a var() fallback follow the roles in dark. --mut stays `inherit`
     in both themes: it is the typo described above and must keep behaving the same way. */
  --ink3:var(--c-mut);
  --warn-bg:var(--c-warn-soft);
}
}

/* phone: the spec's "nothing under 16px on the first screen" rule. Only --t-* are affected,
   and nothing in app-v4.html reads them yet, so this changes no shipped pixel today. */
@media(max-width:600px){
  :root{--t-hero:40px;--t-h1:24px;--t-h2:20px;--t-h3:17px;--t-body:16px;--t-small:16px}
}