/* ==========================================================================
   Skynet UI palettes for the v2 pages.

   THE ONE COPY. /dashboard/v2, /admin-panel/v2, /leaderboard/v2 and /v2 each
   used to carry an identical `[data-theme="skynet"]` block, with a comment in
   all four asking the next person to keep them in step. Six themes would have
   made that twenty-four blocks, so the colour tokens live here and the page
   stylesheets keep only their own layout variables.

   Every palette was generated with Skynet UI's make_theme tool from one accent,
   not mixed by hand, and each clears the three checks that tool reports: body
   text on background >= 4.5:1, muted text on surface >= 4.5:1, and white on
   primary >= 3:1. That last one is not cosmetic — the v2 stylesheets carry
   about two dozen hardcoded `#fff` labels sitting on primary fills, so an
   accent that fails it is unreadable.

   TWO SETS, NOT ONE SET INVERTED. The light palettes below are not the dark
   ones with their tokens flipped: an accent picked to carry a dark page is
   usually thin on a white one and the other way round, so each mode has its
   own accent at its own lightness (Skynet is #9333ea on dark, #7e22ce on
   light). They pair by name in the picker, which groups them under a Dark and
   a Light heading; nothing here is shared between the two.

   themeRegistry.js is the list of what exists; npm run test:themes fails if
   this file and that list disagree, and checks each block's `color-scheme`
   against the mode the registry claims.
   ========================================================================== */

/* --- Skynet — the original purple. #9333ea, white on primary 5.38:1 ------- */
[data-theme="skynet"] {
  color-scheme: dark;
  --sk-bg: #121023;
  --sk-surface: #1a1a34;
  --sk-surface-2: #222243;
  --sk-border: #292946;
  --sk-border-2: #363559;
  --sk-text: #e2e8f0;
  --sk-text-2: #b6c2d4;
  --sk-muted: #94a3b8;
  --sk-faint: #64748b;
  --sk-primary: #9333ea;
  --sk-primary-hover: #a352ed;
  --sk-primary-soft: rgba(147, 51, 234, 0.15);
  --sk-primary-text: #c48ff3;
  --sk-success: #34d399;
  --sk-success-soft: rgba(52, 211, 153, 0.15);
  --sk-success-text: #7be2bd;
  --sk-warning: #fbbf24;
  --sk-warning-soft: rgba(251, 191, 36, 0.15);
  --sk-warning-text: #fcd571;
  --sk-danger: #f87171;
  --sk-danger-hover: #fb8f8f;
  --sk-danger-soft: rgba(248, 113, 113, 0.15);
  --sk-danger-text: #faa3a3;
  --sk-info: #38bdf8;
  --sk-info-soft: rgba(56, 189, 248, 0.15);
  --sk-info-text: #7ed4fa;
  --sk-font: "Inter", system-ui, "Segoe UI", sans-serif;
}

/* --- Azure — cool blue. #2563eb, white on primary 5.17:1 ----------------- */
[data-theme="skynet-azure"] {
  color-scheme: dark;
  --sk-bg: #0c1323;
  --sk-surface: #121d34;
  --sk-surface-2: #182644;
  --sk-border: #1f2d46;
  --sk-border-2: #293a59;
  --sk-text: #e2e8f0;
  --sk-text-2: #b6c2d4;
  --sk-muted: #94a3b8;
  --sk-faint: #64748b;
  --sk-primary: #2563eb;
  --sk-primary-hover: #467aee;
  --sk-primary-soft: rgba(37, 99, 235, 0.15);
  --sk-primary-text: #87a9f4;
  --sk-success: #34d399;
  --sk-success-soft: rgba(52, 211, 153, 0.15);
  --sk-success-text: #7be2bd;
  --sk-warning: #fbbf24;
  --sk-warning-soft: rgba(251, 191, 36, 0.15);
  --sk-warning-text: #fcd571;
  --sk-danger: #f87171;
  --sk-danger-hover: #f98c8c;
  --sk-danger-soft: rgba(248, 113, 113, 0.15);
  --sk-danger-text: #faa3a3;
  --sk-info: #38bdf8;
  --sk-info-soft: rgba(56, 189, 248, 0.15);
  --sk-info-text: #7ed4fa;
  --sk-font: "Inter", system-ui, "Segoe UI", sans-serif;
}

/* --- Teal — deep cyan. #0e7490, white on primary 5.36:1 ------------------ */
[data-theme="skynet-teal"] {
  color-scheme: dark;
  --sk-bg: #0a141d;
  --sk-surface: #111e2d;
  --sk-surface-2: #16283b;
  --sk-border: #1d2f3e;
  --sk-border-2: #273c4f;
  --sk-text: #e2e8f0;
  --sk-text-2: #b6c2d4;
  --sk-muted: #94a3b8;
  --sk-faint: #64748b;
  --sk-primary: #0e7490;
  --sk-primary-hover: #3289a1;
  --sk-primary-soft: rgba(14, 116, 144, 0.15);
  --sk-primary-text: #7ab3c2;
  --sk-success: #34d399;
  --sk-success-soft: rgba(52, 211, 153, 0.15);
  --sk-success-text: #7be2bd;
  --sk-warning: #fbbf24;
  --sk-warning-soft: rgba(251, 191, 36, 0.15);
  --sk-warning-text: #fcd571;
  --sk-danger: #f87171;
  --sk-danger-hover: #fb8f8f;
  --sk-danger-soft: rgba(248, 113, 113, 0.15);
  --sk-danger-text: #faa3a3;
  --sk-info: #38bdf8;
  --sk-info-soft: rgba(56, 189, 248, 0.15);
  --sk-info-text: #7ed4fa;
  --sk-font: "Inter", system-ui, "Segoe UI", sans-serif;
}

/* --- Emerald — green. #04805a, white on primary 4.95:1 ------------------- */
/* #10b981 was the first pick and failed at 2.54:1, hence the darker shade. */
[data-theme="skynet-emerald"] {
  color-scheme: dark;
  --sk-bg: #0a151a;
  --sk-surface: #101f2a;
  --sk-surface-2: #152937;
  --sk-border: #1c3039;
  --sk-border-2: #263d49;
  --sk-text: #e2e8f0;
  --sk-text-2: #b6c2d4;
  --sk-muted: #94a3b8;
  --sk-faint: #64748b;
  --sk-primary: #04805a;
  --sk-primary-hover: #2a9373;
  --sk-primary-soft: rgba(4, 128, 90, 0.15);
  --sk-primary-text: #75b9a4;
  --sk-success: #34d399;
  --sk-success-soft: rgba(52, 211, 153, 0.15);
  --sk-success-text: #7be2bd;
  --sk-warning: #fbbf24;
  --sk-warning-soft: rgba(251, 191, 36, 0.15);
  --sk-warning-text: #fcd571;
  --sk-danger: #f87171;
  --sk-danger-hover: #f98c8c;
  --sk-danger-soft: rgba(248, 113, 113, 0.15);
  --sk-danger-text: #faa3a3;
  --sk-info: #38bdf8;
  --sk-info-soft: rgba(56, 189, 248, 0.15);
  --sk-info-text: #7ed4fa;
  --sk-font: "Inter", system-ui, "Segoe UI", sans-serif;
}

/* --- Amber — warm bronze. #b45309, white on primary 5.02:1 --------------- */
[data-theme="skynet-amber"] {
  color-scheme: dark;
  --sk-bg: #141215;
  --sk-surface: #1c1c24;
  --sk-surface-2: #25252f;
  --sk-border: #2c2c32;
  --sk-border-2: #393840;
  --sk-text: #e2e8f0;
  --sk-text-2: #b6c2d4;
  --sk-muted: #94a3b8;
  --sk-faint: #64748b;
  --sk-primary: #b45309;
  --sk-primary-hover: #bf6d2e;
  --sk-primary-soft: rgba(180, 83, 9, 0.15);
  --sk-primary-text: #d6a078;
  --sk-success: #34d399;
  --sk-success-soft: rgba(52, 211, 153, 0.15);
  --sk-success-text: #7be2bd;
  --sk-warning: #fbbf24;
  --sk-warning-soft: rgba(251, 191, 36, 0.15);
  --sk-warning-text: #fcd571;
  --sk-danger: #f87171;
  --sk-danger-hover: #fb8f8f;
  --sk-danger-soft: rgba(248, 113, 113, 0.15);
  --sk-danger-text: #faa3a3;
  --sk-info: #38bdf8;
  --sk-info-soft: rgba(56, 189, 248, 0.15);
  --sk-info-text: #7ed4fa;
  --sk-font: "Inter", system-ui, "Segoe UI", sans-serif;
}

/* --- Crimson — red. #dc2626, white on primary 4.83:1 --------------------- */
[data-theme="skynet-crimson"] {
  color-scheme: dark;
  --sk-bg: #170f17;
  --sk-surface: #1f1926;
  --sk-surface-2: #292132;
  --sk-border: #2f2835;
  --sk-border-2: #3e3343;
  --sk-text: #e2e8f0;
  --sk-text-2: #b6c2d4;
  --sk-muted: #94a3b8;
  --sk-faint: #64748b;
  --sk-primary: #dc2626;
  --sk-primary-hover: #e14747;
  --sk-primary-soft: rgba(220, 38, 38, 0.15);
  --sk-primary-text: #ec8888;
  --sk-success: #34d399;
  --sk-success-soft: rgba(52, 211, 153, 0.15);
  --sk-success-text: #7be2bd;
  --sk-warning: #fbbf24;
  --sk-warning-soft: rgba(251, 191, 36, 0.15);
  --sk-warning-text: #fcd571;
  /* Crimson's primary and the danger token are both red, and an earlier cut
     lightened danger to #fca5a5 to separate them. Measuring what the pages
     actually render showed that was the wrong trade: the v2 stylesheets put
     white labels on danger fills, and white on #fca5a5 is 1.90:1 — worse than
     any other palette here — while the separation it bought was only
     2.54:1 against 1.75:1 for the standard token. Readability of the label on
     a Delete button beats telling two reds apart, so this is back on the same
     footing as its siblings. The light twin solves the same problem the other
     way, by taking its ACCENT deeper (#881337) and leaving danger standard,
     which costs nothing — that option is not open here without changing an
     accent people have already chosen. */
  --sk-danger: #f87171;
  --sk-danger-hover: #f98c8c;
  --sk-danger-soft: rgba(248, 113, 113, 0.15);
  --sk-danger-text: #faa3a3;
  --sk-info: #38bdf8;
  --sk-info-soft: rgba(56, 189, 248, 0.15);
  --sk-info-text: #7ed4fa;
  --sk-font: "Inter", system-ui, "Segoe UI", sans-serif;
}

/* ==========================================================================
   LIGHT
   Generated the same way (make_theme, mode: light). Each block declares
   `color-scheme: light` so the browser paints form controls, scrollbars and
   the canvas behind the page for a light document — without it a light
   palette sits on a dark scrollbar and inputs render as dark boxes.

   THREE TOKENS ARE DARKER THAN make_theme RETURNED THEM, and deliberately.
   The generator checks its text colours against `--sk-surface`, which is pure
   white here; the pages put plenty of the same text on `--sk-bg`, which is
   not. Measured against every light background in this file:

     --sk-muted         #64748b  3.97:1  ->  #556070  5.32:1
     --sk-faint         #94a3b8  2.14:1  ->  #68758a  3.89:1
     --sk-warning-text  #a35905  4.39:1  ->  #8a4b04  5.67:1
     --sk-success-text  #117a38  4.02:1  ->  #0e6630  6.21:1

   And three FILLS are darker than it returned them, for the opposite reason:
   Skynet UI puts a white label on a filled button (`.sk-btn-success` is
   `background: var(--sk-success); color: #fff`), and white on the generated
   mid-tones does not clear the 4.5 that a 13px label needs.

     --sk-success       #16a34a  3.30:1  ->  #15803d  5.02:1   (white on it)
     --sk-warning       #d97706  3.19:1  ->  #b45309  5.02:1
     --sk-info          #0284c7  4.10:1  ->  #0369a1  5.93:1

   Their `-soft` tints move with them so a tinted badge still matches its
   fill. The dark palettes have the same problem in reverse — their semantic
   tokens are light accents meant to be read AS text — but that is a decision
   about what the pages put on a fill, not about a palette, and it is recorded
   in scripts/themes/contrast-baseline.json instead.

   (success-text was measured on a success CHIP, whose tinted fill is darker
   than the surface the generator checked it against.)

   Muted, warning-text and success-text now clear 4.5:1 wherever they land, which is what
   body-size text needs. Faint is meant to be faint and stays in the large-text
   band — the same band the dark palettes' faint sits in (3.84:1), so the two
   modes are consistent rather than one being quietly better than the other.
   scripts/themes/contrast-audit.js is what measures this.

   WHICH MEANS --sk-faint IS NOT A LABEL COLOUR. Staying in the 3:1 band is only
   safe for text that is actually large; at body size it misses 4.5:1 in both
   modes (3.56:1 on a dark surface, 3.94:1 on a light --sk-bg). The small
   structural labels that used to reach for it — sidebar group headings, the
   admin nav groups, the section captions, the sidebar footers — use --sk-muted
   instead, which clears the floor on every background in both modes. Faint is
   for de-emphasised prose sitting next to its own heading, and for non-text
   uses like dots and rules. Reach for --sk-muted when it is a label.
   ========================================================================== */

/* --- Skynet — the original purple, deepened for white. #7e22ce, 6.98:1 ---- */
[data-theme="skynet-light"] {
  color-scheme: light;
  --sk-bg: #eeeaf7;
  --sk-surface: #ffffff;
  --sk-surface-2: #e7e5f4;
  --sk-border: #dbd9ed;
  --sk-border-2: #c6c5df;
  --sk-text: #16202e;
  --sk-text-2: #3d4a5d;
  --sk-muted: #556070;
  --sk-faint: #68758a;
  --sk-primary: #7e22ce;
  --sk-primary-hover: #6b1daf;
  --sk-primary-soft: rgba(126, 34, 206, 0.12);
  --sk-primary-text: #581890;
  --sk-success: #15803d;
  --sk-success-soft: rgba(21, 128, 61, 0.12);
  --sk-success-text: #0e6630;
  --sk-warning: #b45309;
  --sk-warning-soft: rgba(180, 83, 9, 0.12);
  --sk-warning-text: #8a4b04;
  --sk-danger: #dc2626;
  --sk-danger-hover: #b91c1c;
  --sk-danger-soft: rgba(220, 38, 38, 0.12);
  --sk-danger-text: #a51d1d;
  --sk-info: #0369a1;
  --sk-info-soft: rgba(3, 105, 161, 0.12);
  --sk-info-text: #026395;
  --sk-font: "Inter", system-ui, "Segoe UI", sans-serif;
}

/* --- Azure — cool blue. #1d4ed8, white on primary 6.70:1 ----------------- */
[data-theme="skynet-azure-light"] {
  color-scheme: light;
  --sk-bg: #e8edf8;
  --sk-surface: #ffffff;
  --sk-surface-2: #e1e7f4;
  --sk-border: #d4dced;
  --sk-border-2: #bdc9e0;
  --sk-text: #16202e;
  --sk-text-2: #3d4a5d;
  --sk-muted: #556070;
  --sk-faint: #68758a;
  --sk-primary: #1d4ed8;
  --sk-primary-hover: #1942b8;
  --sk-primary-soft: rgba(29, 78, 216, 0.12);
  --sk-primary-text: #143797;
  --sk-success: #15803d;
  --sk-success-soft: rgba(21, 128, 61, 0.12);
  --sk-success-text: #0e6630;
  --sk-warning: #b45309;
  --sk-warning-soft: rgba(180, 83, 9, 0.12);
  --sk-warning-text: #8a4b04;
  --sk-danger: #dc2626;
  --sk-danger-hover: #b91c1c;
  --sk-danger-soft: rgba(220, 38, 38, 0.12);
  --sk-danger-text: #a51d1d;
  --sk-info: #0369a1;
  --sk-info-soft: rgba(3, 105, 161, 0.12);
  --sk-info-text: #026395;
  --sk-font: "Inter", system-ui, "Segoe UI", sans-serif;
}

/* --- Teal — deep cyan. #0f766e, white on primary 5.47:1 ------------------ */
[data-theme="skynet-teal-light"] {
  color-scheme: light;
  --sk-bg: #e7eff2;
  --sk-surface: #ffffff;
  --sk-surface-2: #e1eaee;
  --sk-border: #d3dfe6;
  --sk-border-2: #bcccd7;
  --sk-text: #16202e;
  --sk-text-2: #3d4a5d;
  --sk-muted: #556070;
  --sk-faint: #68758a;
  --sk-primary: #0f766e;
  --sk-primary-hover: #0d645e;
  --sk-primary-soft: rgba(15, 118, 110, 0.12);
  --sk-primary-text: #0b534d;
  --sk-success: #15803d;
  --sk-success-soft: rgba(21, 128, 61, 0.12);
  --sk-success-text: #0e6630;
  --sk-warning: #b45309;
  --sk-warning-soft: rgba(180, 83, 9, 0.12);
  --sk-warning-text: #8a4b04;
  --sk-danger: #dc2626;
  --sk-danger-hover: #b91c1c;
  --sk-danger-soft: rgba(220, 38, 38, 0.12);
  --sk-danger-text: #a51d1d;
  --sk-info: #0369a1;
  --sk-info-soft: rgba(3, 105, 161, 0.12);
  --sk-info-text: #026395;
  --sk-font: "Inter", system-ui, "Segoe UI", sans-serif;
}

/* --- Emerald — green. #047857, white on primary 5.48:1 ------------------- */
[data-theme="skynet-emerald-light"] {
  color-scheme: light;
  --sk-bg: #e7eff0;
  --sk-surface: #ffffff;
  --sk-surface-2: #e0eaec;
  --sk-border: #d2dfe4;
  --sk-border-2: #bbcdd5;
  --sk-text: #16202e;
  --sk-text-2: #3d4a5d;
  --sk-muted: #556070;
  --sk-faint: #68758a;
  --sk-primary: #047857;
  --sk-primary-hover: #03664a;
  --sk-primary-soft: rgba(4, 120, 87, 0.12);
  --sk-primary-text: #03543d;
  --sk-success: #15803d;
  --sk-success-soft: rgba(21, 128, 61, 0.12);
  --sk-success-text: #0e6630;
  --sk-warning: #b45309;
  --sk-warning-soft: rgba(180, 83, 9, 0.12);
  --sk-warning-text: #8a4b04;
  --sk-danger: #dc2626;
  --sk-danger-hover: #b91c1c;
  --sk-danger-soft: rgba(220, 38, 38, 0.12);
  --sk-danger-text: #a51d1d;
  --sk-info: #0369a1;
  --sk-info-soft: rgba(3, 105, 161, 0.12);
  --sk-info-text: #026395;
  --sk-font: "Inter", system-ui, "Segoe UI", sans-serif;
}

/* --- Amber — warm bronze. #a16207, white on primary 4.92:1 --------------- */
[data-theme="skynet-amber-light"] {
  color-scheme: light;
  --sk-bg: #f0eeeb;
  --sk-surface: #ffffff;
  --sk-surface-2: #e9e8e8;
  --sk-border: #dddedf;
  --sk-border-2: #c9cbcd;
  --sk-text: #16202e;
  --sk-text-2: #3d4a5d;
  --sk-muted: #556070;
  --sk-faint: #68758a;
  --sk-primary: #a16207;
  --sk-primary-hover: #895306;
  --sk-primary-soft: rgba(161, 98, 7, 0.12);
  --sk-primary-text: #714505;
  --sk-success: #15803d;
  --sk-success-soft: rgba(21, 128, 61, 0.12);
  --sk-success-text: #0e6630;
  --sk-warning: #b45309;
  --sk-warning-soft: rgba(180, 83, 9, 0.12);
  --sk-warning-text: #8a4b04;
  --sk-danger: #dc2626;
  --sk-danger-hover: #b91c1c;
  --sk-danger-soft: rgba(220, 38, 38, 0.12);
  --sk-danger-text: #a51d1d;
  --sk-info: #0369a1;
  --sk-info-soft: rgba(3, 105, 161, 0.12);
  --sk-info-text: #026395;
  --sk-font: "Inter", system-ui, "Segoe UI", sans-serif;
}

/* --- Crimson — deep wine. #881337, white on primary 9.57:1 ---------------
   Its dark twin has the opposite problem and solves it the opposite way: on
   dark, primary IS #dc2626 and the danger token had to be lightened away from
   it. Here the accent is taken deeper instead, which leaves the standard red
   danger 1.98:1 clear of it — better separation than the dark pair manages
   (2.54:1 the other way, from a much lighter danger). Darkening danger rather
   than the accent was measured first and does not work: #991b1b against
   #be123c is 1.32:1, which is no separation at all. */
[data-theme="skynet-crimson-light"] {
  color-scheme: light;
  --sk-bg: #eee9ee;
  --sk-surface: #ffffff;
  --sk-surface-2: #e8e4eb;
  --sk-border: #dcd8e2;
  --sk-border-2: #c7c4d2;
  --sk-text: #16202e;
  --sk-text-2: #3d4a5d;
  --sk-muted: #556070;
  --sk-faint: #68758a;
  --sk-primary: #881337;
  --sk-primary-hover: #74102f;
  --sk-primary-soft: rgba(136, 19, 55, 0.12);
  --sk-primary-text: #5f0d27;
  --sk-success: #15803d;
  --sk-success-soft: rgba(21, 128, 61, 0.12);
  --sk-success-text: #0e6630;
  --sk-warning: #b45309;
  --sk-warning-soft: rgba(180, 83, 9, 0.12);
  --sk-warning-text: #8a4b04;
  --sk-danger: #dc2626;
  --sk-danger-hover: #b91c1c;
  --sk-danger-soft: rgba(220, 38, 38, 0.12);
  --sk-danger-text: #a51d1d;
  --sk-info: #0369a1;
  --sk-info-soft: rgba(3, 105, 161, 0.12);
  --sk-info-text: #026395;
  --sk-font: "Inter", system-ui, "Segoe UI", sans-serif;
}