/* ==========================================================================
   Parsewave Console design tokens
   --------------------------------------------------------------------------
   The single source of truth for colour, type, space, radius, elevation and
   motion. Served as /static/tokens.css and loaded FIRST on every page, before
   any page-local <style> block, so pages can override during migration.

   Replaces: 17 competing private :root blocks, 644 distinct colour literals,
   135 distinct font-size values, 234 distinct padding values, 18 font weights.

   Dark is the base theme. Every other scheme is one override block keyed on
   html[data-theme="<id>"]; the registry of ids, labels and modes lives in
   client/src/lib/theme.ts and the pre-paint script in client/entry.template.html
   stamps data-theme AND data-mode ("dark" | "light") before the first paint.
   Dark-mode schemes override only what differs from :root; light-mode schemes
   override at least everything the light block does, or dark values leak in.
   tests/tokensSchemes.test.js enforces both.

   No colour anywhere in the Console may live outside this file: charts, chips,
   scrims and nav chrome all read var(--…), so a scheme recolours everything.

   Every foreground/background pairing in here is contrast-verified — see
   scripts/check-contrast.js. Do not hand-edit a colour without re-running it.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Neutrals: page and surfaces -------------------------------------- */
  /* The official Parsewave palette is warm near-black and off-white. These
     surfaces carry a slight green undertone so brand colour feels native to
     the interface instead of pasted onto a grey dashboard. */
  --bg: #0b0d0a;                /* page */
  --bg-inset: #070807;          /* wells, code blocks, table zebra */
  --surface-1: #121410;         /* cards, panels */
  --surface-2: #191c16;         /* inputs, raised rows, tab strips */
  --surface-3: #22261d;         /* hover */
  --surface-4: #2c3125;         /* active / pressed */

  --border: #2a2f25;            /* hairlines between surfaces */
  --border-strong: #687063;     /* input + control boundaries */

  /* ---- Neutrals: text --------------------------------------------------- */
  --text: #f1f0ec;              /* official off-white */
  --text-2: #c0beb8;            /* secondary copy, table cells */
  --text-3: #97978e;            /* muted labels, captions, help text */
  --text-faint: #6e7269;        /* decorative only */
  --text-inverse: #0b1007;
  --backdrop: rgba(0, 0, 0, 0.72);

  /* ---- Parsewave brand -------------------------------------------------- */
  --brand-lime: #70d100;
  --brand-deep: #3f7700;
  --brand-ink: #0d2635;
  --brand-off-white: #f1f0ec;

  /* ---- Accent ----------------------------------------------------------- */
  --accent: #70d100;            /* primary action, focus, active indicator */
  --accent-hover: #7de200;
  --accent-active: #61b900;
  --accent-text: #9bea4c;       /* accent as text on dark surfaces */
  --accent-soft: rgba(112, 209, 0, 0.12);
  --accent-soft-hover: rgba(112, 209, 0, 0.2);
  --accent-border: rgba(112, 209, 0, 0.38);
  --on-accent: #0c1306;

  /* ---- Data accents ----------------------------------------------------- */
  /* These are for categories and charts, never unlabeled status alone. */
  --data-cyan: #53d6cb;
  --data-violet: #a693ff;
  --data-coral: #ff8a72;
  --data-gold: #f2c14e;
  --data-sky: #72b7ff;
  --data-cyan-soft: rgba(83, 214, 203, 0.12);
  --data-violet-soft: rgba(166, 147, 255, 0.12);
  --data-coral-soft: rgba(255, 138, 114, 0.12);
  --data-gold-soft: rgba(242, 193, 78, 0.12);
  --data-sky-soft: rgba(114, 183, 255, 0.12);

  /* Categorical series ramp for many-series charts (usage trend, heatmap
     legends). Order matters: adjacent entries are hue-separated. */
  --series-1: #5eead4;
  --series-2: #60a5fa;
  --series-3: #c084fc;
  --series-4: #fbbf24;
  --series-5: #fb7185;
  --series-6: #a3e635;
  --series-7: #22d3ee;
  --series-8: #f97316;
  --series-9: #f472b6;
  --series-10: #818cf8;
  --series-11: #34d399;
  --series-12: #38bdf8;
  --series-13: #e879f9;
  --series-14: #facc15;
  --series-15: #fb923c;
  --series-16: #4ade80;
  --series-17: #2dd4bf;
  --series-18: #93c5fd;
  --series-19: #d8b4fe;
  --series-20: #fda4af;
  --series-21: #bef264;
  --series-22: #67e8f9;
  --series-23: #fdba74;
  --series-24: #c4b5fd;

  /* ---- Semantic --------------------------------------------------------- */
  --success: #1f9d63;
  --success-text: #5fd8a0;
  --success-bg: rgba(31, 157, 99, 0.15);
  --success-border: rgba(31, 157, 99, 0.4);
  --on-success: #ffffff;

  --warning: #b7791f;
  --warning-text: #f2c14e;
  --warning-bg: rgba(183, 121, 31, 0.16);
  --warning-border: rgba(183, 121, 31, 0.44);
  --on-warning: #1a1204;

  --danger: #c53434;
  --danger-hover: #d94040;
  --danger-text: #ff8a8a;
  --danger-bg: rgba(197, 52, 52, 0.16);
  --danger-border: rgba(197, 52, 52, 0.45);
  --on-danger: #ffffff;

  --info: #2b6cb0;
  --info-text: #82b8f5;
  --info-bg: rgba(43, 108, 176, 0.16);
  --info-border: rgba(43, 108, 176, 0.44);
  --on-info: #ffffff;

  /* Neutral/idle chip — for "unknown", "n/a", "paused" states */
  --neutral-text: #a8a8a8;
  --neutral-bg: rgba(160, 160, 160, 0.13);
  --neutral-border: rgba(160, 160, 160, 0.3);

  /* ---- Focus ------------------------------------------------------------ */
  --focus-ring: #9bea4c;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* ---- Typography ------------------------------------------------------- */
  --font-sans: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace,
    SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* 7-step scale on ~1.125, replacing 135 ad hoc values.
     Root stays at the browser default 16px — no page's rem maths shifts. */
  --fs-display: 2.25rem;    /* 36px, page hero only */
  --fs-h1: 2rem;            /* 32px, page title, carries the page */
  --fs-h2: 1.25rem;         /* 20px, section heading */
  --fs-h3: 1rem;            /* 16px, panel heading */
  --fs-body: 0.875rem;      /* 14px — default copy */
  --fs-small: 0.8125rem;    /* 13px — table cells, dense UI */
  --fs-caption: 0.75rem;    /* 12px — labels, metadata */
  --fs-micro: 0.6875rem;    /* 11px — badges, kickers */

  --lh-tight: 1.12;         /* display */
  --lh-heading: 1.25;       /* h1-h3 */
  --lh-body: 1.55;          /* paragraphs — a touch more air at 14px */
  --lh-ui: 1.35;            /* single-line UI text */

  /* Four weights only, replacing 18 (incl. 850/820/780/760/750/650). */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Optical tracking curve. Type needs progressively tighter letter-spacing as
     it gets larger, and looser as it gets smaller — a single tracking value
     across a scale is the most common giveaway of unconsidered typography. */
  --tracking-display: -0.022em;
  --tracking-h1: -0.017em;
  --tracking-h2: -0.011em;
  --tracking-h3: -0.006em;
  --tracking-body: 0em;
  --tracking-small: 0.003em;
  --tracking-caption: 0.045em;  /* uppercase labels */
  --tracking-micro: 0.055em;
  /* Retained: older rules reference this name. */
  --tracking-tight: -0.017em;

  /* ---- Spacing: 4px grid, replacing 234 distinct padding values --------- */
  --space-0: 0;
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-7: 2rem;      /* 32px */
  --space-8: 2.5rem;    /* 40px */
  --space-9: 3rem;      /* 48px */
  --space-10: 4rem;     /* 64px */

  /* ---- Radius: replacing 39 distinct values ---------------------------- */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* ---- Elevation: replacing 72 distinct shadows ------------------------ */
  /* Two-layer shadows: a tight contact shadow plus a soft ambient one. A single
     large blur reads as a fake drop shadow; the pair reads as real depth. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.16);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 20px -8px rgba(0, 0, 0, 0.38);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.32), 0 18px 40px -14px rgba(0, 0, 0, 0.48);
  --shadow-lg: 0 6px 14px rgba(0, 0, 0, 0.34), 0 32px 72px -18px rgba(0, 0, 0, 0.58);
  /* Form-field focus ring. Uses --accent-border (44%/34% alpha), not the 16% --accent-soft
     halo, so a focused input is as legible as every other focusable control. */
  --shadow-focus: 0 0 0 3px var(--accent-border);

  /* ---- Gradients -------------------------------------------------------
     Restrained on purpose. Every gradient here is single-hue or
     adjacent-hue, low-contrast, and used to describe a light source or a
     surface — never as decoration. No multi-hue "AI" gradients.

     The rule: a gradient should be almost invisible until you remove it. */

  /* Surface sheen: top edge catches light. ~2% delta, enough to give a card an
     apparent top edge without reading as a gradient. */
  --gradient-surface: linear-gradient(180deg,
    rgba(255, 255, 255, 0.035) 0%,
    rgba(255, 255, 255, 0.012) 38%,
    rgba(255, 255, 255, 0) 100%);

  /* Raised controls (inputs, tab strips) — same idea, weaker. */
  --gradient-raised: linear-gradient(180deg,
    rgba(255, 255, 255, 0.028) 0%,
    rgba(255, 255, 255, 0) 70%);

  /* Primary action: one hue, two stops, deeper at the bottom so the button
     reads as lit from above. 6% lightness delta. */
  --gradient-accent: linear-gradient(180deg, #7be000 0%, #63bd00 100%);
  --gradient-accent-hover: linear-gradient(180deg, #88ea10 0%, #70cb00 100%);
  --gradient-danger: linear-gradient(180deg, #cc3838 0%, #ad2828 100%);

  /* No page-background gradient. A coloured wash behind the header tinted every
     neutral on the page and is exactly the sort of decoration this app does not
     want. Deliberately removed rather than toned down. */

  /* Hairline that fades out — for section rules that shouldn't box things in. */
  --gradient-rule: linear-gradient(90deg,
    var(--border-strong) 0%, var(--border) 45%, transparent 100%);

  /* Skeleton shimmer. */
  --gradient-shimmer: linear-gradient(90deg,
    var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);

  /* Sidebar: barely-there vertical fall-off so the nav reads as a plane. */
  --gradient-sidebar: linear-gradient(180deg,
    rgba(112, 209, 0, 0.035) 0%,
    rgba(255, 255, 255, 0) 24%,
    rgba(0, 0, 0, 0.2) 100%);

  /* ---- Layering: replacing 26 ad hoc z-index values ------------------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-banner: 300;
  --z-sidebar: 500;
  --z-overlay: 700;
  --z-modal: 800;
  --z-toast: 900;
  --z-tooltip: 1000;

  /* ---- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration: 180ms;
  --duration-slow: 260ms;

  /* ---- Layout ---------------------------------------------------------- */
  --sidebar-width: 248px;
  --content-max: 1680px;      /* dense dashboards */
  --content-max-prose: 760px; /* forms and single-column pages */
  --header-height: 56px;
}

/* ==========================================================================
   Light theme — one override block. Only the values that must change.
   ========================================================================== */
html[data-theme='light'] {
  color-scheme: light;

  --bg: #f1f0ec;
  --bg-inset: #e9ebe4;
  --surface-1: #ffffff;
  --surface-2: #f5f7f1;
  --surface-3: #e9eee3;
  --surface-4: #dce5d4;

  --border: #dde3d7;
  --border-strong: #818d78;

  --text: #11150f;
  --text-2: #424a3d;
  --text-3: #5d6856;
  --text-faint: #788172;
  --text-inverse: #ffffff;
  --backdrop: rgba(17, 21, 15, 0.48);

  --accent: #3f7700;
  --accent-hover: #345f00;
  --accent-active: #2b5000;
  --accent-text: #356900;
  --accent-soft: rgba(63, 119, 0, 0.09);
  --accent-soft-hover: rgba(63, 119, 0, 0.15);
  --accent-border: rgba(63, 119, 0, 0.34);
  --on-accent: #ffffff;

  --data-cyan: #087f78;
  --data-violet: #6753c6;
  --data-coral: #b84e3a;
  --data-gold: #8a5c00;
  --data-sky: #2169a8;
  --data-cyan-soft: rgba(8, 127, 120, 0.09);
  --data-violet-soft: rgba(103, 83, 198, 0.09);
  --data-coral-soft: rgba(184, 78, 58, 0.09);
  --data-gold-soft: rgba(138, 92, 0, 0.09);
  --data-sky-soft: rgba(33, 105, 168, 0.09);

  --success: #14794c;
  --success-text: #0f6b43;
  --success-bg: rgba(20, 121, 76, 0.1);
  --success-border: rgba(20, 121, 76, 0.3);

  --warning: #96600f;
  --warning-text: #7d4f08;
  --warning-bg: rgba(150, 96, 15, 0.11);
  --warning-border: rgba(150, 96, 15, 0.32);
  --on-warning: #ffffff;

  --danger: #bb2d2d;
  --danger-hover: #a82525;
  --danger-text: #a52121;
  --danger-bg: rgba(187, 45, 45, 0.09);
  --danger-border: rgba(187, 45, 45, 0.3);

  --info: #1f5f9e;
  --info-text: #1a5589;
  --info-bg: rgba(31, 95, 158, 0.1);
  --info-border: rgba(31, 95, 158, 0.3);

  --neutral-text: #4d5766;
  --neutral-bg: rgba(93, 103, 117, 0.1);
  --neutral-border: rgba(93, 103, 117, 0.26);

  --focus-ring: #356900;

  --series-1: #0f766e;
  --series-2: #1d4ed8;
  --series-3: #7e22ce;
  --series-4: #a16207;
  --series-5: #be123c;
  --series-6: #4d7c0f;
  --series-7: #0e7490;
  --series-8: #c2410c;
  --series-9: #be185d;
  --series-10: #4338ca;
  --series-11: #047857;
  --series-12: #0369a1;
  --series-13: #a21caf;
  --series-14: #854d0e;
  --series-15: #9a3412;
  --series-16: #15803d;
  --series-17: #0d9488;
  --series-18: #2563eb;
  --series-19: #9333ea;
  --series-20: #e11d48;
  --series-21: #65a30d;
  --series-22: #0891b2;
  --series-23: #ea580c;
  --series-24: #6d28d9;

  --shadow-sm: 0 1px 1px rgba(16, 21, 28, 0.04), 0 1px 3px rgba(16, 21, 28, 0.06);
  --shadow: 0 1px 2px rgba(16, 21, 28, 0.05), 0 4px 10px -2px rgba(16, 21, 28, 0.08);
  --shadow-md: 0 2px 4px rgba(16, 21, 28, 0.05), 0 12px 28px -6px rgba(16, 21, 28, 0.1);
  --shadow-lg: 0 4px 8px rgba(16, 21, 28, 0.06), 0 24px 56px -12px rgba(16, 21, 28, 0.13);

  /* ---- Gradients, light ------------------------------------------------
     A white sheen over white is invisible, so light mode inverts the idea:
     the surface stays white at the top and picks up a hint of the page tint
     towards the bottom. Same implied light source, opposite direction. */
  --gradient-surface: linear-gradient(180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(16, 21, 28, 0.012) 100%);
  --gradient-raised: linear-gradient(180deg,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(16, 21, 28, 0.014) 100%);

  --gradient-accent: linear-gradient(180deg, #4b8507 0%, #376c00 100%);
  --gradient-accent-hover: linear-gradient(180deg, #55920d 0%, #3f7700 100%);
  --gradient-danger: linear-gradient(180deg, #c73434 0%, #ab2424 100%);


  --gradient-rule: linear-gradient(90deg,
    var(--border-strong) 0%, var(--border) 45%, transparent 100%);

  --gradient-shimmer: linear-gradient(90deg,
    var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);

  --gradient-sidebar: linear-gradient(180deg,
    rgba(63, 119, 0, 0.045) 0%,
    rgba(17, 21, 15, 0.024) 100%);
}

/* ==========================================================================
   Midnight — true black for OLED screens and dim rooms. Dark deltas only:
   surfaces step up from black, borders lift one step (a hairline that reads
   on #0b0d0a vanishes on #000), sheens weaken (white over black lifts twice
   as much as over the green-black base).
   ========================================================================== */
html[data-theme='midnight'] {
  color-scheme: dark;

  --bg: #000000;
  --bg-inset: #000000;
  --surface-1: #0a0a0a;
  --surface-2: #131313;
  --surface-3: #1c1c1c;
  --surface-4: #262626;

  --border: #2c2c2c;
  --border-strong: #6f6f6f;

  --text: #f4f4f2;
  --text-2: #c3c3be;
  --text-3: #9a9a93;
  --text-faint: #71716c;
  --backdrop: rgba(0, 0, 0, 0.8);

  --gradient-surface: linear-gradient(180deg,
    rgba(255, 255, 255, 0.022) 0%,
    rgba(255, 255, 255, 0.008) 38%,
    rgba(255, 255, 255, 0) 100%);
  --gradient-raised: linear-gradient(180deg,
    rgba(255, 255, 255, 0.018) 0%,
    rgba(255, 255, 255, 0) 70%);
  --gradient-sidebar: linear-gradient(180deg,
    rgba(112, 209, 0, 0.03) 0%,
    rgba(255, 255, 255, 0) 24%,
    rgba(0, 0, 0, 0.3) 100%);
}

/* ==========================================================================
   Ocean — cool dark surfaces, cyan accent. Everything that was lime becomes
   cyan: the accent family, the focus ring, the action gradients, the sidebar
   fall-off. Danger stays red so a destructive control still reads as one.
   ========================================================================== */
html[data-theme='ocean'] {
  color-scheme: dark;

  --bg: #080d12;
  --bg-inset: #05090d;
  --surface-1: #0f161d;
  --surface-2: #151f28;
  --surface-3: #1d2a35;
  --surface-4: #263542;

  --border: #243240;
  --border-strong: #64778a;

  --text: #edf3f7;
  --text-2: #bcc9d4;
  --text-3: #93a3af;
  --text-faint: #6b7b88;
  --text-inverse: #061018;
  --backdrop: rgba(0, 6, 12, 0.74);

  --accent: #35c9e6;
  --accent-hover: #4fd6ef;
  --accent-active: #22b3cf;
  --accent-text: #7fdcef;
  --accent-soft: rgba(53, 201, 230, 0.13);
  --accent-soft-hover: rgba(53, 201, 230, 0.22);
  --accent-border: rgba(53, 201, 230, 0.4);
  --on-accent: #04191f;

  --focus-ring: #7fdcef;

  --gradient-accent: linear-gradient(180deg, #45d2ec 0%, #27b6d2 100%);
  --gradient-accent-hover: linear-gradient(180deg, #5cdcf3 0%, #35c9e6 100%);
  --gradient-sidebar: linear-gradient(180deg,
    rgba(53, 201, 230, 0.05) 0%,
    rgba(255, 255, 255, 0) 24%,
    rgba(0, 0, 0, 0.2) 100%);
}

/* ==========================================================================
   Ember — warm dark surfaces, orange-coral accent. Pulled toward orange so it
   never collides with --danger-text.
   ========================================================================== */
html[data-theme='ember'] {
  color-scheme: dark;

  --bg: #100b09;
  --bg-inset: #0b0706;
  --surface-1: #181110;
  --surface-2: #211816;
  --surface-3: #2b201d;
  --surface-4: #362925;

  --border: #35282a;
  --border-strong: #7c6a66;

  --text: #f6efe9;
  --text-2: #cfc2ba;
  --text-3: #a3958e;
  --text-faint: #786c66;
  --text-inverse: #1c0d08;
  --backdrop: rgba(8, 2, 0, 0.74);

  --accent: #ff8a5c;
  --accent-hover: #ff9c74;
  --accent-active: #f4763f;
  --accent-text: #ffab89;
  --accent-soft: rgba(255, 138, 92, 0.13);
  --accent-soft-hover: rgba(255, 138, 92, 0.22);
  --accent-border: rgba(255, 138, 92, 0.42);
  --on-accent: #2a1108;

  --focus-ring: #ffab89;

  --gradient-accent: linear-gradient(180deg, #ff9468 0%, #f57a48 100%);
  --gradient-accent-hover: linear-gradient(180deg, #ffa27c 0%, #ff8a5c 100%);
  --gradient-sidebar: linear-gradient(180deg,
    rgba(255, 138, 92, 0.05) 0%,
    rgba(255, 255, 255, 0) 24%,
    rgba(0, 0, 0, 0.22) 100%);
}

/* ==========================================================================
   Pastel Dusk — deep plum surfaces, soft lavender accent, pastel tones and a
   pastel series ramp. Dark mode, but nothing in it is harsh.
   ========================================================================== */
html[data-theme='pastel-dusk'] {
  color-scheme: dark;

  --bg: #15111f;
  --bg-inset: #100c18;
  --surface-1: #1c1729;
  --surface-2: #241d33;
  --surface-3: #2e263f;
  --surface-4: #3a304d;

  --border: #372f49;
  --border-strong: #7f7396;

  --text: #f3eff9;
  --text-2: #cbc2dc;
  --text-3: #a196b5;
  --text-faint: #776d8a;
  --text-inverse: #16101f;
  --backdrop: rgba(9, 5, 16, 0.74);

  --accent: #c4b0ff;
  --accent-hover: #d2c2ff;
  --accent-active: #b19bf5;
  --accent-text: #d7c9ff;
  --accent-soft: rgba(196, 176, 255, 0.13);
  --accent-soft-hover: rgba(196, 176, 255, 0.22);
  --accent-border: rgba(196, 176, 255, 0.42);
  --on-accent: #1d1430;

  --data-cyan: #8be3d9;
  --data-violet: #c9b8ff;
  --data-coral: #ffb1a0;
  --data-gold: #f7d78a;
  --data-sky: #a8ccff;
  --data-cyan-soft: rgba(139, 227, 217, 0.13);
  --data-violet-soft: rgba(201, 184, 255, 0.13);
  --data-coral-soft: rgba(255, 177, 160, 0.13);
  --data-gold-soft: rgba(247, 215, 138, 0.13);
  --data-sky-soft: rgba(168, 204, 255, 0.13);

  --series-1: #8be3d9;
  --series-2: #a8ccff;
  --series-3: #d9b8ff;
  --series-4: #f7d78a;
  --series-5: #ffb1c1;
  --series-6: #c9ef9a;
  --series-7: #9fe6f5;
  --series-8: #ffc59e;
  --series-9: #f9b8e6;
  --series-10: #bcbfff;
  --series-11: #a5ecc8;
  --series-12: #b1def9;
  --series-13: #efb8fb;
  --series-14: #f9e7a0;
  --series-15: #ffd0b0;
  --series-16: #b6f0c4;
  --series-17: #a0e8e0;
  --series-18: #c8dcff;
  --series-19: #e6d2ff;
  --series-20: #ffc8d1;
  --series-21: #dcf4b0;
  --series-22: #b7ecf9;
  --series-23: #fedcbe;
  --series-24: #d9d0ff;

  --success: #3d9c78;
  --success-text: #9be3c5;
  --warning: #b7862a;
  --warning-text: #f5d58c;
  --danger: #c74a5a;
  --danger-hover: #d65a6a;
  --danger-text: #ffa9b5;
  --info: #4c77b8;
  --info-text: #a9c8f5;

  --focus-ring: #d7c9ff;

  --gradient-accent: linear-gradient(180deg, #cdbcff 0%, #b6a2f8 100%);
  --gradient-accent-hover: linear-gradient(180deg, #d8caff 0%, #c4b0ff 100%);
  --gradient-danger: linear-gradient(180deg, #d0525f 0%, #b23d4c 100%);
  --gradient-sidebar: linear-gradient(180deg,
    rgba(196, 176, 255, 0.05) 0%,
    rgba(255, 255, 255, 0) 24%,
    rgba(0, 0, 0, 0.22) 100%);
}

/* ==========================================================================
   Paper — warm off-white, low glare. A light-mode scheme: overrides at least
   everything the light block does. Its raised sheen must not bleach a warm
   surface cold, so it fades to the page tint instead of white.
   ========================================================================== */
html[data-theme='paper'] {
  color-scheme: light;

  --bg: #f4efe6;
  --bg-inset: #ece6da;
  --surface-1: #fbf8f2;
  --surface-2: #f5f0e7;
  --surface-3: #ece5d8;
  --surface-4: #e1d8c8;

  --border: #ddd4c4;
  --border-strong: #85796a;

  --text: #1c1710;
  --text-2: #4a4238;
  --text-3: #665c4f;
  --text-faint: #7f7466;
  --text-inverse: #fbf8f2;
  --backdrop: rgba(28, 23, 16, 0.48);

  --accent: #5c6b1f;
  --accent-hover: #4d5a19;
  --accent-active: #3f4a14;
  --accent-text: #4a5717;
  --accent-soft: rgba(92, 107, 31, 0.1);
  --accent-soft-hover: rgba(92, 107, 31, 0.17);
  --accent-border: rgba(92, 107, 31, 0.36);
  --on-accent: #ffffff;

  --data-cyan: #0d7a72;
  --data-violet: #6a52c2;
  --data-coral: #b24d38;
  --data-gold: #8a5c00;
  --data-sky: #22689f;
  --data-cyan-soft: rgba(13, 122, 114, 0.1);
  --data-violet-soft: rgba(106, 82, 194, 0.1);
  --data-coral-soft: rgba(178, 77, 56, 0.1);
  --data-gold-soft: rgba(138, 92, 0, 0.1);
  --data-sky-soft: rgba(34, 104, 159, 0.1);

  --series-1: #0f766e;
  --series-2: #1d4ed8;
  --series-3: #7e22ce;
  --series-4: #a16207;
  --series-5: #be123c;
  --series-6: #4d7c0f;
  --series-7: #0e7490;
  --series-8: #c2410c;
  --series-9: #be185d;
  --series-10: #4338ca;
  --series-11: #047857;
  --series-12: #0369a1;
  --series-13: #a21caf;
  --series-14: #854d0e;
  --series-15: #9a3412;
  --series-16: #15803d;
  --series-17: #0d9488;
  --series-18: #2563eb;
  --series-19: #9333ea;
  --series-20: #e11d48;
  --series-21: #65a30d;
  --series-22: #0891b2;
  --series-23: #ea580c;
  --series-24: #6d28d9;

  --success: #14794c;
  --success-text: #0f6b43;
  --success-bg: rgba(20, 121, 76, 0.1);
  --success-border: rgba(20, 121, 76, 0.3);

  --warning: #96600f;
  --warning-text: #7d4f08;
  --warning-bg: rgba(150, 96, 15, 0.11);
  --warning-border: rgba(150, 96, 15, 0.32);
  --on-warning: #ffffff;

  --danger: #bb2d2d;
  --danger-hover: #a82525;
  --danger-text: #a52121;
  --danger-bg: rgba(187, 45, 45, 0.09);
  --danger-border: rgba(187, 45, 45, 0.3);

  --info: #1f5f9e;
  --info-text: #1a5589;
  --info-bg: rgba(31, 95, 158, 0.1);
  --info-border: rgba(31, 95, 158, 0.3);

  --neutral-text: #56514a;
  --neutral-bg: rgba(110, 100, 86, 0.1);
  --neutral-border: rgba(110, 100, 86, 0.26);

  --focus-ring: #4a5717;

  --shadow-sm: 0 1px 1px rgba(40, 30, 16, 0.05), 0 1px 3px rgba(40, 30, 16, 0.07);
  --shadow: 0 1px 2px rgba(40, 30, 16, 0.06), 0 4px 10px -2px rgba(40, 30, 16, 0.09);
  --shadow-md: 0 2px 4px rgba(40, 30, 16, 0.06), 0 12px 28px -6px rgba(40, 30, 16, 0.11);
  --shadow-lg: 0 4px 8px rgba(40, 30, 16, 0.07), 0 24px 56px -12px rgba(40, 30, 16, 0.14);

  --gradient-surface: linear-gradient(180deg,
    rgba(255, 253, 248, 0) 0%,
    rgba(40, 30, 16, 0.014) 100%);
  --gradient-raised: linear-gradient(180deg,
    rgba(255, 253, 248, 0.5) 0%,
    rgba(40, 30, 16, 0.016) 100%);

  --gradient-accent: linear-gradient(180deg, #667828 0%, #526017 100%);
  --gradient-accent-hover: linear-gradient(180deg, #70832f 0%, #5c6b1f 100%);
  --gradient-danger: linear-gradient(180deg, #c73434 0%, #ab2424 100%);

  --gradient-rule: linear-gradient(90deg,
    var(--border-strong) 0%, var(--border) 45%, transparent 100%);

  --gradient-shimmer: linear-gradient(90deg,
    var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);

  --gradient-sidebar: linear-gradient(180deg,
    rgba(92, 107, 31, 0.05) 0%,
    rgba(28, 23, 16, 0.024) 100%);
}

/* ==========================================================================
   Pastel — lilac and mint tints, soft violet accent. Light mode: tints stay
   light, the text tones stay dark enough to read on them.
   ========================================================================== */
html[data-theme='pastel'] {
  color-scheme: light;

  --bg: #f3f0fa;
  --bg-inset: #ebe6f6;
  --surface-1: #fbfaff;
  --surface-2: #f4f1fb;
  --surface-3: #ebe6f7;
  --surface-4: #dfd8f0;

  --border: #dcd5ec;
  --border-strong: #857a9e;

  --text: #1d1730;
  --text-2: #46405a;
  --text-3: #5f5877;
  --text-faint: #7b7590;
  --text-inverse: #fbfaff;
  --backdrop: rgba(29, 23, 48, 0.46);

  --accent: #6b4fbf;
  --accent-hover: #5c42ab;
  --accent-active: #4e3796;
  --accent-text: #5a3fae;
  --accent-soft: rgba(107, 79, 191, 0.1);
  --accent-soft-hover: rgba(107, 79, 191, 0.17);
  --accent-border: rgba(107, 79, 191, 0.36);
  --on-accent: #ffffff;

  --data-cyan: #0f7d76;
  --data-violet: #6b4fbf;
  --data-coral: #c04a63;
  --data-gold: #8f5f0a;
  --data-sky: #2a6ba8;
  --data-cyan-soft: rgba(15, 125, 118, 0.1);
  --data-violet-soft: rgba(107, 79, 191, 0.1);
  --data-coral-soft: rgba(192, 74, 99, 0.1);
  --data-gold-soft: rgba(143, 95, 10, 0.1);
  --data-sky-soft: rgba(42, 107, 168, 0.1);

  --series-1: #0f8a80;
  --series-2: #3b6fd6;
  --series-3: #9553d9;
  --series-4: #b0740c;
  --series-5: #d13c5e;
  --series-6: #5f8f19;
  --series-7: #0f86a8;
  --series-8: #d0591b;
  --series-9: #c93d8d;
  --series-10: #5f5fd8;
  --series-11: #148a63;
  --series-12: #2b78b8;
  --series-13: #b03bc2;
  --series-14: #97690f;
  --series-15: #b7481f;
  --series-16: #2b8f4a;
  --series-17: #1f9e94;
  --series-18: #4b7fe8;
  --series-19: #a462e6;
  --series-20: #e04c6c;
  --series-21: #79a01f;
  --series-22: #1c97c0;
  --series-23: #e2702d;
  --series-24: #7b57d6;

  --success: #2c8a67;
  --success-text: #176a4c;
  --success-bg: rgba(44, 138, 103, 0.11);
  --success-border: rgba(44, 138, 103, 0.3);

  --warning: #a4711a;
  --warning-text: #7f5711;
  --warning-bg: rgba(164, 113, 26, 0.12);
  --warning-border: rgba(164, 113, 26, 0.32);
  --on-warning: #ffffff;

  --danger: #c23f5c;
  --danger-hover: #ad3550;
  --danger-text: #a8314c;
  --danger-bg: rgba(194, 63, 92, 0.1);
  --danger-border: rgba(194, 63, 92, 0.3);

  --info: #3868b3;
  --info-text: #2f5c9e;
  --info-bg: rgba(56, 104, 179, 0.1);
  --info-border: rgba(56, 104, 179, 0.3);

  --neutral-text: #5a5470;
  --neutral-bg: rgba(112, 104, 138, 0.1);
  --neutral-border: rgba(112, 104, 138, 0.26);

  --focus-ring: #5a3fae;

  --shadow-sm: 0 1px 1px rgba(40, 30, 70, 0.05), 0 1px 3px rgba(40, 30, 70, 0.07);
  --shadow: 0 1px 2px rgba(40, 30, 70, 0.06), 0 4px 10px -2px rgba(40, 30, 70, 0.09);
  --shadow-md: 0 2px 4px rgba(40, 30, 70, 0.06), 0 12px 28px -6px rgba(40, 30, 70, 0.11);
  --shadow-lg: 0 4px 8px rgba(40, 30, 70, 0.07), 0 24px 56px -12px rgba(40, 30, 70, 0.14);

  --gradient-surface: linear-gradient(180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(40, 30, 70, 0.014) 100%);
  --gradient-raised: linear-gradient(180deg,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(40, 30, 70, 0.016) 100%);

  --gradient-accent: linear-gradient(180deg, #7a60cc 0%, #5f45b3 100%);
  --gradient-accent-hover: linear-gradient(180deg, #866dd6 0%, #6b4fbf 100%);
  --gradient-danger: linear-gradient(180deg, #cb4664 0%, #ab3450 100%);

  --gradient-rule: linear-gradient(90deg,
    var(--border-strong) 0%, var(--border) 45%, transparent 100%);

  --gradient-shimmer: linear-gradient(90deg,
    var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);

  --gradient-sidebar: linear-gradient(180deg,
    rgba(107, 79, 191, 0.05) 0%,
    rgba(29, 23, 48, 0.024) 100%);
}