/* ===================================
   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.
 */
:root {
  /* 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-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-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-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-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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
}