/* ============================================================
   bahtui design tokens — 20baht design system, "ledger" retone.
   Minimal · flat · focused: near-black ink on white, hairline
   neutral borders, one indigo accent, IBM Plex Sans Thai.

   Every value below is a CSS custom property. Override any of
   them on :root (or any ancestor) to retheme — at build time,
   at runtime ("CSS on the fly"), or by injecting your own sheet.

   Fonts are NOT bundled. Load IBM Plex Sans Thai / IBM Plex Mono
   yourself (Google Fonts or self-hosted); the stacks below fall
   back to the system UI face until they arrive.
   ============================================================ */

:root {
  /* ---------- Raw scales (reference — prefer the semantic tokens below) ----------
     Neutral gray carries the whole UI; hue is reserved for status and the
     accent. --baht-green-* keeps its name: it is the documented override
     point that banknote themes swap wholesale (see apps/docs banknotes.css),
     and success + the coloured note palettes derive from it. */

  /* Green — success (and the banknote override ramp) */
  --baht-green-50: #f0fdf4;
  --baht-green-100: #dcfce7;
  --baht-green-200: #bbf7d0;
  --baht-green-300: #86efac; /* dark-mode success ink */
  --baht-green-400: #4ade80; /* dark-mode success */
  --baht-green-500: #22c55e;
  --baht-green-600: #16a34a; /* success */
  --baht-green-700: #15803d;
  --baht-green-750: #166534; /* success ink on the light tint */
  --baht-green-800: #14532d;
  --baht-green-900: #0f3d22;
  --baht-green-950: #052e16; /* content on green-400 */

  /* aliases — --baht-green-* stays the override point (banknote themes
     swap the whole scale); --baht-olive-* is kept for callers of the old name. */
  --baht-olive-50: var(--baht-green-50);
  --baht-olive-100: var(--baht-green-100);
  --baht-olive-200: var(--baht-green-200);
  --baht-olive-300: var(--baht-green-300);
  --baht-olive-400: var(--baht-green-400);
  --baht-olive-500: var(--baht-green-500);
  --baht-olive-600: var(--baht-green-600);
  --baht-olive-700: var(--baht-green-700);
  --baht-olive-750: var(--baht-green-750);
  --baht-olive-800: var(--baht-green-800);
  --baht-olive-900: var(--baht-green-900);
  --baht-olive-950: var(--baht-green-950);

  /* Canvas — white page, light-gray wells. (name kept from the paper era) */
  --baht-cream-50: #ffffff;
  --baht-cream-100: #ffffff; /* page background (base-200) */
  --baht-cream-200: #f5f5f5; /* sunken wells, rails */
  --baht-cream-300: #e5e5e5; /* hairline border */
  --baht-cream-400: #d4d4d4;

  /* Ink — pure neutral gray, no warm or cool cast */
  --baht-gray-50: #fafafa; /* zebra rows */
  --baht-gray-100: #f5f5f5; /* row divider */
  --baht-gray-200: #e5e5e5; /* border */
  --baht-gray-300: #d4d4d4; /* strong border */
  --baht-gray-400: #a3a3a3;
  --baht-gray-500: #737373; /* tertiary text */
  --baht-gray-600: #595959; /* secondary text */
  --baht-gray-700: #404040;
  --baht-gray-800: #262626; /* headings */
  --baht-gray-900: #0a0a0a; /* ink (body) */

  /* Rose — error dot / destructive (a red ramp under the legacy name) */
  --baht-rose-50: #fef2f2;
  --baht-rose-100: #fee2e2;
  --baht-rose-200: #fecaca;
  --baht-rose-300: #fca5a5; /* dark-mode secondary */
  --baht-rose-400: #f87171;
  --baht-rose-500: #ef4444; /* error dot */
  --baht-rose-600: #dc2626;
  --baht-rose-700: #b91c1c;
  --baht-rose-800: #991b1b;
  --baht-rose-900: #450a0a; /* content on rose-300 */

  /* Gold — amber, the warning tone */
  --baht-gold-50: #fff5e3; /* warning tint */
  --baht-gold-300: #fcd34d; /* dark-mode warning ink */
  --baht-gold-400: #fbbf24; /* dark-mode warning */
  --baht-gold-500: #f59e0b; /* warning */
  --baht-gold-600: #d97706;
  --baht-gold-700: #8a5f10; /* warning ink on the light tint (5.2:1 on gold-50) */
  --baht-gold-900: #451a03; /* content on gold-400 */

  /* Lime — legacy warning name, now aliases amber */
  --baht-lime-400: var(--baht-gold-400);
  --baht-lime-500: var(--baht-gold-500);
  --baht-lime-900: var(--baht-gold-900);

  /* Red — error */
  --baht-red-50: #fef2f2;
  --baht-red-300: #fca5a5; /* dark-mode error */
  --baht-red-400: #f87171;
  --baht-red-500: #dc2626; /* error */
  --baht-red-600: #991b1b; /* error ink on the light tint */
  --baht-red-700: #7f1d1d;
  --baht-red-900: #450a0a; /* content on red-300 */

  /* Slate — the one accent: note blue (links, info, highlights) */
  --baht-slate-50: #eaf1fb; /* info tint */
  --baht-slate-300: #7ea3d2; /* dark-mode info / accent */
  --baht-slate-500: #3465a8; /* info, accent */
  --baht-slate-600: #255492; /* link ink */
  --baht-slate-900: #14294a; /* content on slate-300 */

  /* ---------- Theme tier (daisyUI-style knobs — THE flexible theming API) ----------
     Override any of these on :root (or a wrapper, or inline style) and every
     semantic token below derives from them. Hover/active/tint shades are
     computed with color-mix, so one --baht-primary swap rethemes everything.

     Distribution rule: the page and every surface are white; separation is a
     1px hairline, never a fill. Ink (near-black) is the primary — it appears
     on the primary button, the table header and the active nav. Colour is
     spent only on status pills and the indigo accent (links, info). */
  --baht-base-100: #ffffff; /* surfaces: cards, tables, inputs, modals */
  --baht-base-200: var(--baht-cream-100); /* page background */
  --baht-base-300: var(--baht-cream-200); /* sunken wells, rails, code chips */
  --baht-base-content: var(--baht-gray-900);
  --baht-row-alt: var(--baht-gray-50); /* zebra rows: a 2% step off the surface, not 10% */

  --baht-primary: #171717; /* ink button */
  --baht-primary-content: #fafafa;
  --baht-secondary: var(--baht-gray-100); /* quiet fill: secondary buttons, chips */
  --baht-secondary-content: var(--baht-gray-900);
  --baht-accent: var(--baht-slate-500); /* indigo: links, highlights, Pro tags */
  --baht-accent-content: #ffffff;
  --baht-neutral: #171717; /* table header, inverse blocks */
  --baht-neutral-content: #fafafa;

  --baht-info: var(--baht-slate-500);
  --baht-info-content: #ffffff;
  --baht-success: var(--baht-green-600);
  --baht-success-content: #ffffff;
  --baht-warning: var(--baht-gold-500);
  --baht-warning-content: var(--baht-gold-900);
  --baht-error: var(--baht-red-500);
  --baht-error-content: #ffffff;

  /* Status tints — the pill pairs used for scanning a table column.
     A pale tint with its own dark ink; the dot carries the saturated hue. */
  --baht-success-tint: var(--baht-green-50);
  --baht-success-ink: var(--baht-green-750);
  --baht-success-dot: var(--baht-green-600);
  --baht-warning-tint: var(--baht-gold-50);
  --baht-warning-ink: var(--baht-gold-700);
  --baht-warning-dot: var(--baht-gold-500);
  --baht-error-tint: var(--baht-red-50);
  --baht-error-ink: var(--baht-red-600);
  --baht-error-dot: var(--baht-rose-500);
  --baht-info-tint: var(--baht-slate-50);
  --baht-info-ink: var(--baht-slate-600);
  --baht-info-dot: var(--baht-slate-500);

  /* ---------- Semantic colors (stable names components consume) ---------- */
  --baht-color-bg: var(--baht-base-200);
  --baht-color-bg-elev: var(--baht-base-100);
  --baht-color-bg-sunken: var(--baht-base-300);
  --baht-color-bg-inverse: var(--baht-neutral);

  --baht-color-surface: var(--baht-base-100);
  --baht-color-surface-alt: var(--baht-gray-50);
  --baht-color-row-alt: var(--baht-row-alt);

  --baht-color-text: var(--baht-base-content);
  --baht-color-text-muted: var(--baht-gray-600);
  --baht-color-text-subtle: var(--baht-gray-500);
  --baht-color-text-inverse: var(--baht-neutral-content);

  --baht-color-border: var(--baht-cream-300);
  --baht-color-border-cool: var(--baht-gray-200);
  --baht-color-border-strong: var(--baht-gray-300);
  /* Input borders must hit 3:1 against the surface (WCAG 1.4.11); hairline
     gray does not, so controls get a mid-gray of their own. */
  --baht-color-border-control: #949494; /* 3.0:1 on white */
  --baht-color-divider: var(--baht-gray-100);

  /* border shorthands — one place to change width + colour together */
  --baht-border-default: 1px solid var(--baht-color-border);
  --baht-border-cool: 1px solid var(--baht-color-border-cool);

  --baht-color-primary: var(--baht-primary);
  /* ink cannot darken further, so hover/active lift toward white instead */
  --baht-color-primary-hover: color-mix(in oklab, var(--baht-primary) 86%, white);
  --baht-color-primary-active: color-mix(in oklab, var(--baht-primary) 74%, white);
  --baht-color-primary-tint: color-mix(in oklab, var(--baht-primary) 8%, white);
  /* translucent washes for hover/selection on any surface */
  --baht-color-primary-wash: color-mix(in oklab, var(--baht-primary) 5%, transparent);
  --baht-color-primary-wash-active: color-mix(in oklab, var(--baht-primary) 9%, transparent);
  --baht-color-primary-contrast: var(--baht-primary-content);

  --baht-color-secondary: var(--baht-secondary);
  --baht-color-secondary-contrast: var(--baht-secondary-content);
  --baht-color-accent: var(--baht-accent);
  --baht-color-accent-contrast: var(--baht-accent-content);

  --baht-color-success: var(--baht-success);
  --baht-color-warning: var(--baht-warning);
  --baht-color-danger: var(--baht-error);
  --baht-color-danger-hover: color-mix(in oklab, var(--baht-error) 84%, black);
  --baht-color-info: var(--baht-info);

  --baht-color-error: var(--baht-error); /* alias kept for form validation styling */
  --baht-color-link: var(--baht-slate-600);
  --baht-color-focus: var(--baht-primary);

  --baht-focus-ring: 2px solid var(--baht-color-focus);

  /* shadow ink as an rgb triple so alphas can be mixed in */
  --baht-color-shadow-ink: 0, 0, 0;

  /* ---------- Typography ---------- */
  --baht-font-display:
    'IBM Plex Sans Thai', 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --baht-font-family:
    'IBM Plex Sans Thai', 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --baht-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* type scale */
  --baht-text-xs: 0.75rem; /* 12px */
  --baht-text-sm: 0.8125rem; /* 13px */
  --baht-text-base: 0.9375rem; /* 15px */
  --baht-text-md: 1rem; /* 16px */
  --baht-text-lg: 1.125rem; /* 18px */
  --baht-text-xl: 1.25rem; /* 20px */
  --baht-text-2xl: 1.5rem; /* 24px */

  --baht-font-size: 0.875rem; /* 14px */
  --baht-font-size-label: var(
    --baht-font-size
  ); /* 14px — label reads as the field's name, not a caption */
  --baht-font-size-error: var(--baht-text-xs);
  --baht-font-size-control: var(--baht-font-size);
  --baht-font-weight-label: 600;

  --baht-leading-tight: 1.1;
  --baht-leading-normal: 1.5;
  --baht-tracking-tight: -0.02em;
  --baht-tracking-widest: 0.12em;

  /* ---------- Spacing (4px base) ---------- */
  --baht-space-1: 4px;
  --baht-space-2: 8px;
  --baht-space-3: 12px;
  --baht-space-4: 16px;
  --baht-space-5: 20px;
  --baht-space-6: 24px;
  --baht-space-8: 32px;
  --baht-space-10: 40px;
  --baht-space-12: 48px;

  /* ---------- Radii (three knobs, daisyUI-style) ----------
     Softer than the original "ledger" pass (paypers.ai shape reference,
     2026-09-17): rounder fields and boxes, same one-accent palette. */
  --baht-radius-field: 14px; /* inputs, buttons */
  --baht-radius-box: 20px; /* cards, panels, modals */
  --baht-radius-selector: 999px; /* checkboxes, toggles, badges, pills */
  /* derived aliases (older names, still honoured) */
  --baht-radius-xs: 4px; /* chips, badges */
  --baht-radius-sm: 8px; /* inputs (small), menu items */
  --baht-radius: var(--baht-radius-field);
  --baht-radius-md: var(--baht-radius-box);
  --baht-radius-lg: 24px; /* large cards, modals */
  --baht-radius-pill: var(--baht-radius-selector);

  /* ---------- Borders / effects ---------- */
  --baht-border-width: 1px;
  --baht-border: var(--baht-border-width) solid var(--baht-color-border-cool);
  --baht-depth: 0; /* reserved: extra elevation multiplier */
  --baht-noise: 0; /* reserved: grain overlay opacity (always 0 in this theme) */

  /* ---------- Shadows (two elevations only, never inner) ----------
     Flat by default: lift is a 1px hint under menus and raised buttons; float
     is the only real shadow and belongs to modals and popovers. */
  --baht-shadow-lift:
    0 1px 3px rgba(var(--baht-color-shadow-ink), 0.08),
    0 1px 2px -1px rgba(var(--baht-color-shadow-ink), 0.06);
  --baht-shadow-float:
    0 2px 6px rgba(var(--baht-color-shadow-ink), 0.06),
    0 12px 32px -8px rgba(var(--baht-color-shadow-ink), 0.12);

  /* ---------- Motion ("paper" ease — quick start, gentle settle) ---------- */
  --baht-ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --baht-dur-fast: 120ms;
  --baht-dur-base: 200ms;
  --baht-dur-slow: 320ms;

  /* ---------- Controls ---------- */
  --baht-size-field: 0.275rem; /* control height = size-field × 10 (0.275rem → 44px) */
  --baht-size-selector: 0.25rem; /* reserved: checkbox/toggle geometry */
  --baht-control-height: calc(var(--baht-size-field) * 10);
  --baht-control-padding-x: var(--baht-space-4);
  --baht-field-gap: var(--baht-space-6); /* 24px — one field reads as one block */
}

/* iOS Safari zooms into a focused input under 16px */
@media (pointer: coarse) {
  :root {
    --baht-font-size-control: max(16px, var(--baht-font-size));
  }
}

/* ============================================================
   Theme scope — a [data-baht-theme] / .baht-dark WRAPPER re-derives every
   token that is computed from another one. Custom properties resolve where
   they are declared, so tokens declared only on :root reach descendants
   already resolved: a dark wrapper flipped the raw ramps but kept light
   surfaces and text. Literal knobs are not repeated (a host's own :root
   overrides still inherit). Generated from the :root block above; the
   tokens spec fails if the two drift.
   ============================================================ */
/* @generated theme-scope */
/* jscpd:ignore-start */
[data-baht-theme],
.baht-dark,
.baht-light {
  --baht-olive-50: var(--baht-green-50);
  --baht-olive-100: var(--baht-green-100);
  --baht-olive-200: var(--baht-green-200);
  --baht-olive-300: var(--baht-green-300);
  --baht-olive-400: var(--baht-green-400);
  --baht-olive-500: var(--baht-green-500);
  --baht-olive-600: var(--baht-green-600);
  --baht-olive-700: var(--baht-green-700);
  --baht-olive-750: var(--baht-green-750);
  --baht-olive-800: var(--baht-green-800);
  --baht-olive-900: var(--baht-green-900);
  --baht-olive-950: var(--baht-green-950);
  --baht-lime-400: var(--baht-gold-400);
  --baht-lime-500: var(--baht-gold-500);
  --baht-lime-900: var(--baht-gold-900);
  --baht-base-200: var(--baht-cream-100);
  --baht-base-300: var(--baht-cream-200);
  --baht-base-content: var(--baht-gray-900);
  --baht-row-alt: var(--baht-gray-50);
  --baht-secondary: var(--baht-gray-100);
  --baht-secondary-content: var(--baht-gray-900);
  --baht-accent: var(--baht-slate-500);
  --baht-info: var(--baht-slate-500);
  --baht-success: var(--baht-green-600);
  --baht-warning: var(--baht-gold-500);
  --baht-warning-content: var(--baht-gold-900);
  --baht-error: var(--baht-red-500);
  --baht-success-tint: var(--baht-green-50);
  --baht-success-ink: var(--baht-green-750);
  --baht-success-dot: var(--baht-green-600);
  --baht-warning-tint: var(--baht-gold-50);
  --baht-warning-ink: var(--baht-gold-700);
  --baht-warning-dot: var(--baht-gold-500);
  --baht-error-tint: var(--baht-red-50);
  --baht-error-ink: var(--baht-red-600);
  --baht-error-dot: var(--baht-rose-500);
  --baht-info-tint: var(--baht-slate-50);
  --baht-info-ink: var(--baht-slate-600);
  --baht-info-dot: var(--baht-slate-500);
  --baht-color-bg: var(--baht-base-200);
  --baht-color-bg-elev: var(--baht-base-100);
  --baht-color-bg-sunken: var(--baht-base-300);
  --baht-color-bg-inverse: var(--baht-neutral);
  --baht-color-surface: var(--baht-base-100);
  --baht-color-surface-alt: var(--baht-gray-50);
  --baht-color-row-alt: var(--baht-row-alt);
  --baht-color-text: var(--baht-base-content);
  --baht-color-text-muted: var(--baht-gray-600);
  --baht-color-text-subtle: var(--baht-gray-500);
  --baht-color-text-inverse: var(--baht-neutral-content);
  --baht-color-border: var(--baht-cream-300);
  --baht-color-border-cool: var(--baht-gray-200);
  --baht-color-border-strong: var(--baht-gray-300);
  --baht-color-divider: var(--baht-gray-100);
  --baht-border-default: 1px solid var(--baht-color-border);
  --baht-border-cool: 1px solid var(--baht-color-border-cool);
  --baht-color-primary: var(--baht-primary);
  --baht-color-primary-hover: color-mix(in oklab, var(--baht-primary) 86%, white);
  --baht-color-primary-active: color-mix(in oklab, var(--baht-primary) 74%, white);
  --baht-color-primary-tint: color-mix(in oklab, var(--baht-primary) 8%, white);
  --baht-color-primary-wash: color-mix(in oklab, var(--baht-primary) 5%, transparent);
  --baht-color-primary-wash-active: color-mix(in oklab, var(--baht-primary) 9%, transparent);
  --baht-color-primary-contrast: var(--baht-primary-content);
  --baht-color-secondary: var(--baht-secondary);
  --baht-color-secondary-contrast: var(--baht-secondary-content);
  --baht-color-accent: var(--baht-accent);
  --baht-color-accent-contrast: var(--baht-accent-content);
  --baht-color-success: var(--baht-success);
  --baht-color-warning: var(--baht-warning);
  --baht-color-danger: var(--baht-error);
  --baht-color-danger-hover: color-mix(in oklab, var(--baht-error) 84%, black);
  --baht-color-info: var(--baht-info);
  --baht-color-error: var(--baht-error);
  --baht-color-link: var(--baht-slate-600);
  --baht-color-focus: var(--baht-primary);
  --baht-focus-ring: 2px solid var(--baht-color-focus);
  --baht-font-size-label: var(--baht-font-size);
  --baht-font-size-error: var(--baht-text-xs);
  --baht-font-size-control: var(--baht-font-size);
  --baht-radius: var(--baht-radius-field);
  --baht-radius-md: var(--baht-radius-box);
  --baht-radius-pill: var(--baht-radius-selector);
  --baht-border: var(--baht-border-width) solid var(--baht-color-border-cool);
  --baht-shadow-lift:
    0 1px 3px rgba(var(--baht-color-shadow-ink), 0.08),
    0 1px 2px -1px rgba(var(--baht-color-shadow-ink), 0.06);
  --baht-shadow-float:
    0 2px 6px rgba(var(--baht-color-shadow-ink), 0.06),
    0 12px 32px -8px rgba(var(--baht-color-shadow-ink), 0.12);
  --baht-control-height: calc(var(--baht-size-field) * 10);
  --baht-control-padding-x: var(--baht-space-4);
  --baht-field-gap: var(--baht-space-6);
  --baht-chart-6: var(--baht-gray-600);
  --baht-chart-7: var(--baht-gray-500);
  --baht-chart-8: var(--baht-gray-400);
  --baht-chart-9: var(--baht-gray-300);
  --baht-chart-10: var(--baht-gray-200);
  --baht-chart-muted: var(--baht-gray-300);
  --baht-chart-grid: var(--baht-gray-200);
  --baht-chart-surface: var(--baht-color-surface);
}
/* jscpd:ignore-end */
/* @end theme-scope */

/* ============================================================
   Dark theme — "20baht-dark". Opt in with [data-baht-theme="dark"] (or the
   .baht-dark class) on <html> or any wrapper. Default (no attribute) is
   light — dark never activates from OS preference alone.
   ============================================================ */

[data-baht-theme='dark'],
.baht-dark {
  /* The ramps re-anchor for a near-black canvas; every semantic token above
     derives from them, so only the values that genuinely invert are listed. */
  --baht-green-50: #0f2a1a; /* success tint */
  --baht-green-100: #14361f;
  --baht-green-200: #166534;
  --baht-green-300: #86efac; /* success ink on the dark tint */
  --baht-green-400: #4ade80; /* success */
  --baht-green-500: #22c55e;
  --baht-green-600: #4ade80; /* banknote primaries brighten so the button still leads */
  --baht-green-700: #86efac;
  --baht-green-750: #86efac;
  --baht-green-800: #14532d;
  --baht-green-900: #14361f;
  --baht-green-950: #052e16;

  --baht-cream-50: #e5e5e5; /* inverse ink */
  --baht-cream-100: #0a0a0a;
  --baht-cream-200: #171717;
  --baht-cream-300: #262626;
  --baht-cream-400: #333333;

  --baht-gray-50: #0a0a0a;
  --baht-gray-100: #171717;
  --baht-gray-200: #262626;
  --baht-gray-300: #333333;
  --baht-gray-400: #737373;
  --baht-gray-500: #8a8a8a;
  --baht-gray-600: #a3a3a3;
  --baht-gray-700: #c4c4c4;
  --baht-gray-800: #e5e5e5;
  --baht-gray-900: #fafafa;

  /* Charts — the same five hues re-stepped into OKLCH L 0.48-0.67 on the dark
     surface; validated (adjacent CVD ΔE 10.9 protan, normal-vision
     ΔE 20.0, every slot >= 3:1 on the surface). */
  --baht-chart-1: #0f7d4d;
  --baht-chart-2: #b58b13;
  --baht-chart-3: #3685ca;
  --baht-chart-4: #df3c2c;
  --baht-chart-5: #9570cc;

  /* Sequential ramp flips its anchor for the dark surface. */
  --baht-chart-seq-1: #186540;
  --baht-chart-seq-2: #2c8c5b;
  --baht-chart-seq-3: #4fa577;
  --baht-chart-seq-4: #82c39e;
  --baht-chart-seq-5: #b3dcc4;

  --baht-chart-muted: var(--baht-gray-400);
  --baht-chart-grid: var(--baht-gray-300);

  --baht-rose-50: #2a1414;
  --baht-rose-100: #3a1a1a;
  --baht-rose-200: #4a2020;
  --baht-rose-300: #fca5a5;
  --baht-rose-400: #f87171;
  --baht-rose-500: #f87171; /* error dot */
  --baht-rose-600: #fca5a5;
  --baht-rose-700: #ef4444;
  --baht-rose-800: #991b1b;

  --baht-gold-50: #2a2010; /* warning tint */
  --baht-gold-400: #fcd34d;
  --baht-gold-500: #fbbf24; /* warning */
  --baht-gold-600: #f59e0b;
  --baht-gold-700: #fcd34d; /* warning ink on the dark tint */

  --baht-red-50: #2a1414; /* error tint */
  --baht-red-400: #fca5a5;
  --baht-red-500: #f87171; /* error */
  --baht-red-600: #fca5a5; /* error ink on the dark tint */
  --baht-red-700: #ef4444;

  --baht-slate-50: #0f1d33; /* info tint */
  --baht-slate-500: #7ea3d2; /* info, accent */
  --baht-slate-600: #a8c8f0; /* link ink */

  /* Dark inverts one distribution rule: the card is *lighter* than the page
     (surface base-100 over the base-200 app background). */
  --baht-base-100: #171717; /* surfaces: panels, tables, inputs, modals */
  --baht-base-300: var(--baht-cream-300);
  --baht-row-alt: #141414;

  /* ink flips: the primary button is now the brightest thing on screen */
  --baht-primary: #fafafa;
  --baht-primary-content: #171717;
  --baht-secondary: var(--baht-gray-200);
  --baht-secondary-content: var(--baht-gray-900);
  --baht-accent-content: var(--baht-slate-900);
  --baht-neutral: var(--baht-gray-200);
  --baht-neutral-content: #fafafa;
  --baht-info-content: var(--baht-slate-900);
  --baht-success: var(--baht-green-400);
  --baht-success-content: var(--baht-green-950);
  --baht-warning-content: var(--baht-gold-900);
  --baht-error-content: var(--baht-red-900);
  --baht-error-dot: var(--baht-red-500);

  --baht-color-surface-alt: #1f1f1f;
  --baht-color-divider: #222222;
  --baht-color-border-control: var(--baht-gray-400); /* 3.8:1 on the dark surface */

  /* the light-mode mixes lift a black primary toward white; on a dark canvas
     the primary is white, so hover/active settle toward black instead. */
  --baht-color-primary-hover: color-mix(in oklab, var(--baht-primary) 88%, black);
  --baht-color-primary-active: color-mix(in oklab, var(--baht-primary) 76%, black);
  --baht-color-primary-tint: color-mix(in oklab, var(--baht-primary) 12%, var(--baht-base-100));
  --baht-color-primary-wash: color-mix(in oklab, var(--baht-primary) 8%, transparent);
  --baht-color-primary-wash-active: color-mix(in oklab, var(--baht-primary) 14%, transparent);
  --baht-color-danger-hover: color-mix(in oklab, var(--baht-error) 88%, white);
  --baht-color-link: var(--baht-slate-600);

  --baht-color-shadow-ink: 0, 0, 0;
  --baht-shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px -2px rgba(0, 0, 0, 0.5);
  --baht-shadow-float: 0 4px 16px rgba(0, 0, 0, 0.5), 0 24px 48px -8px rgba(0, 0, 0, 0.6);
}

/* @generated theme-light */
/* jscpd:ignore-start */
[data-baht-theme='light'],
.baht-light {
  --baht-green-50: #f0fdf4;
  --baht-green-100: #dcfce7;
  --baht-green-200: #bbf7d0;
  --baht-green-300: #86efac;
  --baht-green-400: #4ade80;
  --baht-green-500: #22c55e;
  --baht-green-600: #16a34a;
  --baht-green-700: #15803d;
  --baht-green-750: #166534;
  --baht-green-800: #14532d;
  --baht-green-900: #0f3d22;
  --baht-green-950: #052e16;
  --baht-cream-50: #ffffff;
  --baht-cream-100: #ffffff;
  --baht-cream-200: #f5f5f5;
  --baht-cream-300: #e5e5e5;
  --baht-cream-400: #d4d4d4;
  --baht-gray-50: #fafafa;
  --baht-gray-100: #f5f5f5;
  --baht-gray-200: #e5e5e5;
  --baht-gray-300: #d4d4d4;
  --baht-gray-400: #a3a3a3;
  --baht-gray-500: #737373;
  --baht-gray-600: #595959;
  --baht-gray-700: #404040;
  --baht-gray-800: #262626;
  --baht-gray-900: #0a0a0a;
  --baht-chart-1: #1f7a4e;
  --baht-chart-2: #b8912e;
  --baht-chart-3: #2f6a9f;
  --baht-chart-4: #c44536;
  --baht-chart-5: #7b5ea7;
  --baht-chart-seq-1: #82c39e;
  --baht-chart-seq-2: #4fa577;
  --baht-chart-seq-3: #2c8c5b;
  --baht-chart-seq-4: #186540;
  --baht-chart-seq-5: #0d3422;
  --baht-chart-muted: var(--baht-gray-300);
  --baht-chart-grid: var(--baht-gray-200);
  --baht-rose-50: #fef2f2;
  --baht-rose-100: #fee2e2;
  --baht-rose-200: #fecaca;
  --baht-rose-300: #fca5a5;
  --baht-rose-400: #f87171;
  --baht-rose-500: #ef4444;
  --baht-rose-600: #dc2626;
  --baht-rose-700: #b91c1c;
  --baht-rose-800: #991b1b;
  --baht-gold-50: #fff5e3;
  --baht-gold-400: #fbbf24;
  --baht-gold-500: #f59e0b;
  --baht-gold-600: #d97706;
  --baht-gold-700: #8a5f10;
  --baht-red-50: #fef2f2;
  --baht-red-400: #f87171;
  --baht-red-500: #dc2626;
  --baht-red-600: #991b1b;
  --baht-red-700: #7f1d1d;
  --baht-slate-50: #eaf1fb;
  --baht-slate-500: #3465a8;
  --baht-slate-600: #255492;
  --baht-base-100: #ffffff;
  --baht-base-300: var(--baht-cream-200);
  --baht-row-alt: var(--baht-gray-50);
  --baht-primary: #171717;
  --baht-primary-content: #fafafa;
  --baht-secondary: var(--baht-gray-100);
  --baht-secondary-content: var(--baht-gray-900);
  --baht-accent-content: #ffffff;
  --baht-neutral: #171717;
  --baht-neutral-content: #fafafa;
  --baht-info-content: #ffffff;
  --baht-success: var(--baht-green-600);
  --baht-success-content: #ffffff;
  --baht-warning-content: var(--baht-gold-900);
  --baht-error-content: #ffffff;
  --baht-error-dot: var(--baht-rose-500);
  --baht-color-surface-alt: var(--baht-gray-50);
  --baht-color-divider: var(--baht-gray-100);
  --baht-color-border-control: #949494;
  --baht-color-primary-hover: color-mix(in oklab, var(--baht-primary) 86%, white);
  --baht-color-primary-active: color-mix(in oklab, var(--baht-primary) 74%, white);
  --baht-color-primary-tint: color-mix(in oklab, var(--baht-primary) 8%, white);
  --baht-color-primary-wash: color-mix(in oklab, var(--baht-primary) 5%, transparent);
  --baht-color-primary-wash-active: color-mix(in oklab, var(--baht-primary) 9%, transparent);
  --baht-color-danger-hover: color-mix(in oklab, var(--baht-error) 84%, black);
  --baht-color-link: var(--baht-slate-600);
  --baht-color-shadow-ink: 0, 0, 0;
  --baht-shadow-lift:
    0 1px 3px rgba(var(--baht-color-shadow-ink), 0.08),
    0 1px 2px -1px rgba(var(--baht-color-shadow-ink), 0.06);
  --baht-shadow-float:
    0 2px 6px rgba(var(--baht-color-shadow-ink), 0.06),
    0 12px 32px -8px rgba(var(--baht-color-shadow-ink), 0.12);
}
/* jscpd:ignore-end */
/* @end theme-light */

/* the surrounding page follows the theme too, when the host opts in */
[data-baht-theme] {
  color-scheme: light;
}
[data-baht-theme='dark'],
.baht-dark {
  color-scheme: dark;
}