/* ============================================================================
   ISKEL THEME SYSTEM  —  7 palettes × light/dark = 14 visuals
   ============================================================================

   CANONICAL FILE. An identical copy lives at:
       apps/iskel_website/iskel_website/public/css/iskel-themes.css
       apps/iskel_desk/iskel_desk/public/css/iskel-themes.css
   Edit one, copy to the other. Neither app depends on the other being
   installed, which is why this is duplicated rather than cross-referenced.

   CONTRACT
   --------
   Palette :  <html data-ax-theme="aurora|ember|tide|nordic|carbon|royal|crimson">
   Mode    :  <html data-theme="light|dark">
   Default :  carbon / dark   (applied by the pre-paint script in each app)

   On the desk, `data-theme` is Frappe's own attribute — set `data-theme-mode`
   and Frappe's MutationObserver resolves `data-theme` for us. Never write
   `data-theme` directly there.

   NOTHING in this file styles a component. It only declares tokens.
   Component CSS must never name a colour directly — always a token.
   ============================================================================ */


/* ── Geometry, type & motion — identical across all 14 variants ──────────── */
:root {
  /* Spacing: 4px base. Replaces the ad-hoc values previously in use. */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;   --sp-6: 24px;   --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px;  --sp-16: 64px;  --sp-20: 80px; --sp-24: 96px;

  /* Radius: 6 steps replace the 15 ad-hoc radii previously in the codebase. */
  --r-xs:   4px;   /* chips, tiny swatches, inline code   */
  --r-sm:   8px;   /* buttons, inputs, nav links          */
  --r-md:  12px;   /* icon tiles, small cards, dropdowns  */
  --r-lg:  16px;   /* cards, panels, hero cards           */
  --r-xl:  24px;   /* large feature panels                */
  --r-pill: 999px; /* badges, eyebrow labels, avatars     */

  /* Borders: hairline + emphasis. The old 1.5px mix is gone. */
  --bw-1: 1px;
  --bw-2: 2px;

  /* ── Logo fill ────────────────────────────────────────────────────────
     The ISKEL wordmark is painted by masking the supplied artwork and
     filling it with a gradient, so the letterforms never change but the
     colour follows the palette.

     Two fills, because the logo lands on two kinds of ground:
       --ax-logo-grad       on page surfaces (--ax-bg / --ax-surface), which
                            flip with the mode
       --ax-logo-grad-hero  on the hero and the desk sidebar rail, which are
                            dark in BOTH modes — so this must stay bright even
                            while the page around it is light. Each light
                            palette overrides it with its own dark-mode
                            gradient; the dark blocks already are that. */
  --ax-logo-grad: var(--ax-brand-grad-ink);
  --ax-logo-grad-hero: var(--ax-brand-grad);

  /* Layout */
  --ax-navbar-h:   56px;
  --ax-content-max: 1200px;
  --ax-desk-max:   1440px;

  /* Type */
  --ax-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --ax-font-brand: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ax-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* ── Type scale ───────────────────────────────────────────────────────
     Fluid, so a component picks a step once and it reads correctly from a
     360px phone to a 1920px display without a media query of its own.

     This replaces 47 distinct hand-picked rem values that had accumulated
     across the stylesheet — sizes a fifth of a step apart, which is close
     enough to look accidental rather than intentional.

     Steps grow roughly on a minor third and open up towards the display
     end, where the jumps need to be larger to read as a deliberate
     hierarchy rather than a gradient. */
  --fs-2xs:  clamp(0.68rem, 0.66rem + 0.10vw, 0.72rem);  /* legal fine print, table micro-copy */
  --fs-xs:   clamp(0.75rem, 0.72rem + 0.14vw, 0.80rem);  /* eyebrows, badges, captions */
  --fs-sm:   clamp(0.82rem, 0.79rem + 0.16vw, 0.88rem);  /* secondary body, card copy */
  --fs-base: clamp(0.92rem, 0.89rem + 0.18vw, 1.00rem);  /* body */
  --fs-md:   clamp(1.02rem, 0.98rem + 0.22vw, 1.12rem);  /* lead paragraphs */
  --fs-lg:   clamp(1.14rem, 1.08rem + 0.30vw, 1.28rem);  /* card titles */
  --fs-xl:   clamp(1.30rem, 1.20rem + 0.48vw, 1.56rem);  /* minor headings */
  --fs-2xl:  clamp(1.55rem, 1.35rem + 0.95vw, 2.10rem);  /* h3, feature headings */
  --fs-3xl:  clamp(1.90rem, 1.55rem + 1.65vw, 2.85rem);  /* h2, section heads */
  --fs-4xl:  clamp(2.35rem, 1.80rem + 2.60vw, 3.75rem);  /* h1, page hero */
  --fs-5xl:  clamp(2.90rem, 2.00rem + 4.20vw, 5.00rem);  /* home hero */
  --fs-6xl:  clamp(3.60rem, 2.20rem + 6.50vw, 7.00rem);  /* display numerals */

  /* Line height. Tightens as size grows — display type set at body
     leading looks loose, body text set at display leading is unreadable. */
  --lh-none:    1;
  --lh-tight:   1.14;
  --lh-snug:    1.34;
  --lh-normal:  1.6;
  --lh-relaxed: 1.78;   /* long-form prose, policy pages */

  /* Tracking. Large type needs to be pulled in; small uppercase labels
     need to be opened out or they set as a block. */
  --ls-tighter: -0.035em;
  --ls-tight:   -0.022em;
  --ls-normal:  0;
  --ls-wide:    0.06em;
  --ls-wider:   0.13em;   /* uppercase eyebrows */

  /* Weight. Named, because "600" at a call site says nothing about why. */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-black:  800;

  /* Measure. Prose wider than this is tiring to read regardless of size. */
  --measure: 68ch;

  /* ── Elevation ────────────────────────────────────────────────────────
     --ax-elev-1 … --ax-elev-5 are declared per palette below, because the
     shadow has to carry the palette's hue (a violet theme casts a violet
     shadow, not a grey one) and because a dark surface needs several times
     the opacity of a light one for the same perceived lift.

     Each step is two stops: a tight contact shadow that anchors the
     element to the surface, and a wide ambient one that gives it height.
     A single-stop shadow is the usual reason a card looks pasted on.

     Use them as a hierarchy, not a decoration:
       1  resting card, input, table
       2  raised card, the default for anything interactive
       3  hover / focus lift
       4  dropdown, popover, sticky bar
       5  modal, dialog, cookie panel

     --ax-shadow / --ax-shadow-lg are the older two-step pair and remain
     for compatibility; new work should use the ramp. */

  /* Darkener for two-stop depth ramps (icon tiles, card headers). Mixing a
     hue toward this keeps a gradient reading as one colour with depth. */
  --ax-shade: #000000;

  /* Image scrim — always a dark veil regardless of palette, because it
     sits over photography, not over a themed surface. */
  --ax-scrim: rgba(9, 9, 11, 0.86);

  /* Motion */
  --ax-t-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --ax-t-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --ax-t-slow: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  --ax-t-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ══════════════════════════════════════════════════════════════════════════
   1 · MIDNIGHT AURORA        gradient — indigo → violet → cyan
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-ax-theme="aurora"] {
  --ax-bg:#ffffff; --ax-bg-alt:#f7f6fe; --ax-surface:#ffffff; --ax-surface-2:#f4f3fd;
  --ax-text:#14122b; --ax-text-muted:#5b5a7a;
  --ax-border:#e6e3f5; --ax-border-strong:#cfc9ec;
  --ax-primary:#5b46e8; --ax-primary-hover:#4a37d1; --ax-on-primary:#ffffff;
  --ax-link:#4a37d1; --ax-link-hover:#3f2eb8;
  --ax-accent-1:#7c3aed; --ax-accent-2:#06b6d4; --ax-accent-3:#4f46e5;
  --ax-hero-bg:linear-gradient(140deg,#312e81 0%,#5b21b6 46%,#0e7490 100%);
  --ax-hero-solid:#312e81;
  --ax-hero-text:#f5f3ff; --ax-hero-muted:#ddd8f8;
  --ax-brand-grad:linear-gradient(120deg,#6d28d9,#5b46e8 45%,#0891b2);
  --ax-brand-grad-ink:linear-gradient(120deg,#5b21b6,#4a37d1 45%,#0e7490);
  --ax-logo-grad-hero:linear-gradient(120deg,#a78bfa,#8b7cff 45%,#22d3ee);
  --ax-shadow:0 1px 2px rgba(49,46,129,.06), 0 10px 30px rgba(49,46,129,.09);
  --ax-shadow-lg:0 20px 55px rgba(49,46,129,.17);
  --ax-shadow-rgb:49,46,129;
  --ax-elev-1:0 1px 2px rgba(49,46,129,0.05), 0 1px 3px rgba(49,46,129,0.06);
  --ax-elev-2:0 2px 4px rgba(49,46,129,0.05), 0 6px 16px rgba(49,46,129,0.08);
  --ax-elev-3:0 4px 8px rgba(49,46,129,0.06), 0 12px 28px rgba(49,46,129,0.11);
  --ax-elev-4:0 8px 16px rgba(49,46,129,0.08), 0 24px 48px rgba(49,46,129,0.15);
  --ax-elev-5:0 12px 24px rgba(49,46,129,0.1), 0 40px 80px rgba(49,46,129,0.22);
  --ax-ring:rgba(91,70,232,.32); --ax-texture:rgba(91,70,232,.055);
  --ax-p1:#4338ca; --ax-p2:#7c3aed; --ax-p3:#c026d3; --ax-p4:#2563eb;
  --ax-p5:#0284c7; --ax-p6:#0891b2; --ax-p7:#0d9488;
}
:root[data-ax-theme="aurora"][data-theme="dark"] {
  --ax-bg:#0b0a1a; --ax-bg-alt:#12102a; --ax-surface:#171432; --ax-surface-2:#1f1b40;
  --ax-text:#ece9fb; --ax-text-muted:#a5a0c9;
  --ax-border:#2a2550; --ax-border-strong:#3d3670;
  --ax-primary:#8b7cff; --ax-primary-hover:#a394ff; --ax-on-primary:#0b0a1a;
  --ax-link:#a394ff; --ax-link-hover:#c4bcff;
  --ax-accent-1:#a78bfa; --ax-accent-2:#22d3ee; --ax-accent-3:#818cf8;
  --ax-hero-bg:linear-gradient(140deg,#1e1b4b 0%,#4c1d95 46%,#0e7490 100%);
  --ax-hero-solid:#1e1b4b;
  --ax-hero-text:#f5f3ff; --ax-hero-muted:#cdc6ec;
  --ax-brand-grad:linear-gradient(120deg,#a78bfa,#8b7cff 45%,#22d3ee);
  --ax-brand-grad-ink:linear-gradient(120deg,#a78bfa,#8b7cff 45%,#22d3ee);
  --ax-shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45);
  --ax-shadow-lg:0 20px 55px rgba(0,0,0,.6);
  --ax-shadow-rgb:0,0,0;
  --ax-elev-1:0 1px 2px rgba(0,0,0,0.22), 0 1px 3px rgba(0,0,0,0.26);
  --ax-elev-2:0 2px 4px rgba(0,0,0,0.26), 0 6px 16px rgba(0,0,0,0.34);
  --ax-elev-3:0 4px 8px rgba(0,0,0,0.3), 0 12px 28px rgba(0,0,0,0.45);
  --ax-elev-4:0 8px 16px rgba(0,0,0,0.36), 0 24px 48px rgba(0,0,0,0.55);
  --ax-elev-5:0 12px 24px rgba(0,0,0,0.42), 0 40px 80px rgba(0,0,0,0.68);
  --ax-ring:rgba(139,124,255,.4); --ax-texture:rgba(139,124,255,.07);
  --ax-p1:#818cf8; --ax-p2:#a78bfa; --ax-p3:#e879f9; --ax-p4:#60a5fa;
  --ax-p5:#38bdf8; --ax-p6:#22d3ee; --ax-p7:#2dd4bf;
}


/* ══════════════════════════════════════════════════════════════════════════
   2 · SOLAR EMBER            gradient — amber → coral → magenta
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-ax-theme="ember"] {
  --ax-bg:#fffdfa; --ax-bg-alt:#fff5ed; --ax-surface:#ffffff; --ax-surface-2:#fff1e6;
  --ax-text:#2b1710; --ax-text-muted:#7a5a4a;
  --ax-border:#f8e0cf; --ax-border-strong:#eec3a5;
  --ax-primary:#b83a08; --ax-primary-hover:#93300a; --ax-on-primary:#ffffff;
  --ax-link:#9a3412; --ax-link-hover:#7c2d12;
  --ax-accent-1:#f59e0b; --ax-accent-2:#f43f5e; --ax-accent-3:#d946ef;
  --ax-hero-bg:linear-gradient(140deg,#7c2d12 0%,#9f1239 52%,#86198f 100%);
  --ax-hero-solid:#7c2d12;
  --ax-hero-text:#fff7ed; --ax-hero-muted:#fbe3d3;
  --ax-brand-grad:linear-gradient(120deg,#f59e0b,#f43f5e 50%,#d946ef);
  --ax-brand-grad-ink:linear-gradient(120deg,#b45309,#be123c 50%,#a21caf);
  --ax-logo-grad-hero:linear-gradient(120deg,#fbbf24,#fb7185 50%,#e879f9);
  --ax-shadow:0 1px 2px rgba(124,45,18,.07), 0 10px 30px rgba(124,45,18,.10);
  --ax-shadow-lg:0 20px 55px rgba(124,45,18,.18);
  --ax-shadow-rgb:124,45,18;
  --ax-elev-1:0 1px 2px rgba(124,45,18,0.05), 0 1px 3px rgba(124,45,18,0.06);
  --ax-elev-2:0 2px 4px rgba(124,45,18,0.05), 0 6px 16px rgba(124,45,18,0.08);
  --ax-elev-3:0 4px 8px rgba(124,45,18,0.06), 0 12px 28px rgba(124,45,18,0.11);
  --ax-elev-4:0 8px 16px rgba(124,45,18,0.08), 0 24px 48px rgba(124,45,18,0.15);
  --ax-elev-5:0 12px 24px rgba(124,45,18,0.1), 0 40px 80px rgba(124,45,18,0.22);
  --ax-ring:rgba(217,72,15,.3); --ax-texture:rgba(217,72,15,.055);
  --ax-p1:#b45309; --ax-p2:#ea580c; --ax-p3:#dc2626; --ax-p4:#e11d48;
  --ax-p5:#db2777; --ax-p6:#c026d3; --ax-p7:#a16207;
}
:root[data-ax-theme="ember"][data-theme="dark"] {
  --ax-bg:#17100c; --ax-bg-alt:#1f1611; --ax-surface:#241a14; --ax-surface-2:#2e211a;
  --ax-text:#fdf0e6; --ax-text-muted:#c4a191;
  --ax-border:#3d2b21; --ax-border-strong:#573d2e;
  --ax-primary:#fb923c; --ax-primary-hover:#fdba74; --ax-on-primary:#17100c;
  --ax-link:#fdba74; --ax-link-hover:#fed7aa;
  --ax-accent-1:#fbbf24; --ax-accent-2:#fb7185; --ax-accent-3:#e879f9;
  --ax-hero-bg:linear-gradient(140deg,#431407 0%,#881337 52%,#701a75 100%);
  --ax-hero-solid:#431407;
  --ax-hero-text:#fff7ed; --ax-hero-muted:#f2d3c0;
  --ax-brand-grad:linear-gradient(120deg,#fbbf24,#fb7185 50%,#e879f9);
  --ax-brand-grad-ink:linear-gradient(120deg,#fbbf24,#fb7185 50%,#e879f9);
  --ax-shadow:0 1px 2px rgba(0,0,0,.42), 0 10px 30px rgba(0,0,0,.48);
  --ax-shadow-lg:0 20px 55px rgba(0,0,0,.62);
  --ax-shadow-rgb:0,0,0;
  --ax-elev-1:0 1px 2px rgba(0,0,0,0.22), 0 1px 3px rgba(0,0,0,0.26);
  --ax-elev-2:0 2px 4px rgba(0,0,0,0.26), 0 6px 16px rgba(0,0,0,0.34);
  --ax-elev-3:0 4px 8px rgba(0,0,0,0.3), 0 12px 28px rgba(0,0,0,0.45);
  --ax-elev-4:0 8px 16px rgba(0,0,0,0.36), 0 24px 48px rgba(0,0,0,0.55);
  --ax-elev-5:0 12px 24px rgba(0,0,0,0.42), 0 40px 80px rgba(0,0,0,0.68);
  --ax-ring:rgba(251,146,60,.38); --ax-texture:rgba(251,146,60,.07);
  --ax-p1:#fbbf24; --ax-p2:#fb923c; --ax-p3:#f87171; --ax-p4:#fb7185;
  --ax-p5:#f472b6; --ax-p6:#e879f9; --ax-p7:#eab308;
}


/* ══════════════════════════════════════════════════════════════════════════
   3 · EMERALD TIDE           gradient — teal → emerald → lime
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-ax-theme="tide"] {
  --ax-bg:#ffffff; --ax-bg-alt:#f0fdf6; --ax-surface:#ffffff; --ax-surface-2:#ecfdf3;
  --ax-text:#0a2118; --ax-text-muted:#4c6b5d;
  --ax-border:#d3f0e0; --ax-border-strong:#a7ddc0;
  --ax-primary:#0d7a55; --ax-primary-hover:#0a5f42; --ax-on-primary:#ffffff;
  --ax-link:#0a5f42; --ax-link-hover:#084c35;
  --ax-accent-1:#0d9488; --ax-accent-2:#10b981; --ax-accent-3:#65a30d;
  --ax-hero-bg:linear-gradient(140deg,#064e3b 0%,#065f46 50%,#3f6212 100%);
  --ax-hero-solid:#064e3b;
  --ax-hero-text:#ecfdf5; --ax-hero-muted:#e3f7ee;
  --ax-brand-grad:linear-gradient(120deg,#0d9488,#10b981 50%,#84cc16);
  --ax-brand-grad-ink:linear-gradient(120deg,#0f766e,#047857 50%,#4d7c0f);
  --ax-logo-grad-hero:linear-gradient(120deg,#2dd4bf,#34d399 50%,#a3e635);
  --ax-shadow:0 1px 2px rgba(6,78,59,.06), 0 10px 30px rgba(6,78,59,.09);
  --ax-shadow-lg:0 20px 55px rgba(6,78,59,.16);
  --ax-shadow-rgb:6,78,59;
  --ax-elev-1:0 1px 2px rgba(6,78,59,0.05), 0 1px 3px rgba(6,78,59,0.06);
  --ax-elev-2:0 2px 4px rgba(6,78,59,0.05), 0 6px 16px rgba(6,78,59,0.08);
  --ax-elev-3:0 4px 8px rgba(6,78,59,0.06), 0 12px 28px rgba(6,78,59,0.11);
  --ax-elev-4:0 8px 16px rgba(6,78,59,0.08), 0 24px 48px rgba(6,78,59,0.15);
  --ax-elev-5:0 12px 24px rgba(6,78,59,0.1), 0 40px 80px rgba(6,78,59,0.22);
  --ax-ring:rgba(13,122,85,.3); --ax-texture:rgba(13,122,85,.055);
  --ax-p1:#0f766e; --ax-p2:#047857; --ax-p3:#15803d; --ax-p4:#4d7c0f;
  --ax-p5:#0e7490; --ax-p6:#65a30d; --ax-p7:#166534;
}
:root[data-ax-theme="tide"][data-theme="dark"] {
  --ax-bg:#06140f; --ax-bg-alt:#0b1d16; --ax-surface:#0f261d; --ax-surface-2:#143026;
  --ax-text:#e3f9ee; --ax-text-muted:#93bda9;
  --ax-border:#1d4034; --ax-border-strong:#2c5a49;
  --ax-primary:#34d399; --ax-primary-hover:#6ee7b7; --ax-on-primary:#06140f;
  --ax-link:#6ee7b7; --ax-link-hover:#a7f3d0;
  --ax-accent-1:#2dd4bf; --ax-accent-2:#4ade80; --ax-accent-3:#a3e635;
  --ax-hero-bg:linear-gradient(140deg,#022c22 0%,#065f46 50%,#365314 100%);
  --ax-hero-solid:#022c22;
  --ax-hero-text:#ecfdf5; --ax-hero-muted:#ccf0dd;
  --ax-brand-grad:linear-gradient(120deg,#2dd4bf,#34d399 50%,#a3e635);
  --ax-brand-grad-ink:linear-gradient(120deg,#2dd4bf,#34d399 50%,#a3e635);
  --ax-shadow:0 1px 2px rgba(0,0,0,.42), 0 10px 30px rgba(0,0,0,.48);
  --ax-shadow-lg:0 20px 55px rgba(0,0,0,.62);
  --ax-shadow-rgb:0,0,0;
  --ax-elev-1:0 1px 2px rgba(0,0,0,0.22), 0 1px 3px rgba(0,0,0,0.26);
  --ax-elev-2:0 2px 4px rgba(0,0,0,0.26), 0 6px 16px rgba(0,0,0,0.34);
  --ax-elev-3:0 4px 8px rgba(0,0,0,0.3), 0 12px 28px rgba(0,0,0,0.45);
  --ax-elev-4:0 8px 16px rgba(0,0,0,0.36), 0 24px 48px rgba(0,0,0,0.55);
  --ax-elev-5:0 12px 24px rgba(0,0,0,0.42), 0 40px 80px rgba(0,0,0,0.68);
  --ax-ring:rgba(52,211,153,.35); --ax-texture:rgba(52,211,153,.07);
  --ax-p1:#2dd4bf; --ax-p2:#34d399; --ax-p3:#4ade80; --ax-p4:#a3e635;
  --ax-p5:#22d3ee; --ax-p6:#bef264; --ax-p7:#6ee7b7;
}


/* ══════════════════════════════════════════════════════════════════════════
   4 · NORDIC SLATE           contrast — graphite + blue / amber / rose
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-ax-theme="nordic"] {
  --ax-bg:#ffffff; --ax-bg-alt:#f1f5f9; --ax-surface:#ffffff; --ax-surface-2:#f8fafc;
  --ax-text:#0f172a; --ax-text-muted:#556478;
  --ax-border:#e2e8f0; --ax-border-strong:#cbd5e1;
  --ax-primary:#2563eb; --ax-primary-hover:#1d4ed8; --ax-on-primary:#ffffff;
  --ax-link:#1d4ed8; --ax-link-hover:#1e40af;
  --ax-accent-1:#f59e0b; --ax-accent-2:#f43f5e; --ax-accent-3:#0ea5e9;
  --ax-hero-bg:#0f172a; --ax-hero-text:#f8fafc; --ax-hero-muted:#94a3b8;
  --ax-hero-solid:#0f172a;
  --ax-brand-grad:linear-gradient(120deg,#2563eb,#0ea5e9);
  --ax-brand-grad-ink:linear-gradient(120deg,#1d4ed8,#0369a1);
  --ax-logo-grad-hero:linear-gradient(120deg,#60a5fa,#38bdf8);
  --ax-shadow:0 1px 2px rgba(15,23,42,.06), 0 10px 30px rgba(15,23,42,.08);
  --ax-shadow-lg:0 20px 55px rgba(15,23,42,.15);
  --ax-shadow-rgb:15,23,42;
  --ax-elev-1:0 1px 2px rgba(15,23,42,0.05), 0 1px 3px rgba(15,23,42,0.06);
  --ax-elev-2:0 2px 4px rgba(15,23,42,0.05), 0 6px 16px rgba(15,23,42,0.08);
  --ax-elev-3:0 4px 8px rgba(15,23,42,0.06), 0 12px 28px rgba(15,23,42,0.11);
  --ax-elev-4:0 8px 16px rgba(15,23,42,0.08), 0 24px 48px rgba(15,23,42,0.15);
  --ax-elev-5:0 12px 24px rgba(15,23,42,0.1), 0 40px 80px rgba(15,23,42,0.22);
  --ax-ring:rgba(37,99,235,.3); --ax-texture:rgba(15,23,42,.045);
  --ax-p1:#2563eb; --ax-p2:#0284c7; --ax-p3:#0d9488; --ax-p4:#d97706;
  --ax-p5:#dc2626; --ax-p6:#7c3aed; --ax-p7:#475569;
}
:root[data-ax-theme="nordic"][data-theme="dark"] {
  --ax-bg:#0b1120; --ax-bg-alt:#111a2e; --ax-surface:#151f36; --ax-surface-2:#1c2942;
  --ax-text:#e8eefb; --ax-text-muted:#93a4c0;
  --ax-border:#24314c; --ax-border-strong:#35456a;
  --ax-primary:#60a5fa; --ax-primary-hover:#93c5fd; --ax-on-primary:#0b1120;
  --ax-link:#93c5fd; --ax-link-hover:#bfdbfe;
  --ax-accent-1:#fbbf24; --ax-accent-2:#fb7185; --ax-accent-3:#38bdf8;
  --ax-hero-bg:#070c17; --ax-hero-text:#e8eefb; --ax-hero-muted:#8095b5;
  --ax-hero-solid:#070c17;
  --ax-brand-grad:linear-gradient(120deg,#60a5fa,#38bdf8);
  --ax-brand-grad-ink:linear-gradient(120deg,#60a5fa,#38bdf8);
  --ax-shadow:0 1px 2px rgba(0,0,0,.42), 0 10px 30px rgba(0,0,0,.48);
  --ax-shadow-lg:0 20px 55px rgba(0,0,0,.62);
  --ax-shadow-rgb:0,0,0;
  --ax-elev-1:0 1px 2px rgba(0,0,0,0.22), 0 1px 3px rgba(0,0,0,0.26);
  --ax-elev-2:0 2px 4px rgba(0,0,0,0.26), 0 6px 16px rgba(0,0,0,0.34);
  --ax-elev-3:0 4px 8px rgba(0,0,0,0.3), 0 12px 28px rgba(0,0,0,0.45);
  --ax-elev-4:0 8px 16px rgba(0,0,0,0.36), 0 24px 48px rgba(0,0,0,0.55);
  --ax-elev-5:0 12px 24px rgba(0,0,0,0.42), 0 40px 80px rgba(0,0,0,0.68);
  --ax-ring:rgba(96,165,250,.38); --ax-texture:rgba(96,165,250,.06);
  --ax-p1:#60a5fa; --ax-p2:#38bdf8; --ax-p3:#2dd4bf; --ax-p4:#fbbf24;
  --ax-p5:#fb7185; --ax-p6:#a78bfa; --ax-p7:#94a3b8;
}


/* ══════════════════════════════════════════════════════════════════════════
   5 · CARBON NEON            contrast — black/white + lime / cyan / magenta
                              ★ DEFAULT
   Primary stays lime in both modes so buttons read identically; links use a
   darkened lime in light mode because neon-on-white is unreadable as text.
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-ax-theme="carbon"] {
  --ax-bg:#ffffff; --ax-bg-alt:#f4f4f5; --ax-surface:#ffffff; --ax-surface-2:#fafafa;
  --ax-text:#09090b; --ax-text-muted:#52525b;
  --ax-border:#e4e4e7; --ax-border-strong:#18181b;
  --ax-primary:#a3e635; --ax-primary-hover:#bef264; --ax-on-primary:#09090b;
  --ax-link:#3f6212; --ax-link-hover:#365314;
  --ax-accent-1:#a3e635; --ax-accent-2:#22d3ee; --ax-accent-3:#e879f9;
  --ax-hero-bg:#09090b; --ax-hero-solid:#09090b; --ax-hero-text:#fafafa; --ax-hero-muted:#a1a1aa;
  --ax-brand-grad:linear-gradient(120deg,#a3e635,#22d3ee 55%,#e879f9);
  --ax-brand-grad-ink:linear-gradient(120deg,#3f6212,#0e7490 55%,#a21caf);
  --ax-logo-grad-hero:linear-gradient(120deg,#a3e635,#22d3ee 55%,#e879f9);
  --ax-shadow:0 1px 2px rgba(9,9,11,.07), 0 10px 30px rgba(9,9,11,.07);
  --ax-shadow-lg:0 20px 55px rgba(9,9,11,.14);
  --ax-shadow-rgb:9,9,11;
  --ax-elev-1:0 1px 2px rgba(9,9,11,0.05), 0 1px 3px rgba(9,9,11,0.06);
  --ax-elev-2:0 2px 4px rgba(9,9,11,0.05), 0 6px 16px rgba(9,9,11,0.08);
  --ax-elev-3:0 4px 8px rgba(9,9,11,0.06), 0 12px 28px rgba(9,9,11,0.11);
  --ax-elev-4:0 8px 16px rgba(9,9,11,0.08), 0 24px 48px rgba(9,9,11,0.15);
  --ax-elev-5:0 12px 24px rgba(9,9,11,0.1), 0 40px 80px rgba(9,9,11,0.22);
  --ax-ring:rgba(9,9,11,.3); --ax-texture:rgba(9,9,11,.05);
  --ax-p1:#4d7c0f; --ax-p2:#0e7490; --ax-p3:#a21caf; --ax-p4:#1d4ed8;
  --ax-p5:#b45309; --ax-p6:#be123c; --ax-p7:#3f3f46;
}
:root[data-ax-theme="carbon"][data-theme="dark"] {
  --ax-bg:#09090b; --ax-bg-alt:#111113; --ax-surface:#151518; --ax-surface-2:#1c1c20;
  --ax-text:#fafafa; --ax-text-muted:#a1a1aa;
  --ax-border:#27272a; --ax-border-strong:#52525b;
  --ax-primary:#a3e635; --ax-primary-hover:#bef264; --ax-on-primary:#09090b;
  --ax-link:#a3e635; --ax-link-hover:#bef264;
  --ax-accent-1:#a3e635; --ax-accent-2:#22d3ee; --ax-accent-3:#e879f9;
  --ax-hero-bg:#050506; --ax-hero-text:#fafafa; --ax-hero-muted:#8b8b95;
  --ax-hero-solid:#050506;
  --ax-brand-grad:linear-gradient(120deg,#a3e635,#22d3ee 55%,#e879f9);
  --ax-brand-grad-ink:linear-gradient(120deg,#a3e635,#22d3ee 55%,#e879f9);
  --ax-shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.5);
  --ax-shadow-lg:0 20px 55px rgba(0,0,0,.68);
  --ax-shadow-rgb:0,0,0;
  --ax-elev-1:0 1px 2px rgba(0,0,0,0.22), 0 1px 3px rgba(0,0,0,0.26);
  --ax-elev-2:0 2px 4px rgba(0,0,0,0.26), 0 6px 16px rgba(0,0,0,0.34);
  --ax-elev-3:0 4px 8px rgba(0,0,0,0.3), 0 12px 28px rgba(0,0,0,0.45);
  --ax-elev-4:0 8px 16px rgba(0,0,0,0.36), 0 24px 48px rgba(0,0,0,0.55);
  --ax-elev-5:0 12px 24px rgba(0,0,0,0.42), 0 40px 80px rgba(0,0,0,0.68);
  --ax-ring:rgba(163,230,53,.4); --ax-texture:rgba(163,230,53,.05);
  --ax-p1:#a3e635; --ax-p2:#22d3ee; --ax-p3:#e879f9; --ax-p4:#60a5fa;
  --ax-p5:#fbbf24; --ax-p6:#fb7185; --ax-p7:#d4d4d8;
}


/* ══════════════════════════════════════════════════════════════════════════
   6 · ROYAL CONTRAST         contrast — ink/bone + purple / gold
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-ax-theme="royal"] {
  --ax-bg:#fdfcfa; --ax-bg-alt:#f6f2ea; --ax-surface:#ffffff; --ax-surface-2:#faf7f1;
  --ax-text:#1c1424; --ax-text-muted:#6b5f73;
  --ax-border:#e8e0d5; --ax-border-strong:#d3c7b6;
  --ax-primary:#6d28d9; --ax-primary-hover:#5b21b6; --ax-on-primary:#ffffff;
  --ax-link:#6d28d9; --ax-link-hover:#5b21b6;
  --ax-accent-1:#eab308; --ax-accent-2:#6d28d9; --ax-accent-3:#be185d;
  --ax-hero-bg:#2e1065; --ax-hero-text:#f5f3ff; --ax-hero-muted:#c3b3e8;
  --ax-hero-solid:#2e1065;
  --ax-brand-grad:linear-gradient(120deg,#6d28d9,#eab308);
  --ax-brand-grad-ink:linear-gradient(120deg,#6d28d9,#a16207);
  --ax-logo-grad-hero:linear-gradient(120deg,#a78bfa,#fbbf24);
  --ax-shadow:0 1px 2px rgba(46,16,101,.06), 0 10px 30px rgba(46,16,101,.09);
  --ax-shadow-lg:0 20px 55px rgba(46,16,101,.17);
  --ax-shadow-rgb:46,16,101;
  --ax-elev-1:0 1px 2px rgba(46,16,101,0.05), 0 1px 3px rgba(46,16,101,0.06);
  --ax-elev-2:0 2px 4px rgba(46,16,101,0.05), 0 6px 16px rgba(46,16,101,0.08);
  --ax-elev-3:0 4px 8px rgba(46,16,101,0.06), 0 12px 28px rgba(46,16,101,0.11);
  --ax-elev-4:0 8px 16px rgba(46,16,101,0.08), 0 24px 48px rgba(46,16,101,0.15);
  --ax-elev-5:0 12px 24px rgba(46,16,101,0.1), 0 40px 80px rgba(46,16,101,0.22);
  --ax-ring:rgba(109,40,217,.3); --ax-texture:rgba(109,40,217,.05);
  --ax-p1:#6d28d9; --ax-p2:#a16207; --ax-p3:#9d174d; --ax-p4:#1e40af;
  --ax-p5:#115e59; --ax-p6:#7e22ce; --ax-p7:#854d0e;
}
:root[data-ax-theme="royal"][data-theme="dark"] {
  --ax-bg:#14101c; --ax-bg-alt:#1b1526; --ax-surface:#201a2e; --ax-surface-2:#29213a;
  --ax-text:#f3eefc; --ax-text-muted:#b5a8c9;
  --ax-border:#322942; --ax-border-strong:#493c5f;
  --ax-primary:#a78bfa; --ax-primary-hover:#c4b5fd; --ax-on-primary:#14101c;
  --ax-link:#c4b5fd; --ax-link-hover:#ddd6fe;
  --ax-accent-1:#fbbf24; --ax-accent-2:#a78bfa; --ax-accent-3:#f472b6;
  --ax-hero-bg:#0d0817; --ax-hero-text:#f3eefc; --ax-hero-muted:#a294bd;
  --ax-hero-solid:#0d0817;
  --ax-brand-grad:linear-gradient(120deg,#a78bfa,#fbbf24);
  --ax-brand-grad-ink:linear-gradient(120deg,#a78bfa,#fbbf24);
  --ax-shadow:0 1px 2px rgba(0,0,0,.44), 0 10px 30px rgba(0,0,0,.5);
  --ax-shadow-lg:0 20px 55px rgba(0,0,0,.64);
  --ax-shadow-rgb:0,0,0;
  --ax-elev-1:0 1px 2px rgba(0,0,0,0.22), 0 1px 3px rgba(0,0,0,0.26);
  --ax-elev-2:0 2px 4px rgba(0,0,0,0.26), 0 6px 16px rgba(0,0,0,0.34);
  --ax-elev-3:0 4px 8px rgba(0,0,0,0.3), 0 12px 28px rgba(0,0,0,0.45);
  --ax-elev-4:0 8px 16px rgba(0,0,0,0.36), 0 24px 48px rgba(0,0,0,0.55);
  --ax-elev-5:0 12px 24px rgba(0,0,0,0.42), 0 40px 80px rgba(0,0,0,0.68);
  --ax-ring:rgba(167,139,250,.38); --ax-texture:rgba(167,139,250,.06);
  --ax-p1:#a78bfa; --ax-p2:#fbbf24; --ax-p3:#f472b6; --ax-p4:#60a5fa;
  --ax-p5:#2dd4bf; --ax-p6:#c084fc; --ax-p7:#fcd34d;
}


/* ══════════════════════════════════════════════════════════════════════════
   7 · CRIMSON MONO           contrast — bone/charcoal + crimson / steel
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-ax-theme="crimson"] {
  --ax-bg:#fffefc; --ax-bg-alt:#f5f3f0; --ax-surface:#ffffff; --ax-surface-2:#faf8f5;
  --ax-text:#1a1a1a; --ax-text-muted:#6b6560;
  --ax-border:#e7e3dd; --ax-border-strong:#d0cac2;
  --ax-primary:#dc2626; --ax-primary-hover:#b91c1c; --ax-on-primary:#ffffff;
  --ax-link:#b91c1c; --ax-link-hover:#991b1b;
  --ax-accent-1:#dc2626; --ax-accent-2:#475569; --ax-accent-3:#0f766e;
  --ax-hero-bg:#1a1a1a; --ax-hero-text:#fafaf9; --ax-hero-muted:#a8a29b;
  --ax-hero-solid:#1a1a1a;
  --ax-brand-grad:linear-gradient(120deg,#dc2626,#475569);
  --ax-brand-grad-ink:linear-gradient(120deg,#b91c1c,#475569);
  --ax-logo-grad-hero:linear-gradient(120deg,#f87171,#94a3b8);
  --ax-shadow:0 1px 2px rgba(26,26,26,.06), 0 10px 30px rgba(26,26,26,.08);
  --ax-shadow-lg:0 20px 55px rgba(26,26,26,.15);
  --ax-shadow-rgb:26,26,26;
  --ax-elev-1:0 1px 2px rgba(26,26,26,0.05), 0 1px 3px rgba(26,26,26,0.06);
  --ax-elev-2:0 2px 4px rgba(26,26,26,0.05), 0 6px 16px rgba(26,26,26,0.08);
  --ax-elev-3:0 4px 8px rgba(26,26,26,0.06), 0 12px 28px rgba(26,26,26,0.11);
  --ax-elev-4:0 8px 16px rgba(26,26,26,0.08), 0 24px 48px rgba(26,26,26,0.15);
  --ax-elev-5:0 12px 24px rgba(26,26,26,0.1), 0 40px 80px rgba(26,26,26,0.22);
  --ax-ring:rgba(220,38,38,.28); --ax-texture:rgba(26,26,26,.045);
  --ax-p1:#dc2626; --ax-p2:#475569; --ax-p3:#0f766e; --ax-p4:#b45309;
  --ax-p5:#7e22ce; --ax-p6:#1d4ed8; --ax-p7:#9f1239;
}
:root[data-ax-theme="crimson"][data-theme="dark"] {
  --ax-bg:#131211; --ax-bg-alt:#1a1918; --ax-surface:#1f1e1d; --ax-surface-2:#282625;
  --ax-text:#f5f3f0; --ax-text-muted:#a8a29b;
  --ax-border:#2f2d2b; --ax-border-strong:#47443f;
  --ax-primary:#f87171; --ax-primary-hover:#fca5a5; --ax-on-primary:#131211;
  --ax-link:#fca5a5; --ax-link-hover:#fecaca;
  --ax-accent-1:#f87171; --ax-accent-2:#94a3b8; --ax-accent-3:#2dd4bf;
  --ax-hero-bg:#0c0b0a; --ax-hero-text:#f5f3f0; --ax-hero-muted:#948e87;
  --ax-hero-solid:#0c0b0a;
  --ax-brand-grad:linear-gradient(120deg,#f87171,#94a3b8);
  --ax-brand-grad-ink:linear-gradient(120deg,#f87171,#94a3b8);
  --ax-shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.5);
  --ax-shadow-lg:0 20px 55px rgba(0,0,0,.65);
  --ax-shadow-rgb:0,0,0;
  --ax-elev-1:0 1px 2px rgba(0,0,0,0.22), 0 1px 3px rgba(0,0,0,0.26);
  --ax-elev-2:0 2px 4px rgba(0,0,0,0.26), 0 6px 16px rgba(0,0,0,0.34);
  --ax-elev-3:0 4px 8px rgba(0,0,0,0.3), 0 12px 28px rgba(0,0,0,0.45);
  --ax-elev-4:0 8px 16px rgba(0,0,0,0.36), 0 24px 48px rgba(0,0,0,0.55);
  --ax-elev-5:0 12px 24px rgba(0,0,0,0.42), 0 40px 80px rgba(0,0,0,0.68);
  --ax-ring:rgba(248,113,113,.35); --ax-texture:rgba(248,113,113,.05);
  --ax-p1:#f87171; --ax-p2:#94a3b8; --ax-p3:#2dd4bf; --ax-p4:#fbbf24;
  --ax-p5:#c084fc; --ax-p6:#60a5fa; --ax-p7:#fda4af;
}


/* ══════════════════════════════════════════════════════════════════════════
   SEMANTIC STATUS COLOURS
   Deliberately NOT derived from the accent hue: "critical" must read as
   critical in all 14 variants, including Crimson Mono (primary is already
   red) and Emerald Tide (primary is already green).
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-ax-theme] {
  --ax-success:#16a34a; --ax-warning:#b45309; --ax-danger:#b91c1c; --ax-info:#0369a1;
}
:root[data-ax-theme][data-theme="dark"] {
  --ax-success:#4ade80; --ax-warning:#fbbf24; --ax-danger:#f87171; --ax-info:#38bdf8;
}
/* corrections where the default would collide with that theme's primary */
:root[data-ax-theme="ember"]   { --ax-danger:#be123c; }
:root[data-ax-theme="carbon"]  { --ax-danger:#be123c; }
:root[data-ax-theme="crimson"] { --ax-danger:#b91c1c; --ax-success:#15803d; }
:root[data-ax-theme="ember"][data-theme="dark"]   { --ax-danger:#fda4af; }
:root[data-ax-theme="carbon"][data-theme="dark"]  { --ax-danger:#fb7185; }
:root[data-ax-theme="royal"][data-theme="dark"]   { --ax-danger:#fb7185; }
:root[data-ax-theme="crimson"][data-theme="dark"] { --ax-danger:#fca5a5; --ax-success:#6ee7b7; }


/* ══════════════════════════════════════════════════════════════════════════
   FALLBACK — if `data-ax-theme` is ever missing (JS blocked, cached HTML),
   fall back to the default palette rather than rendering an unstyled page.
   Specificity 0,1,0 / 0,2,0 keeps every explicit palette block above winning.
   ══════════════════════════════════════════════════════════════════════════ */
:root:not([data-ax-theme]) {
  --ax-bg:#ffffff; --ax-bg-alt:#f4f4f5; --ax-surface:#ffffff; --ax-surface-2:#fafafa;
  --ax-text:#09090b; --ax-text-muted:#52525b;
  --ax-border:#e4e4e7; --ax-border-strong:#18181b;
  --ax-primary:#a3e635; --ax-primary-hover:#bef264; --ax-on-primary:#09090b;
  --ax-link:#4d7c0f; --ax-link-hover:#3f6212;
  --ax-accent-1:#a3e635; --ax-accent-2:#22d3ee; --ax-accent-3:#e879f9;
  --ax-hero-bg:#09090b; --ax-hero-solid:#09090b; --ax-hero-text:#fafafa; --ax-hero-muted:#a1a1aa;
  --ax-brand-grad:linear-gradient(120deg,#a3e635,#22d3ee 55%,#e879f9);
  --ax-brand-grad-ink:linear-gradient(120deg,#3f6212,#0e7490 55%,#a21caf);
  --ax-shadow:0 1px 2px rgba(9,9,11,.07), 0 10px 30px rgba(9,9,11,.07);
  --ax-shadow-lg:0 20px 55px rgba(9,9,11,.14);
  --ax-shadow-rgb:9,9,11;
  --ax-elev-1:0 1px 2px rgba(9,9,11,0.05), 0 1px 3px rgba(9,9,11,0.06);
  --ax-elev-2:0 2px 4px rgba(9,9,11,0.05), 0 6px 16px rgba(9,9,11,0.08);
  --ax-elev-3:0 4px 8px rgba(9,9,11,0.06), 0 12px 28px rgba(9,9,11,0.11);
  --ax-elev-4:0 8px 16px rgba(9,9,11,0.08), 0 24px 48px rgba(9,9,11,0.15);
  --ax-elev-5:0 12px 24px rgba(9,9,11,0.1), 0 40px 80px rgba(9,9,11,0.22);
  --ax-ring:rgba(9,9,11,.3); --ax-texture:rgba(9,9,11,.05);
  --ax-p1:#4d7c0f; --ax-p2:#0e7490; --ax-p3:#a21caf; --ax-p4:#1d4ed8;
  --ax-p5:#b45309; --ax-p6:#be123c; --ax-p7:#3f3f46;
  --ax-success:#16a34a; --ax-warning:#b45309; --ax-danger:#be123c; --ax-info:#0284c7;
}
:root:not([data-ax-theme])[data-theme="dark"] {
  --ax-bg:#09090b; --ax-bg-alt:#111113; --ax-surface:#151518; --ax-surface-2:#1c1c20;
  --ax-text:#fafafa; --ax-text-muted:#a1a1aa;
  --ax-border:#27272a; --ax-border-strong:#52525b;
  --ax-link:#a3e635; --ax-link-hover:#bef264;
  --ax-hero-bg:#050506; --ax-hero-solid:#050506; --ax-hero-muted:#8b8b95;
  --ax-shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.5);
  --ax-shadow-lg:0 20px 55px rgba(0,0,0,.68);
  --ax-shadow-rgb:0,0,0;
  --ax-elev-1:0 1px 2px rgba(0,0,0,0.22), 0 1px 3px rgba(0,0,0,0.26);
  --ax-elev-2:0 2px 4px rgba(0,0,0,0.26), 0 6px 16px rgba(0,0,0,0.34);
  --ax-elev-3:0 4px 8px rgba(0,0,0,0.3), 0 12px 28px rgba(0,0,0,0.45);
  --ax-elev-4:0 8px 16px rgba(0,0,0,0.36), 0 24px 48px rgba(0,0,0,0.55);
  --ax-elev-5:0 12px 24px rgba(0,0,0,0.42), 0 40px 80px rgba(0,0,0,0.68);
  --ax-ring:rgba(163,230,53,.4); --ax-texture:rgba(163,230,53,.05);
  --ax-p1:#a3e635; --ax-p2:#22d3ee; --ax-p3:#e879f9; --ax-p4:#60a5fa;
  --ax-p5:#fbbf24; --ax-p6:#fb7185; --ax-p7:#d4d4d8;
  --ax-success:#4ade80; --ax-warning:#fbbf24; --ax-danger:#fb7185; --ax-info:#38bdf8;
}


/* ══════════════════════════════════════════════════════════════════════════
   SHARED CONTROL — theme picker + light/dark toggle.
   Same markup and behaviour in both apps: `.ax-theme-ctl` wraps a palette
   button and its popover; the mode toggle sits immediately after it on the
   website, and after Logout on the desk.
   ══════════════════════════════════════════════════════════════════════════ */
.ax-theme-ctl { position: relative; display: inline-flex; }

.ax-theme-ctl-btn {
  width: 38px; height: 38px; flex-shrink: 0; padding: 0;
  display: inline-grid; place-items: center;
  border: var(--bw-1) solid var(--ax-border);
  border-radius: var(--r-sm);
  background: var(--ax-surface);
  color: var(--ax-text);
  cursor: pointer;
  transition: border-color var(--ax-t-base), color var(--ax-t-base), background var(--ax-t-base);
}
.ax-theme-ctl-btn:hover {
  border-color: var(--ax-primary);
  color: var(--ax-link);
  background: color-mix(in srgb, var(--ax-primary) 8%, var(--ax-surface));
}
.ax-theme-ctl-btn:focus-visible { outline: var(--bw-2) solid var(--ax-primary); outline-offset: 2px; }
.ax-theme-ctl-btn svg { width: 17px; height: 17px; display: block; }

/* Show the icon for the mode you'd switch TO */
.ax-theme-ctl-btn .ax-i-sun { display: none; }
:root[data-theme="dark"] .ax-theme-ctl-btn .ax-i-sun  { display: block; }
:root[data-theme="dark"] .ax-theme-ctl-btn .ax-i-moon { display: none; }

.ax-theme-pop {
  position: absolute; top: calc(100% + var(--sp-2)); right: 0; z-index: 1200;
  width: 248px; padding: var(--sp-2);
  background: var(--ax-surface);
  border: var(--bw-1) solid var(--ax-border);
  border-radius: var(--r-md);
  box-shadow: var(--ax-shadow-lg);
  display: none;
}
.ax-theme-pop.open { display: block; }
.ax-theme-pop-h {
  font-size: 0.63rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ax-text-muted);
  padding: var(--sp-2) var(--sp-2) var(--sp-1);
}
.ax-theme-pop button {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: var(--sp-2); border: none; border-radius: var(--r-sm);
  background: transparent; color: var(--ax-text);
  font: inherit; font-size: 0.8rem; font-weight: 550; text-align: left; cursor: pointer;
  transition: background var(--ax-t-fast), color var(--ax-t-fast);
}
.ax-theme-pop button:hover { background: var(--ax-surface-2); }
.ax-theme-pop button[aria-checked="true"] {
  background: color-mix(in srgb, var(--ax-primary) 14%, transparent);
  color: var(--ax-link);
}
.ax-theme-pop button:focus-visible { outline: var(--bw-2) solid var(--ax-primary); outline-offset: -2px; }

.ax-sw {
  display: flex; flex-shrink: 0;
  border-radius: var(--r-xs); overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ax-text) 18%, transparent);
}
.ax-sw i { width: 10px; height: 22px; display: block; }

@media (prefers-reduced-motion: reduce) {
  .ax-theme-ctl-btn, .ax-theme-pop button { transition: none; }
}