/* ===================================
   THEME SYSTEM
   Predefined color themes for the application
   =================================== */

/*
 * Default palette — "The House · Light" (redesign).
 * Theme resolution lives in js/theme-loader.js: users with no stored
 * preference get 'system', which resolves to thehouse-light or
 * thehouse-dark from the OS appearance. :root carries the light values
 * so pages render correctly before (or without) JS, and so legacy
 * themes inherit sensible fallbacks for the redesign-only tokens.
 */
/* color-scheme tells the BROWSER which way the page leans, which is the only
   way to reach UI it renders itself: a <select>'s native option popup, the
   date/time picker panels, scrollbars, autofill's yellow wash, and the default
   caret. Now that form fields follow the theme, a dark field whose dropdown
   opens as a white sheet is the remaining seam. Declared per theme rather than
   once, because both light and dark accents exist. */
:root {
  color-scheme: light;

  /* Primary Brand Colors */
  --primary-color: #dd7200;
  --primary-hover: #b45c00;
  --secondary-color: #b45c00;
  --secondary-hover: #9a4e00;

  /* Background Colors */
  --background-color: #faf8f5;
  --card-background: #ffffff;
  --card-background-hover: #f4f1ec;

  /* Text Colors */
  --text-color: #292524;
  --text-secondary: #57534e;
  --text-muted: #6f6a64;
  --modal-text-color: #292524;

  /* UI Element Colors */
  --border-color: #e8e3dc;
  --table-border-color: #e8e3dc;
  --divider-color: #f0ece6;

  /* Status Colors */
  --success-color: #51cf66;
  --success-bg: #e8f5e9;
  --error-color: #ff6b6b;
  --error-bg: #ffebee;
  --warning-color: #f59e0b;
  --warning-bg: #fff3e0;
  --info-color: #3b82f6;
  --info-bg: #e3f2fd;

  /* Shadow System — resting cards use borders; shadows are for
     hover-lift (md), popovers (lg), and modals (xl) */
  --shadow-sm: 0 1px 2px 0 rgba(41, 37, 36, 0.04);
  --shadow-md: 0 6px 16px rgba(41, 37, 36, 0.08);
  --shadow-lg: 0 12px 32px rgba(41, 37, 36, 0.14);
  --shadow-xl: 0 24px 64px rgba(28, 25, 23, 0.35);

  /* Redesign Tokens (new) — fallback values match thehouse-light */
  --canvas: #faf8f5;
  --surface: #ffffff;
  --border-color-soft: #e8e3dc;
  --hairline: #f0ece6;
  --hover-bg: #f4f1ec;
  --input-border: #d6d0c8;
  --text-faint: #a8a29e;
  --brand: #dd7200;
  --brand-solid: #b75f00;
  --brand-solid-hover: #b45c00;
  --brand-hover: #b45c00;
  --on-brand: #ffffff;
  --danger-solid: #d1242f;
  --danger-text: #b42318;
  --danger-border: #ecc7c3;
  --danger-bg: #fde8e8;
  --focus-ring: 0 0 0 3px rgba(221, 114, 0, 0.18);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* Spacing Scale */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;

  /* Z-Index Scale */
  --z-dropdown: 1000;
  --z-modal: 2000;
  --z-toast: 10000;
}

/* The House — Light (redesign). Explicit block so it can be selected
   directly; values mirror :root. */
[data-theme='thehouse-light'] {
  --primary-color: #dd7200;
  --primary-hover: #b45c00;
  --secondary-color: #b45c00;
  --secondary-hover: #9a4e00;

  --background-color: #faf8f5;
  --card-background: #ffffff;
  --card-background-hover: #f4f1ec;

  --text-color: #292524;
  --text-secondary: #57534e;
  --text-muted: #6f6a64;
  --modal-text-color: #292524;

  --border-color: #e8e3dc;
  --table-border-color: #e8e3dc;
  --divider-color: #f0ece6;

  --success-color: #51cf66;
  --success-bg: #e8f5e9;
  --error-color: #ff6b6b;
  --error-bg: #ffebee;
  --warning-color: #f59e0b;
  --warning-bg: #fff3e0;
  --info-color: #3b82f6;
  --info-bg: #e3f2fd;

  --shadow-sm: 0 1px 2px 0 rgba(41, 37, 36, 0.04);
  --shadow-md: 0 6px 16px rgba(41, 37, 36, 0.08);
  --shadow-lg: 0 12px 32px rgba(41, 37, 36, 0.14);
  --shadow-xl: 0 24px 64px rgba(28, 25, 23, 0.35);

  --canvas: #faf8f5;
  --surface: #ffffff;
  --border-color-soft: #e8e3dc;
  --hairline: #f0ece6;
  --hover-bg: #f4f1ec;
  --input-border: #d6d0c8;
  --text-faint: #a8a29e;
  --brand: #dd7200;
  --brand-solid: #b75f00;
  --brand-solid-hover: #b45c00;
  --brand-hover: #b45c00;
  --on-brand: #ffffff;
  --danger-solid: #d1242f;
  --danger-text: #b42318;
  --danger-border: #ecc7c3;
  --danger-bg: #fde8e8;
  --focus-ring: 0 0 0 3px rgba(221, 114, 0, 0.18);
}

/* The House — Dark (redesign). Brand stays #dd7200; hover brightens
   instead of darkening. */
[data-theme='thehouse-dark'] {
  --primary-color: #dd7200;
  --primary-hover: #f08c1e;
  --secondary-color: #f08c1e;
  --secondary-hover: #f5a04c;

  --background-color: #1b1917;
  --card-background: #262220;
  --card-background-hover: #322d28;

  --text-color: #f4f1ec;
  --text-secondary: #b3aca4;
  --text-muted: #a09992;
  /* modal-v2 is theme-aware; only the four print-coupled modals
     (user-history/lookup, Oases lookup, sessions, discrepancy) stay
     light-pinned, so --modal-text-color is kept dark for those. */
  --modal-text-color: #292524;

  --border-color: #35302b;
  --table-border-color: #35302b;
  --divider-color: #2e2925;

  --success-color: #57c46a;
  --success-bg: rgba(87, 196, 106, 0.16);
  --error-color: #f47067;
  --error-bg: rgba(244, 112, 103, 0.16);
  --warning-color: #e3b341;
  --warning-bg: rgba(227, 179, 65, 0.16);
  --info-color: #79aef2;
  --info-bg: rgba(121, 174, 242, 0.16);

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);

  --canvas: #1b1917;
  --surface: #262220;
  --border-color-soft: #35302b;
  --hairline: #2e2925;
  --hover-bg: #322d28;
  --input-border: #4a443e;
  --text-faint: #7d766f;
  --brand: #dd7200;
  --brand-solid: #b75f00;
  --brand-solid-hover: #b1620c;
  --brand-hover: #f08c1e;
  --on-brand: #ffffff;
  --danger-solid: #e5484d;
  --danger-text: #f47067;
  --danger-border: rgba(244, 112, 103, 0.35);
  --danger-bg: rgba(244, 112, 103, 0.16);
  --focus-ring: 0 0 0 3px rgba(221, 114, 0, 0.3);
}

/* Custom Theme base. Full redesign token contract with the thehouse-dark
   values as its base — custom users historically built their palettes on the
   dark gray default, so their stored text/background picks assume a dark
   base. theme-loader.js / settings.js layer the user's four custom colors
   (primary, secondary, background, card) on top as inline vars, mapped onto
   both the legacy vars and --canvas/--surface/--brand/--brand-hover. Text
   ramps, borders, status colors and shadows stay from this dark base. */
[data-theme='custom'] {
  --primary-color: #dd7200;
  --primary-hover: #f08c1e;
  --secondary-color: #f08c1e;
  --secondary-hover: #f5a04c;

  --background-color: #1b1917;
  --card-background: #262220;
  --card-background-hover: #322d28;

  --text-color: #f4f1ec;
  --text-secondary: #b3aca4;
  --text-muted: #a09992;
  /* modal-v2 is theme-aware; only the four print-coupled modals
     (user-history/lookup, Oases lookup, sessions, discrepancy) stay
     light-pinned, so --modal-text-color is kept dark for those. */
  --modal-text-color: #292524;

  --border-color: #35302b;
  --table-border-color: #35302b;
  --divider-color: #2e2925;

  --success-color: #57c46a;
  --success-bg: rgba(87, 196, 106, 0.16);
  --error-color: #f47067;
  --error-bg: rgba(244, 112, 103, 0.16);
  --warning-color: #e3b341;
  --warning-bg: rgba(227, 179, 65, 0.16);
  --info-color: #79aef2;
  --info-bg: rgba(121, 174, 242, 0.16);

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);

  --canvas: #1b1917;
  --surface: #262220;
  --border-color-soft: #35302b;
  --hairline: #2e2925;
  --hover-bg: #322d28;
  --input-border: #4a443e;
  --text-faint: #7d766f;
  --brand: #dd7200;
  --brand-solid: #b75f00;
  --brand-solid-hover: #b1620c;
  --brand-hover: #f08c1e;
  --on-brand: #ffffff;
  --danger-solid: #e5484d;
  --danger-text: #f47067;
  --danger-border: rgba(244, 112, 103, 0.35);
  --danger-bg: rgba(244, 112, 103, 0.16);
  --focus-ring: 0 0 0 3px rgba(221, 114, 0, 0.3);
}

/* ===================================
   OPTIMIZED ACCENT FAMILY (redesign)
   13 accents x light/dark — full-coverage two-axis (accent x mode).
   Generated from the Custom Themes OKLCH recipe
   (design_handoff/generated/accent_themes.css). Each block mirrors the
   thehouse-light/thehouse-dark token contract. Supersedes the old
   single-value accent blocks (ocean/forest/sunset/midnight/crimson/
   amber/emerald/violet/slate/rose).
   =================================== */
[data-theme='crimson-light'] {
  --primary-color: #ce514d;
  --primary-hover: #b63b39;
  --secondary-color: #b63b39;
  --secondary-hover: #b63b39;
  --background-color: #fef9f8;
  --card-background: #ffffff;
  --card-background-hover: #f9f1f1;
  --text-color: #322524;
  --text-secondary: #635452;
  --text-muted: #80706f;
  --border-color: #e8dddc;
  --table-border-color: #e8dddc;
  --divider-color: #f2ebea;
  --modal-text-color: #292524;
  --success-color: #51cf66;
  --success-bg: #e8f5e9;
  --error-color: #ff6b6b;
  --error-bg: #ffebee;
  --warning-color: #f59e0b;
  --warning-bg: #fff3e0;
  --info-color: #3b82f6;
  --info-bg: #e3f2fd;
  --danger-solid: #d1242f;
  --danger-text: #b42318;
  --danger-border: #ecc7c3;
  --danger-bg: #fde8e8;
  --shadow-sm: 0 1px 2px 0 rgba(41, 37, 36, 0.04);
  --shadow-md: 0 6px 16px rgba(41, 37, 36, 0.08);
  --shadow-lg: 0 12px 32px rgba(41, 37, 36, 0.14);
  --shadow-xl: 0 24px 64px rgba(28, 25, 23, 0.35);
  --canvas: #fef9f8;
  --surface: #ffffff;
  --border-color-soft: #e8dddc;
  --hairline: #f2ebea;
  --hover-bg: #f9f1f1;
  --input-border: #dfd0cf;
  --text-faint: #a49492;
  --brand: #ce514d;
  --brand-hover: #b63b39;
  --brand-solid: #cc4b47;
  --brand-solid-hover: #b63b39;
  --focus-ring: 0 0 0 3px rgba(202, 85, 81, 0.25);
  --on-brand: #ffffff;
}
[data-theme='crimson-dark'] {
  --primary-color: #f2716a;
  --primary-hover: #fd8e86;
  --secondary-color: #fd8e86;
  --secondary-hover: #fd8e86;
  --background-color: #1d1514;
  --card-background: #2a201f;
  --card-background-hover: #382c2a;
  --text-color: #f4efee;
  --text-secondary: #c5bbba;
  --text-muted: #9c9190;
  --border-color: #483c3b;
  --table-border-color: #483c3b;
  --divider-color: #302827;
  --modal-text-color: #292524;
  --success-color: #57c46a;
  --success-bg: rgba(87, 196, 106, 0.16);
  --error-color: #f47067;
  --error-bg: rgba(244, 112, 103, 0.16);
  --warning-color: #e3b341;
  --warning-bg: rgba(227, 179, 65, 0.16);
  --info-color: #79aef2;
  --info-bg: rgba(121, 174, 242, 0.16);
  --danger-solid: #e5484d;
  --danger-text: #f47067;
  --danger-border: rgba(244, 112, 103, 0.35);
  --danger-bg: rgba(244, 112, 103, 0.16);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
  --canvas: #1d1514;
  --surface: #2a201f;
  --border-color-soft: #483c3b;
  --hairline: #302827;
  --hover-bg: #382c2a;
  --input-border: #5b4b4a;
  --text-faint: #786d6c;
  --brand: #f2716a;
  --brand-hover: #fd8e86;
  --brand-solid: #f2716a;
  --brand-solid-hover: #fd8e86;
  --focus-ring: 0 0 0 3px rgba(237, 117, 110, 0.3);
  --on-brand: #1d1514;
}
[data-theme='rose-light'] {
  --primary-color: #bf5883;
  --primary-hover: #a8436e;
  --secondary-color: #a8436e;
  --secondary-hover: #a8436e;
  --background-color: #fef9fa;
  --card-background: #ffffff;
  --card-background-hover: #f8f1f3;
  --text-color: #312529;
  --text-secondary: #625458;
  --text-muted: #7f7075;
  --border-color: #e7dce0;
  --table-border-color: #e7dce0;
  --divider-color: #f2ebed;
  --modal-text-color: #292524;
  --success-color: #51cf66;
  --success-bg: #e8f5e9;
  --error-color: #ff6b6b;
  --error-bg: #ffebee;
  --warning-color: #f59e0b;
  --warning-bg: #fff3e0;
  --info-color: #3b82f6;
  --info-bg: #e3f2fd;
  --danger-solid: #d1242f;
  --danger-text: #b42318;
  --danger-border: #ecc7c3;
  --danger-bg: #fde8e8;
  --shadow-sm: 0 1px 2px 0 rgba(41, 37, 36, 0.04);
  --shadow-md: 0 6px 16px rgba(41, 37, 36, 0.08);
  --shadow-lg: 0 12px 32px rgba(41, 37, 36, 0.14);
  --shadow-xl: 0 24px 64px rgba(28, 25, 23, 0.35);
  --canvas: #fef9fa;
  --surface: #ffffff;
  --border-color-soft: #e7dce0;
  --hairline: #f2ebed;
  --hover-bg: #f8f1f3;
  --input-border: #ded0d4;
  --text-faint: #a39399;
  --brand: #bf5883;
  --brand-hover: #a8436e;
  --brand-solid: #bc517e;
  --brand-solid-hover: #a8436e;
  --focus-ring: 0 0 0 3px rgba(195, 84, 131, 0.25);
  --on-brand: #ffffff;
}
[data-theme='rose-dark'] {
  --primary-color: #e177a1;
  --primary-hover: #f58db5;
  --secondary-color: #f58db5;
  --secondary-hover: #f58db5;
  --background-color: #1d1517;
  --card-background: #292023;
  --card-background-hover: #372b2f;
  --text-color: #f4eef0;
  --text-secondary: #c4bbbe;
  --text-muted: #9b9194;
  --border-color: #483c40;
  --table-border-color: #483c40;
  --divider-color: #30282a;
  --modal-text-color: #292524;
  --success-color: #57c46a;
  --success-bg: rgba(87, 196, 106, 0.16);
  --error-color: #f47067;
  --error-bg: rgba(244, 112, 103, 0.16);
  --warning-color: #e3b341;
  --warning-bg: rgba(227, 179, 65, 0.16);
  --info-color: #79aef2;
  --info-bg: rgba(121, 174, 242, 0.16);
  --danger-solid: #e5484d;
  --danger-text: #f47067;
  --danger-border: rgba(244, 112, 103, 0.35);
  --danger-bg: rgba(244, 112, 103, 0.16);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
  --canvas: #1d1517;
  --surface: #292023;
  --border-color-soft: #483c40;
  --hairline: #30282a;
  --hover-bg: #372b2f;
  --input-border: #5a4b50;
  --text-faint: #776d70;
  --brand: #e177a1;
  --brand-hover: #f58db5;
  --brand-solid: #e177a1;
  --brand-solid-hover: #f58db5;
  --focus-ring: 0 0 0 3px rgba(229, 115, 161, 0.3);
  --on-brand: #1d1517;
}
[data-theme='sunset-light'] {
  --primary-color: #b25aa7;
  --primary-hover: #9b4592;
  --secondary-color: #9b4592;
  --secondary-hover: #9b4592;
  --background-color: #fdf9fc;
  --card-background: #ffffff;
  --card-background-hover: #f7f2f6;
  --text-color: #2f252d;
  --text-secondary: #5f545d;
  --text-muted: #7c707a;
  --border-color: #e5dde3;
  --table-border-color: #e5dde3;
  --divider-color: #f0ebef;
  --modal-text-color: #292524;
  --success-color: #51cf66;
  --success-bg: #e8f5e9;
  --error-color: #ff6b6b;
  --error-bg: #ffebee;
  --warning-color: #f59e0b;
  --warning-bg: #fff3e0;
  --info-color: #3b82f6;
  --info-bg: #e3f2fd;
  --danger-solid: #d1242f;
  --danger-text: #b42318;
  --danger-border: #ecc7c3;
  --danger-bg: #fde8e8;
  --shadow-sm: 0 1px 2px 0 rgba(41, 37, 36, 0.04);
  --shadow-md: 0 6px 16px rgba(41, 37, 36, 0.08);
  --shadow-lg: 0 12px 32px rgba(41, 37, 36, 0.14);
  --shadow-xl: 0 24px 64px rgba(28, 25, 23, 0.35);
  --canvas: #fdf9fc;
  --surface: #ffffff;
  --border-color-soft: #e5dde3;
  --hairline: #f0ebef;
  --hover-bg: #f7f2f6;
  --input-border: #dbd1d9;
  --text-faint: #a0949e;
  --brand: #b25aa7;
  --brand-hover: #9b4592;
  --brand-solid: #af54a4;
  --brand-solid-hover: #9b4592;
  --focus-ring: 0 0 0 3px rgba(178, 90, 167, 0.25);
  --on-brand: #ffffff;
}
[data-theme='sunset-dark'] {
  --primary-color: #d378c7;
  --primary-hover: #e78fdb;
  --secondary-color: #e78fdb;
  --secondary-hover: #e78fdb;
  --background-color: #1b151a;
  --card-background: #282026;
  --card-background-hover: #352c33;
  --text-color: #f3eff2;
  --text-secondary: #c2bbc1;
  --text-muted: #999197;
  --border-color: #453d44;
  --table-border-color: #453d44;
  --divider-color: #2e282d;
  --modal-text-color: #292524;
  --success-color: #57c46a;
  --success-bg: rgba(87, 196, 106, 0.16);
  --error-color: #f47067;
  --error-bg: rgba(244, 112, 103, 0.16);
  --warning-color: #e3b341;
  --warning-bg: rgba(227, 179, 65, 0.16);
  --info-color: #79aef2;
  --info-bg: rgba(121, 174, 242, 0.16);
  --danger-solid: #e5484d;
  --danger-text: #f47067;
  --danger-border: rgba(244, 112, 103, 0.35);
  --danger-bg: rgba(244, 112, 103, 0.16);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
  --canvas: #1b151a;
  --surface: #282026;
  --border-color-soft: #453d44;
  --hairline: #2e282d;
  --hover-bg: #352c33;
  --input-border: #574c55;
  --text-faint: #756d73;
  --brand: #d378c7;
  --brand-hover: #e78fdb;
  --brand-solid: #d378c7;
  --brand-solid-hover: #e78fdb;
  --focus-ring: 0 0 0 3px rgba(211, 120, 199, 0.3);
  --on-brand: #1b151a;
}
[data-theme='violet-light'] {
  --primary-color: #886acf;
  --primary-hover: #7455b8;
  --secondary-color: #7455b8;
  --secondary-hover: #7455b8;
  --background-color: #fbfafe;
  --card-background: #ffffff;
  --card-background-hover: #f4f2f8;
  --text-color: #292732;
  --text-secondary: #595662;
  --text-muted: #75727f;
  --border-color: #e0dee7;
  --table-border-color: #e0dee7;
  --divider-color: #edecf2;
  --modal-text-color: #292524;
  --success-color: #51cf66;
  --success-bg: #e8f5e9;
  --error-color: #ff6b6b;
  --error-bg: #ffebee;
  --warning-color: #f59e0b;
  --warning-bg: #fff3e0;
  --info-color: #3b82f6;
  --info-bg: #e3f2fd;
  --danger-solid: #d1242f;
  --danger-text: #b42318;
  --danger-border: #ecc7c3;
  --danger-bg: #fde8e8;
  --shadow-sm: 0 1px 2px 0 rgba(41, 37, 36, 0.04);
  --shadow-md: 0 6px 16px rgba(41, 37, 36, 0.08);
  --shadow-lg: 0 12px 32px rgba(41, 37, 36, 0.14);
  --shadow-xl: 0 24px 64px rgba(28, 25, 23, 0.35);
  --canvas: #fbfafe;
  --surface: #ffffff;
  --border-color-soft: #e0dee7;
  --hairline: #edecf2;
  --hover-bg: #f4f2f8;
  --input-border: #d5d2de;
  --text-faint: #9996a4;
  --brand: #886acf;
  --brand-hover: #7455b8;
  --brand-solid: #8263cd;
  --brand-solid-hover: #7455b8;
  --focus-ring: 0 0 0 3px rgba(136, 106, 207, 0.25);
  --on-brand: #ffffff;
}
[data-theme='violet-dark'] {
  --primary-color: #a689f1;
  --primary-hover: #b9a0ff;
  --secondary-color: #b9a0ff;
  --secondary-hover: #b9a0ff;
  --background-color: #17161d;
  --card-background: #23212a;
  --card-background-hover: #2f2d37;
  --text-color: #f0eff4;
  --text-secondary: #bebcc4;
  --text-muted: #94929b;
  --border-color: #403e48;
  --table-border-color: #403e48;
  --divider-color: #2a2930;
  --modal-text-color: #292524;
  --success-color: #57c46a;
  --success-bg: rgba(87, 196, 106, 0.16);
  --error-color: #f47067;
  --error-bg: rgba(244, 112, 103, 0.16);
  --warning-color: #e3b341;
  --warning-bg: rgba(227, 179, 65, 0.16);
  --info-color: #79aef2;
  --info-bg: rgba(121, 174, 242, 0.16);
  --danger-solid: #e5484d;
  --danger-text: #f47067;
  --danger-border: rgba(244, 112, 103, 0.35);
  --danger-bg: rgba(244, 112, 103, 0.16);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
  --canvas: #17161d;
  --surface: #23212a;
  --border-color-soft: #403e48;
  --hairline: #2a2930;
  --hover-bg: #2f2d37;
  --input-border: #504e5b;
  --text-faint: #706f77;
  --brand: #a689f1;
  --brand-hover: #b9a0ff;
  --brand-solid: #a689f1;
  --brand-solid-hover: #b9a0ff;
  --focus-ring: 0 0 0 3px rgba(166, 137, 241, 0.3);
  --on-brand: #17161d;
}
[data-theme='midnight-light'] {
  --primary-color: #5a79d9;
  --primary-hover: #4764c2;
  --secondary-color: #4764c2;
  --secondary-hover: #4764c2;
  --background-color: #f9faff;
  --card-background: #ffffff;
  --card-background-hover: #f1f3f9;
  --text-color: #252933;
  --text-secondary: #535864;
  --text-muted: #6f7481;
  --border-color: #dce0e8;
  --table-border-color: #dce0e8;
  --divider-color: #eaedf2;
  --modal-text-color: #292524;
  --success-color: #51cf66;
  --success-bg: #e8f5e9;
  --error-color: #ff6b6b;
  --error-bg: #ffebee;
  --warning-color: #f59e0b;
  --warning-bg: #fff3e0;
  --info-color: #3b82f6;
  --info-bg: #e3f2fd;
  --danger-solid: #d1242f;
  --danger-text: #b42318;
  --danger-border: #ecc7c3;
  --danger-bg: #fde8e8;
  --shadow-sm: 0 1px 2px 0 rgba(41, 37, 36, 0.04);
  --shadow-md: 0 6px 16px rgba(41, 37, 36, 0.08);
  --shadow-lg: 0 12px 32px rgba(41, 37, 36, 0.14);
  --shadow-xl: 0 24px 64px rgba(28, 25, 23, 0.35);
  --canvas: #f9faff;
  --surface: #ffffff;
  --border-color-soft: #dce0e8;
  --hairline: #eaedf2;
  --hover-bg: #f1f3f9;
  --input-border: #d0d4df;
  --text-faint: #9398a5;
  --brand: #5a79d9;
  --brand-hover: #4764c2;
  --brand-solid: #4f70d7;
  --brand-solid-hover: #4764c2;
  --focus-ring: 0 0 0 3px rgba(90, 121, 217, 0.25);
  --on-brand: #ffffff;
}
[data-theme='midnight-dark'] {
  --primary-color: #7699fb;
  --primary-hover: #92b0ff;
  --secondary-color: #92b0ff;
  --secondary-hover: #92b0ff;
  --background-color: #14171e;
  --card-background: #1f232b;
  --card-background-hover: #2b2f38;
  --text-color: #eef0f4;
  --text-secondary: #bbbec5;
  --text-muted: #90949c;
  --border-color: #3c4049;
  --table-border-color: #3c4049;
  --divider-color: #272a31;
  --modal-text-color: #292524;
  --success-color: #57c46a;
  --success-bg: rgba(87, 196, 106, 0.16);
  --error-color: #f47067;
  --error-bg: rgba(244, 112, 103, 0.16);
  --warning-color: #e3b341;
  --warning-bg: rgba(227, 179, 65, 0.16);
  --info-color: #79aef2;
  --info-bg: rgba(121, 174, 242, 0.16);
  --danger-solid: #e5484d;
  --danger-text: #f47067;
  --danger-border: rgba(244, 112, 103, 0.35);
  --danger-bg: rgba(244, 112, 103, 0.16);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
  --canvas: #14171e;
  --surface: #1f232b;
  --border-color-soft: #3c4049;
  --hairline: #272a31;
  --hover-bg: #2b2f38;
  --input-border: #4a505c;
  --text-faint: #6d7078;
  --brand: #7699fb;
  --brand-hover: #92b0ff;
  --brand-solid: #7699fb;
  --brand-solid-hover: #92b0ff;
  --focus-ring: 0 0 0 3px rgba(118, 153, 251, 0.3);
  --on-brand: #14171e;
}
[data-theme='ocean-light'] {
  --primary-color: #058eaf;
  --primary-hover: #007894;
  --secondary-color: #007894;
  --secondary-hover: #007894;
  --background-color: #f6fbfd;
  --card-background: #ffffff;
  --card-background-hover: #eef5f7;
  --text-color: #1e2b30;
  --text-secondary: #4c5b60;
  --text-muted: #68777d;
  --border-color: #d8e2e5;
  --table-border-color: #d8e2e5;
  --divider-color: #e7eef1;
  --modal-text-color: #292524;
  --success-color: #51cf66;
  --success-bg: #e8f5e9;
  --error-color: #ff6b6b;
  --error-bg: #ffebee;
  --warning-color: #f59e0b;
  --warning-bg: #fff3e0;
  --info-color: #3b82f6;
  --info-bg: #e3f2fd;
  --danger-solid: #d1242f;
  --danger-text: #b42318;
  --danger-border: #ecc7c3;
  --danger-bg: #fde8e8;
  --shadow-sm: 0 1px 2px 0 rgba(41, 37, 36, 0.04);
  --shadow-md: 0 6px 16px rgba(41, 37, 36, 0.08);
  --shadow-lg: 0 12px 32px rgba(41, 37, 36, 0.14);
  --shadow-xl: 0 24px 64px rgba(28, 25, 23, 0.35);
  --canvas: #f6fbfd;
  --surface: #ffffff;
  --border-color-soft: #d8e2e5;
  --hairline: #e7eef1;
  --hover-bg: #eef5f7;
  --input-border: #cad7dc;
  --text-faint: #8c9ba1;
  --brand: #058eaf;
  --brand-hover: #007894;
  --brand-solid: #05819f;
  --brand-solid-hover: #007894;
  --focus-ring: 0 0 0 3px rgba(0, 145, 191, 0.25);
  --on-brand: #ffffff;
}
[data-theme='ocean-dark'] {
  --primary-color: #16afd6;
  --primary-hover: #16c5f1;
  --secondary-color: #16c5f1;
  --secondary-hover: #16c5f1;
  --background-color: #10191c;
  --card-background: #1a2528;
  --card-background-hover: #253136;
  --text-color: #ecf1f3;
  --text-secondary: #b6bfc3;
  --text-muted: #8c9699;
  --border-color: #364246;
  --table-border-color: #364246;
  --divider-color: #232c2f;
  --modal-text-color: #292524;
  --success-color: #57c46a;
  --success-bg: rgba(87, 196, 106, 0.16);
  --error-color: #f47067;
  --error-bg: rgba(244, 112, 103, 0.16);
  --warning-color: #e3b341;
  --warning-bg: rgba(227, 179, 65, 0.16);
  --info-color: #79aef2;
  --info-bg: rgba(121, 174, 242, 0.16);
  --danger-solid: #e5484d;
  --danger-text: #f47067;
  --danger-border: rgba(244, 112, 103, 0.35);
  --danger-bg: rgba(244, 112, 103, 0.16);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
  --canvas: #10191c;
  --surface: #1a2528;
  --border-color-soft: #364246;
  --hairline: #232c2f;
  --hover-bg: #253136;
  --input-border: #435359;
  --text-faint: #687276;
  --brand: #16afd6;
  --brand-hover: #16c5f1;
  --brand-solid: #16afd6;
  --brand-solid-hover: #16c5f1;
  --focus-ring: 0 0 0 3px rgba(0, 177, 224, 0.3);
  --on-brand: #10191c;
}
[data-theme='slate-light'] {
  --primary-color: #586e85;
  --primary-hover: #47596c;
  --secondary-color: #47596c;
  --secondary-hover: #47596c;
  --background-color: #f7fbfe;
  --card-background: #ffffff;
  --card-background-hover: #f0f4f9;
  --text-color: #212a33;
  --text-secondary: #505963;
  --text-muted: #6c7680;
  --border-color: #dae0e7;
  --table-border-color: #dae0e7;
  --divider-color: #e9edf2;
  --modal-text-color: #292524;
  --success-color: #51cf66;
  --success-bg: #e8f5e9;
  --error-color: #ff6b6b;
  --error-bg: #ffebee;
  --warning-color: #f59e0b;
  --warning-bg: #fff3e0;
  --info-color: #3b82f6;
  --info-bg: #e3f2fd;
  --danger-solid: #d1242f;
  --danger-text: #b42318;
  --danger-border: #ecc7c3;
  --danger-bg: #fde8e8;
  --shadow-sm: 0 1px 2px 0 rgba(41, 37, 36, 0.04);
  --shadow-md: 0 6px 16px rgba(41, 37, 36, 0.08);
  --shadow-lg: 0 12px 32px rgba(41, 37, 36, 0.14);
  --shadow-xl: 0 24px 64px rgba(28, 25, 23, 0.35);
  --canvas: #f7fbfe;
  --surface: #ffffff;
  --border-color-soft: #dae0e7;
  --hairline: #e9edf2;
  --hover-bg: #f0f4f9;
  --input-border: #cdd5df;
  --text-faint: #8f9aa4;
  --brand: #586e85;
  --brand-hover: #47596c;
  --brand-solid: #586e85;
  --brand-solid-hover: #47596c;
  --focus-ring: 0 0 0 3px rgba(88, 110, 133, 0.25);
  --on-brand: #ffffff;
}
[data-theme='slate-dark'] {
  --primary-color: #8aa1ba;
  --primary-hover: #9fb5cd;
  --secondary-color: #9fb5cd;
  --secondary-hover: #9fb5cd;
  --background-color: #12181d;
  --card-background: #1d242a;
  --card-background-hover: #283038;
  --text-color: #edf0f4;
  --text-secondary: #b9bec5;
  --text-muted: #8e949c;
  --border-color: #394149;
  --table-border-color: #394149;
  --divider-color: #252b30;
  --modal-text-color: #292524;
  --success-color: #57c46a;
  --success-bg: rgba(87, 196, 106, 0.16);
  --error-color: #f47067;
  --error-bg: rgba(244, 112, 103, 0.16);
  --warning-color: #e3b341;
  --warning-bg: rgba(227, 179, 65, 0.16);
  --info-color: #79aef2;
  --info-bg: rgba(121, 174, 242, 0.16);
  --danger-solid: #e5484d;
  --danger-text: #f47067;
  --danger-border: rgba(244, 112, 103, 0.35);
  --danger-bg: rgba(244, 112, 103, 0.16);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
  --canvas: #12181d;
  --surface: #1d242a;
  --border-color-soft: #394149;
  --hairline: #252b30;
  --hover-bg: #283038;
  --input-border: #47515c;
  --text-faint: #6b7178;
  --brand: #8aa1ba;
  --brand-hover: #9fb5cd;
  --brand-solid: #8aa1ba;
  --brand-solid-hover: #9fb5cd;
  --focus-ring: 0 0 0 3px rgba(138, 161, 186, 0.3);
  --on-brand: #12181d;
}
[data-theme='aqua-light'] {
  --primary-color: #009296;
  --primary-hover: #017b7f;
  --secondary-color: #017b7f;
  --secondary-hover: #017b7f;
  --background-color: #f6fcfc;
  --card-background: #ffffff;
  --card-background-hover: #eef5f5;
  --text-color: #1d2c2c;
  --text-secondary: #4b5c5c;
  --text-muted: #677879;
  --border-color: #d7e2e2;
  --table-border-color: #d7e2e2;
  --divider-color: #e7efef;
  --modal-text-color: #292524;
  --success-color: #51cf66;
  --success-bg: #e8f5e9;
  --error-color: #ff6b6b;
  --error-bg: #ffebee;
  --warning-color: #f59e0b;
  --warning-bg: #fff3e0;
  --info-color: #3b82f6;
  --info-bg: #e3f2fd;
  --danger-solid: #d1242f;
  --danger-text: #b42318;
  --danger-border: #ecc7c3;
  --danger-bg: #fde8e8;
  --shadow-sm: 0 1px 2px 0 rgba(41, 37, 36, 0.04);
  --shadow-md: 0 6px 16px rgba(41, 37, 36, 0.08);
  --shadow-lg: 0 12px 32px rgba(41, 37, 36, 0.14);
  --shadow-xl: 0 24px 64px rgba(28, 25, 23, 0.35);
  --canvas: #f6fcfc;
  --surface: #ffffff;
  --border-color-soft: #d7e2e2;
  --hairline: #e7efef;
  --hover-bg: #eef5f5;
  --input-border: #c9d8d8;
  --text-faint: #8b9c9d;
  --brand: #009296;
  --brand-hover: #017b7f;
  --brand-solid: #008488;
  --brand-solid-hover: #017b7f;
  --focus-ring: 0 0 0 3px rgba(0, 153, 160, 0.25);
  --on-brand: #ffffff;
}
[data-theme='aqua-dark'] {
  --primary-color: #09b4b9;
  --primary-hover: #28cacf;
  --secondary-color: #28cacf;
  --secondary-hover: #28cacf;
  --background-color: #101919;
  --card-background: #1a2526;
  --card-background-hover: #253232;
  --text-color: #ecf1f1;
  --text-secondary: #b6c0c0;
  --text-muted: #8b9696;
  --border-color: #364343;
  --table-border-color: #364343;
  --divider-color: #232c2c;
  --modal-text-color: #292524;
  --success-color: #57c46a;
  --success-bg: rgba(87, 196, 106, 0.16);
  --error-color: #f47067;
  --error-bg: rgba(244, 112, 103, 0.16);
  --warning-color: #e3b341;
  --warning-bg: rgba(227, 179, 65, 0.16);
  --info-color: #79aef2;
  --info-bg: rgba(121, 174, 242, 0.16);
  --danger-solid: #e5484d;
  --danger-text: #f47067;
  --danger-border: rgba(244, 112, 103, 0.35);
  --danger-bg: rgba(244, 112, 103, 0.16);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
  --canvas: #101919;
  --surface: #1a2526;
  --border-color-soft: #364343;
  --hairline: #232c2c;
  --hover-bg: #253232;
  --input-border: #425454;
  --text-faint: #687373;
  --brand: #09b4b9;
  --brand-hover: #28cacf;
  --brand-solid: #09b4b9;
  --brand-solid-hover: #28cacf;
  --focus-ring: 0 0 0 3px rgba(0, 185, 192, 0.3);
  --on-brand: #101919;
}
[data-theme='emerald-light'] {
  --primary-color: #009867;
  --primary-hover: #018057;
  --secondary-color: #018057;
  --secondary-hover: #018057;
  --background-color: #f7fcf9;
  --card-background: #ffffff;
  --card-background-hover: #eff5f2;
  --text-color: #202c26;
  --text-secondary: #4f5c55;
  --text-muted: #6b7871;
  --border-color: #d9e2dd;
  --table-border-color: #d9e2dd;
  --divider-color: #e8efeb;
  --modal-text-color: #292524;
  --success-color: #51cf66;
  --success-bg: #e8f5e9;
  --error-color: #ff6b6b;
  --error-bg: #ffebee;
  --warning-color: #f59e0b;
  --warning-bg: #fff3e0;
  --info-color: #3b82f6;
  --info-bg: #e3f2fd;
  --danger-solid: #d1242f;
  --danger-text: #b42318;
  --danger-border: #ecc7c3;
  --danger-bg: #fde8e8;
  --shadow-sm: 0 1px 2px 0 rgba(41, 37, 36, 0.04);
  --shadow-md: 0 6px 16px rgba(41, 37, 36, 0.08);
  --shadow-lg: 0 12px 32px rgba(41, 37, 36, 0.14);
  --shadow-xl: 0 24px 64px rgba(28, 25, 23, 0.35);
  --canvas: #f7fcf9;
  --surface: #ffffff;
  --border-color-soft: #d9e2dd;
  --hairline: #e8efeb;
  --hover-bg: #eff5f2;
  --input-border: #cbd8d1;
  --text-faint: #8e9c94;
  --brand: #009867;
  --brand-hover: #018057;
  --brand-solid: #00875b;
  --brand-solid-hover: #018057;
  --focus-ring: 0 0 0 3px rgba(0, 155, 100, 0.25);
  --on-brand: #ffffff;
}
[data-theme='emerald-dark'] {
  --primary-color: #0bbb81;
  --primary-hover: #38d094;
  --secondary-color: #38d094;
  --secondary-hover: #38d094;
  --background-color: #121915;
  --card-background: #1c2520;
  --card-background-hover: #27322c;
  --text-color: #edf1ef;
  --text-secondary: #b8c0bb;
  --text-muted: #8d9691;
  --border-color: #38433d;
  --table-border-color: #38433d;
  --divider-color: #252c28;
  --modal-text-color: #292524;
  --success-color: #57c46a;
  --success-bg: rgba(87, 196, 106, 0.16);
  --error-color: #f47067;
  --error-bg: rgba(244, 112, 103, 0.16);
  --warning-color: #e3b341;
  --warning-bg: rgba(227, 179, 65, 0.16);
  --info-color: #79aef2;
  --info-bg: rgba(121, 174, 242, 0.16);
  --danger-solid: #e5484d;
  --danger-text: #f47067;
  --danger-border: rgba(244, 112, 103, 0.35);
  --danger-bg: rgba(244, 112, 103, 0.16);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
  --canvas: #121915;
  --surface: #1c2520;
  --border-color-soft: #38433d;
  --hairline: #252c28;
  --hover-bg: #27322c;
  --input-border: #45544c;
  --text-faint: #6a736e;
  --brand: #0bbb81;
  --brand-hover: #38d094;
  --brand-solid: #0bbb81;
  --brand-solid-hover: #38d094;
  --focus-ring: 0 0 0 3px rgba(21, 186, 129, 0.3);
  --on-brand: #121915;
}
[data-theme='forest-light'] {
  --primary-color: #4e9347;
  --primary-hover: #397e33;
  --secondary-color: #397e33;
  --secondary-hover: #397e33;
  --background-color: #f8fbf8;
  --card-background: #ffffff;
  --card-background-hover: #f0f5f0;
  --text-color: #232b22;
  --text-secondary: #525b51;
  --text-muted: #6e786d;
  --border-color: #dbe2da;
  --table-border-color: #dbe2da;
  --divider-color: #eaeee9;
  --modal-text-color: #292524;
  --success-color: #51cf66;
  --success-bg: #e8f5e9;
  --error-color: #ff6b6b;
  --error-bg: #ffebee;
  --warning-color: #f59e0b;
  --warning-bg: #fff3e0;
  --info-color: #3b82f6;
  --info-bg: #e3f2fd;
  --danger-solid: #d1242f;
  --danger-text: #b42318;
  --danger-border: #ecc7c3;
  --danger-bg: #fde8e8;
  --shadow-sm: 0 1px 2px 0 rgba(41, 37, 36, 0.04);
  --shadow-md: 0 6px 16px rgba(41, 37, 36, 0.08);
  --shadow-lg: 0 12px 32px rgba(41, 37, 36, 0.14);
  --shadow-xl: 0 24px 64px rgba(28, 25, 23, 0.35);
  --canvas: #f8fbf8;
  --surface: #ffffff;
  --border-color-soft: #dbe2da;
  --hairline: #eaeee9;
  --hover-bg: #f0f5f0;
  --input-border: #cfd7cd;
  --text-faint: #929c90;
  --brand: #4e9347;
  --brand-hover: #397e33;
  --brand-solid: #468440;
  --brand-solid-hover: #397e33;
  --focus-ring: 0 0 0 3px rgba(67, 150, 60, 0.25);
  --on-brand: #ffffff;
}
[data-theme='forest-dark'] {
  --primary-color: #6db365;
  --primary-hover: #84c77c;
  --secondary-color: #84c77c;
  --secondary-hover: #84c77c;
  --background-color: #141913;
  --card-background: #1f251e;
  --card-background-hover: #2a3129;
  --text-color: #eef1ed;
  --text-secondary: #bac0b9;
  --text-muted: #8f968e;
  --border-color: #3b423a;
  --table-border-color: #3b423a;
  --divider-color: #272c26;
  --modal-text-color: #292524;
  --success-color: #57c46a;
  --success-bg: rgba(87, 196, 106, 0.16);
  --error-color: #f47067;
  --error-bg: rgba(244, 112, 103, 0.16);
  --warning-color: #e3b341;
  --warning-bg: rgba(227, 179, 65, 0.16);
  --info-color: #79aef2;
  --info-bg: rgba(121, 174, 242, 0.16);
  --danger-solid: #e5484d;
  --danger-text: #f47067;
  --danger-border: rgba(244, 112, 103, 0.35);
  --danger-bg: rgba(244, 112, 103, 0.16);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
  --canvas: #141913;
  --surface: #1f251e;
  --border-color-soft: #3b423a;
  --hairline: #272c26;
  --hover-bg: #2a3129;
  --input-border: #495348;
  --text-faint: #6c726b;
  --brand: #6db365;
  --brand-hover: #84c77c;
  --brand-solid: #6db365;
  --brand-solid-hover: #84c77c;
  --focus-ring: 0 0 0 3px rgba(99, 181, 91, 0.3);
  --on-brand: #141913;
}
[data-theme='lime-light'] {
  --primary-color: #669014;
  --primary-hover: #547a02;
  --secondary-color: #547a02;
  --secondary-hover: #547a02;
  --background-color: #f9fbf7;
  --card-background: #ffffff;
  --card-background-hover: #f2f4ef;
  --text-color: #262b20;
  --text-secondary: #555a4f;
  --text-muted: #71776a;
  --border-color: #dde1d9;
  --table-border-color: #dde1d9;
  --divider-color: #ebeee8;
  --modal-text-color: #292524;
  --success-color: #51cf66;
  --success-bg: #e8f5e9;
  --error-color: #ff6b6b;
  --error-bg: #ffebee;
  --warning-color: #f59e0b;
  --warning-bg: #fff3e0;
  --info-color: #3b82f6;
  --info-bg: #e3f2fd;
  --danger-solid: #d1242f;
  --danger-text: #b42318;
  --danger-border: #ecc7c3;
  --danger-bg: #fde8e8;
  --shadow-sm: 0 1px 2px 0 rgba(41, 37, 36, 0.04);
  --shadow-md: 0 6px 16px rgba(41, 37, 36, 0.08);
  --shadow-lg: 0 12px 32px rgba(41, 37, 36, 0.14);
  --shadow-xl: 0 24px 64px rgba(28, 25, 23, 0.35);
  --canvas: #f9fbf7;
  --surface: #ffffff;
  --border-color-soft: #dde1d9;
  --hairline: #ebeee8;
  --hover-bg: #f2f4ef;
  --input-border: #d1d6cb;
  --text-faint: #959b8e;
  --brand: #669014;
  --brand-hover: #547a02;
  --brand-solid: #5c8212;
  --brand-solid-hover: #547a02;
  --focus-ring: 0 0 0 3px rgba(102, 144, 20, 0.25);
  --on-brand: #ffffff;
}
[data-theme='lime-dark'] {
  --primary-color: #83af3e;
  --primary-hover: #98c35a;
  --secondary-color: #98c35a;
  --secondary-hover: #98c35a;
  --background-color: #151812;
  --card-background: #21241c;
  --card-background-hover: #2c3127;
  --text-color: #eff1ed;
  --text-secondary: #bcbfb8;
  --text-muted: #91958d;
  --border-color: #3d4238;
  --table-border-color: #3d4238;
  --divider-color: #282b25;
  --modal-text-color: #292524;
  --success-color: #57c46a;
  --success-bg: rgba(87, 196, 106, 0.16);
  --error-color: #f47067;
  --error-bg: rgba(244, 112, 103, 0.16);
  --warning-color: #e3b341;
  --warning-bg: rgba(227, 179, 65, 0.16);
  --info-color: #79aef2;
  --info-bg: rgba(121, 174, 242, 0.16);
  --danger-solid: #e5484d;
  --danger-text: #f47067;
  --danger-border: rgba(244, 112, 103, 0.35);
  --danger-bg: rgba(244, 112, 103, 0.16);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
  --canvas: #151812;
  --surface: #21241c;
  --border-color-soft: #3d4238;
  --hairline: #282b25;
  --hover-bg: #2c3127;
  --input-border: #4c5245;
  --text-faint: #6e726a;
  --brand: #83af3e;
  --brand-hover: #98c35a;
  --brand-solid: #83af3e;
  --brand-solid-hover: #98c35a;
  --focus-ring: 0 0 0 3px rgba(131, 175, 62, 0.3);
  --on-brand: #151812;
}
[data-theme='amber-light'] {
  --primary-color: #b17000;
  --primary-hover: #955e02;
  --secondary-color: #955e02;
  --secondary-hover: #955e02;
  --background-color: #fdfaf6;
  --card-background: #ffffff;
  --card-background-hover: #f7f3ee;
  --text-color: #2f271e;
  --text-secondary: #5f564c;
  --text-muted: #7c7368;
  --border-color: #e5ded7;
  --table-border-color: #e5ded7;
  --divider-color: #f0ece7;
  --modal-text-color: #292524;
  --success-color: #51cf66;
  --success-bg: #e8f5e9;
  --error-color: #ff6b6b;
  --error-bg: #ffebee;
  --warning-color: #f59e0b;
  --warning-bg: #fff3e0;
  --info-color: #3b82f6;
  --info-bg: #e3f2fd;
  --danger-solid: #d1242f;
  --danger-text: #b42318;
  --danger-border: #ecc7c3;
  --danger-bg: #fde8e8;
  --shadow-sm: 0 1px 2px 0 rgba(41, 37, 36, 0.04);
  --shadow-md: 0 6px 16px rgba(41, 37, 36, 0.08);
  --shadow-lg: 0 12px 32px rgba(41, 37, 36, 0.14);
  --shadow-xl: 0 24px 64px rgba(28, 25, 23, 0.35);
  --canvas: #fdfaf6;
  --surface: #ffffff;
  --border-color-soft: #e5ded7;
  --hairline: #f0ece7;
  --hover-bg: #f7f3ee;
  --input-border: #dbd3c9;
  --text-faint: #a1968b;
  --brand: #b17000;
  --brand-hover: #955e02;
  --brand-solid: #a66900;
  --brand-solid-hover: #955e02;
  --focus-ring: 0 0 0 3px rgba(183, 108, 0, 0.25);
  --on-brand: #ffffff;
}
[data-theme='amber-dark'] {
  --primary-color: #d98b09;
  --primary-hover: #eca13d;
  --secondary-color: #eca13d;
  --secondary-hover: #eca13d;
  --background-color: #1b1610;
  --card-background: #28221b;
  --card-background-hover: #352e25;
  --text-color: #f3efec;
  --text-secondary: #c2bdb6;
  --text-muted: #99928b;
  --border-color: #463e36;
  --table-border-color: #463e36;
  --divider-color: #2e2923;
  --modal-text-color: #292524;
  --success-color: #57c46a;
  --success-bg: rgba(87, 196, 106, 0.16);
  --error-color: #f47067;
  --error-bg: rgba(244, 112, 103, 0.16);
  --warning-color: #e3b341;
  --warning-bg: rgba(227, 179, 65, 0.16);
  --info-color: #79aef2;
  --info-bg: rgba(121, 174, 242, 0.16);
  --danger-solid: #e5484d;
  --danger-text: #f47067;
  --danger-border: rgba(244, 112, 103, 0.35);
  --danger-bg: rgba(244, 112, 103, 0.16);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
  --canvas: #1b1610;
  --surface: #28221b;
  --border-color-soft: #463e36;
  --hairline: #2e2923;
  --hover-bg: #352e25;
  --input-border: #584e43;
  --text-faint: #756f68;
  --brand: #d98b09;
  --brand-hover: #eca13d;
  --brand-solid: #d98b09;
  --brand-solid-hover: #eca13d;
  --focus-ring: 0 0 0 3px rgba(217, 139, 9, 0.3);
  --on-brand: #1b1610;
}
[data-theme='mocha-light'] {
  --primary-color: #82654e;
  --primary-hover: #6e543f;
  --secondary-color: #6e543f;
  --secondary-hover: #6e543f;
  --background-color: #fefaf6;
  --card-background: #ffffff;
  --card-background-hover: #f8f2ee;
  --text-color: #30271f;
  --text-secondary: #61564d;
  --text-muted: #7e7269;
  --border-color: #e6ded8;
  --table-border-color: #e6ded8;
  --divider-color: #f1ece8;
  --modal-text-color: #292524;
  --success-color: #51cf66;
  --success-bg: #e8f5e9;
  --error-color: #ff6b6b;
  --error-bg: #ffebee;
  --warning-color: #f59e0b;
  --warning-bg: #fff3e0;
  --info-color: #3b82f6;
  --info-bg: #e3f2fd;
  --danger-solid: #d1242f;
  --danger-text: #b42318;
  --danger-border: #ecc7c3;
  --danger-bg: #fde8e8;
  --shadow-sm: 0 1px 2px 0 rgba(41, 37, 36, 0.04);
  --shadow-md: 0 6px 16px rgba(41, 37, 36, 0.08);
  --shadow-lg: 0 12px 32px rgba(41, 37, 36, 0.14);
  --shadow-xl: 0 24px 64px rgba(28, 25, 23, 0.35);
  --canvas: #fefaf6;
  --surface: #ffffff;
  --border-color-soft: #e6ded8;
  --hairline: #f1ece8;
  --hover-bg: #f8f2ee;
  --input-border: #dcd2ca;
  --text-faint: #a2968c;
  --brand: #82654e;
  --brand-hover: #6e543f;
  --brand-solid: #82654e;
  --brand-solid-hover: #6e543f;
  --focus-ring: 0 0 0 3px rgba(130, 101, 78, 0.25);
  --on-brand: #ffffff;
}
[data-theme='mocha-dark'] {
  --primary-color: #b69880;
  --primary-hover: #caac95;
  --secondary-color: #caac95;
  --secondary-hover: #caac95;
  --background-color: #1c1611;
  --card-background: #29211b;
  --card-background-hover: #362d26;
  --text-color: #f3efec;
  --text-secondary: #c3bcb7;
  --text-muted: #9a928c;
  --border-color: #473e37;
  --table-border-color: #473e37;
  --divider-color: #2f2924;
  --modal-text-color: #292524;
  --success-color: #57c46a;
  --success-bg: rgba(87, 196, 106, 0.16);
  --error-color: #f47067;
  --error-bg: rgba(244, 112, 103, 0.16);
  --warning-color: #e3b341;
  --warning-bg: rgba(227, 179, 65, 0.16);
  --info-color: #79aef2;
  --info-bg: rgba(121, 174, 242, 0.16);
  --danger-solid: #e5484d;
  --danger-text: #f47067;
  --danger-border: rgba(244, 112, 103, 0.35);
  --danger-bg: rgba(244, 112, 103, 0.16);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
  --canvas: #1c1611;
  --surface: #29211b;
  --border-color-soft: #473e37;
  --hairline: #2f2924;
  --hover-bg: #362d26;
  --input-border: #594d44;
  --text-faint: #766e69;
  --brand: #b69880;
  --brand-hover: #caac95;
  --brand-solid: #b69880;
  --brand-solid-hover: #caac95;
  --focus-ring: 0 0 0 3px rgba(182, 152, 128, 0.3);
  --on-brand: #1c1611;
}

/* Theme Transition — scoped to live theme switches only. theme-loader.js and
   settings.js add `theme-switching` to <html> around a data-theme change and
   remove it ~300ms later, so token changes animate but ordinary hovers don't
   pay a 250ms color-transition tax. */
html.theme-switching * {
  transition-property: background-color, border-color, color;
  transition-duration: var(--transition-base);
  transition-timing-function: ease-in-out;
}

/* Prevent transition on page load */
.preload * {
  transition: none !important;
}

/* ===================================================================
   Browser-rendered UI follows the theme too — see the note on :root.
   `$='-dark'` matches every dark accent; `custom` is dark-based (the
   same pair app.css uses to swap the select chevron).
   =================================================================== */
[data-theme$='-light'] {
  color-scheme: light;
}

[data-theme$='-dark'],
[data-theme='custom'] {
  color-scheme: dark;
}