/**
 * Silsilah Keluarga — UI Theme Variants
 * Apply via html[data-theme="THEME_ID"]
 * 30 distinct themes: color, typography, radius, shadows, spacing, sidebar, cards, buttons.
 */

/* ==========================================================================
   1. Navy — corporate
   ========================================================================== */

html[data-theme="navy"] {
  --theme-style: "corporate";
  --color-primary: #1e3a5f;
  --color-primary-hover: #16304f;
  --color-primary-light: #e8eef4;
  --color-primary-muted: #4a6582;
  --color-accent: #5c7a4a;
  --color-accent-hover: #4a6339;
  --color-accent-light: #eef3ea;
  --color-bg: #ffffff;
  --color-bg-subtle: #f5f6f8;
  --color-bg-muted: #eef0f2;
  --color-bg-elevated: #ffffff;
  --color-text: #1a2332;
  --color-text-secondary: #3d4654;
  --color-text-muted: #5c6570;
  --color-text-inverse: #ffffff;
  --color-border: #e0e4e8;
  --color-border-strong: #c8ced6;
  --color-divider: #e8eaed;
  --color-danger: #9b2c2c;
  --color-danger-bg: #fceaea;
  --color-success: #2d6a4f;
  --color-success-bg: #e8f5ee;
  --color-info: #1e5a8a;
  --color-info-bg: #e6f0f8;
  --color-warning: #8a6a1a;
  --color-warning-bg: #f6f0e0;
  --sidebar-bg: #1e3a5f;
  --sidebar-text: #f0f4f8;
  --sidebar-muted: #a8b8c8;
  --topbar-bg: #ffffff;
  --font-sans: "Source Sans 3", system-ui, sans-serif;
  --font-serif: "Source Serif 4", Georgia, serif;
  --text-base: 1rem;
  --leading-normal: 1.55;
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-xs: 0 1px 2px rgba(26, 35, 50, 0.06);
  --shadow-sm: 0 2px 6px rgba(26, 35, 50, 0.08);
  --shadow-md: 0 4px 14px rgba(26, 35, 50, 0.1);
  --focus-ring: 0 0 0 3px rgba(30, 58, 95, 0.25);
  --sidebar-width: 260px;
  --header-height: 4rem;
  --dashboard-main-pad: 1.5rem;
  --card-padding: 1.25rem;
  --nav-radius: 4px;
}

/* ==========================================================================
   2. Slate — minimal
   ========================================================================== */

html[data-theme="slate"] {
  --theme-style: "minimal";
  --color-primary: #3d4f5f;
  --color-primary-hover: #2f3e4c;
  --color-primary-light: #eceff2;
  --color-primary-muted: #647484;
  --color-accent: #5a6b52;
  --color-accent-hover: #485743;
  --color-accent-light: #eef1eb;
  --color-bg: #ffffff;
  --color-bg-subtle: #f4f5f7;
  --color-bg-muted: #ebedf0;
  --color-bg-elevated: #ffffff;
  --color-text: #1c242e;
  --color-text-secondary: #3a424c;
  --color-text-muted: #5a626c;
  --color-text-inverse: #ffffff;
  --color-border: #dde1e6;
  --color-border-strong: #c4cad2;
  --color-divider: #e6e9ec;
  --color-danger: #943838;
  --color-danger-bg: #faeaea;
  --color-success: #2f6349;
  --color-success-bg: #e7f3ec;
  --color-info: #3a5a72;
  --color-info-bg: #e8f0f4;
  --color-warning: #7a6220;
  --color-warning-bg: #f4f0e4;
  --sidebar-bg: #f4f5f7;
  --sidebar-text: #1c242e;
  --sidebar-muted: #5a626c;
  --topbar-bg: #ffffff;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-serif: "DM Sans", system-ui, sans-serif;
  --text-base: 0.9375rem;
  --leading-normal: 1.45;
  --radius-sm: 0;
  --radius-md: 0;
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --focus-ring: 0 0 0 2px rgba(61, 79, 95, 0.35);
  --sidebar-width: 220px;
  --header-height: 3.5rem;
  --dashboard-main-pad: 1rem;
  --card-padding: 1rem;
  --nav-radius: 0;
}

/* ==========================================================================
   3. Forest — organic
   ========================================================================== */

html[data-theme="forest"] {
  --theme-style: "organic";
  --color-primary: #2d4a3e;
  --color-primary-hover: #223a30;
  --color-primary-light: #e8f0ec;
  --color-primary-muted: #4d6b5e;
  --color-accent: #6b5c3a;
  --color-accent-hover: #564a2e;
  --color-accent-light: #f2efe6;
  --color-bg: #ffffff;
  --color-bg-subtle: #f4f7f5;
  --color-bg-muted: #eaf0ec;
  --color-bg-elevated: #ffffff;
  --color-text: #1a2822;
  --color-text-secondary: #354840;
  --color-text-muted: #556860;
  --color-text-inverse: #ffffff;
  --color-border: #d8e2dc;
  --color-border-strong: #bcc8c0;
  --color-divider: #e4ebe7;
  --color-danger: #8f3a32;
  --color-danger-bg: #faeded;
  --color-success: #2a5c42;
  --color-success-bg: #e4f2ea;
  --color-info: #2a5a68;
  --color-info-bg: #e4f0f2;
  --color-warning: #7a6220;
  --color-warning-bg: #f4f0e4;
  --sidebar-bg: #2d4a3e;
  --sidebar-text: #f0f6f2;
  --sidebar-muted: #a8c0b4;
  --topbar-bg: #ffffff;
  --font-sans: "Nunito Sans", system-ui, sans-serif;
  --font-serif: "Literata", Georgia, serif;
  --text-base: 1.0625rem;
  --leading-normal: 1.6;
  --radius-sm: 8px;
  --radius-md: 10px;
  --shadow-xs: 0 1px 3px rgba(26, 40, 34, 0.06);
  --shadow-sm: 0 3px 10px rgba(26, 40, 34, 0.08);
  --shadow-md: 0 6px 18px rgba(26, 40, 34, 0.1);
  --focus-ring: 0 0 0 3px rgba(45, 74, 62, 0.22);
  --sidebar-width: 288px;
  --header-height: 4.5rem;
  --dashboard-main-pad: 1.5rem;
  --card-padding: 1.5rem;
  --nav-radius: 999px;
}

/* ==========================================================================
   4. Ocean — coastal
   ========================================================================== */

html[data-theme="ocean"] {
  --theme-style: "coastal";
  --color-primary: #1a4d6e;
  --color-primary-hover: #143d58;
  --color-primary-light: #e6f0f6;
  --color-primary-muted: #4a7288;
  --color-accent: #3d6b5c;
  --color-accent-hover: #305649;
  --color-accent-light: #e8f2ee;
  --color-bg: #ffffff;
  --color-bg-subtle: #f3f7f9;
  --color-bg-muted: #e8f0f4;
  --color-bg-elevated: #ffffff;
  --color-text: #152530;
  --color-text-secondary: #334650;
  --color-text-muted: #546678;
  --color-text-inverse: #ffffff;
  --color-border: #d4e0e8;
  --color-border-strong: #b8ccd8;
  --color-divider: #e2ebf0;
  --color-danger: #9b3333;
  --color-danger-bg: #fceaea;
  --color-success: #267052;
  --color-success-bg: #e4f3eb;
  --color-info: #1a6a8a;
  --color-info-bg: #e4f2f8;
  --color-warning: #8a7020;
  --color-warning-bg: #f4f0e0;
  --sidebar-bg: #1a4d6e;
  --sidebar-text: #f0f6fa;
  --sidebar-muted: #9cb8cc;
  --topbar-bg: #ffffff;
  --font-sans: "Outfit", system-ui, sans-serif;
  --font-serif: "Fraunces", Georgia, serif;
  --text-base: 1.0625rem;
  --leading-normal: 1.6;
  --radius-sm: 8px;
  --radius-md: 12px;
  --shadow-xs: 0 1px 3px rgba(21, 37, 48, 0.05);
  --shadow-sm: 0 3px 12px rgba(21, 37, 48, 0.08);
  --shadow-md: 0 8px 24px rgba(21, 37, 48, 0.1);
  --focus-ring: 0 0 0 3px rgba(26, 77, 110, 0.2);
  --sidebar-width: 260px;
  --header-height: 4.5rem;
  --dashboard-main-pad: 2rem;
  --card-padding: 1.5rem;
  --nav-radius: 999px;
}

/* ==========================================================================
   5. Burgundy — editorial
   ========================================================================== */

html[data-theme="burgundy"] {
  --theme-style: "editorial";
  --color-primary: #5c2438;
  --color-primary-hover: #481c2c;
  --color-primary-light: #f4eaee;
  --color-primary-muted: #7a4a5c;
  --color-accent: #4a5c3a;
  --color-accent-hover: #3a482e;
  --color-accent-light: #eef1ea;
  --color-bg: #ffffff;
  --color-bg-subtle: #f8f4f5;
  --color-bg-muted: #f0eaeb;
  --color-bg-elevated: #ffffff;
  --color-text: #281820;
  --color-text-secondary: #483840;
  --color-text-muted: #6a5a60;
  --color-text-inverse: #ffffff;
  --color-border: #e4d8dc;
  --color-border-strong: #ccb8c0;
  --color-divider: #eee4e8;
  --color-danger: #9b2c2c;
  --color-danger-bg: #fceaea;
  --color-success: #3a6048;
  --color-success-bg: #e8f2ec;
  --color-info: #4a3a68;
  --color-info-bg: #f0ecf4;
  --color-warning: #8a6820;
  --color-warning-bg: #f6f0e0;
  --sidebar-bg: #5c2438;
  --sidebar-text: #faf4f6;
  --sidebar-muted: #c8a8b4;
  --topbar-bg: #ffffff;
  --font-sans: "Source Sans 3", system-ui, sans-serif;
  --font-serif: "Libre Baskerville", Georgia, serif;
  --text-base: 1rem;
  --leading-normal: 1.55;
  --radius-sm: 2px;
  --radius-md: 2px;
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --focus-ring: 0 0 0 2px rgba(92, 36, 56, 0.25);
  --sidebar-width: 248px;
  --header-height: 4rem;
  --dashboard-main-pad: 1.5rem;
  --card-padding: 1.25rem;
  --nav-radius: 0;
}

/* ==========================================================================
   6. Charcoal — minimal
   ========================================================================== */

html[data-theme="charcoal"] {
  --theme-style: "minimal";
  --color-primary: #3a3f47;
  --color-primary-hover: #2c3038;
  --color-primary-light: #eceef0;
  --color-primary-muted: #626870;
  --color-accent: #5a6248;
  --color-accent-hover: #484e3a;
  --color-accent-light: #eef0ea;
  --color-bg: #ffffff;
  --color-bg-subtle: #f0f0f1;
  --color-bg-muted: #e4e5e7;
  --color-bg-elevated: #ffffff;
  --color-text: #121418;
  --color-text-secondary: #2e3238;
  --color-text-muted: #525860;
  --color-text-inverse: #ffffff;
  --color-border: #d4d6da;
  --color-border-strong: #b8bcc2;
  --color-divider: #e4e5e8;
  --color-danger: #943838;
  --color-danger-bg: #faeaea;
  --color-success: #345848;
  --color-success-bg: #e8f0ea;
  --color-info: #3a5068;
  --color-info-bg: #e8eef4;
  --color-warning: #7a6220;
  --color-warning-bg: #f4f0e4;
  --sidebar-bg: #eceef0;
  --sidebar-text: #121418;
  --sidebar-muted: #525860;
  --topbar-bg: #ffffff;
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-serif: "IBM Plex Sans", system-ui, sans-serif;
  --text-base: 0.9375rem;
  --leading-normal: 1.4;
  --radius-sm: 0;
  --radius-md: 0;
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --focus-ring: 0 0 0 2px rgba(58, 63, 71, 0.35);
  --sidebar-width: 220px;
  --header-height: 3.5rem;
  --dashboard-main-pad: 1rem;
  --card-padding: 1rem;
  --nav-radius: 0;
}

/* ==========================================================================
   7. Teal — coastal
   ========================================================================== */

html[data-theme="teal"] {
  --theme-style: "coastal";
  --color-primary: #1a5c5c;
  --color-primary-hover: #144848;
  --color-primary-light: #e6f2f2;
  --color-primary-muted: #4a7878;
  --color-accent: #5c6b3a;
  --color-accent-hover: #4a562e;
  --color-accent-light: #f0f2e8;
  --color-bg: #ffffff;
  --color-bg-subtle: #f3f8f8;
  --color-bg-muted: #e8f2f2;
  --color-bg-elevated: #ffffff;
  --color-text: #142828;
  --color-text-secondary: #344848;
  --color-text-muted: #546868;
  --color-text-inverse: #ffffff;
  --color-border: #d4e4e4;
  --color-border-strong: #b8d0d0;
  --color-divider: #e2eeee;
  --color-danger: #943838;
  --color-danger-bg: #faeaea;
  --color-success: #1e6b52;
  --color-success-bg: #e4f4ed;
  --color-info: #1a6a7a;
  --color-info-bg: #e4f2f6;
  --color-warning: #8a7020;
  --color-warning-bg: #f4f0e0;
  --sidebar-bg: #1a5c5c;
  --sidebar-text: #f0fafa;
  --sidebar-muted: #9cc8c8;
  --topbar-bg: #ffffff;
  --font-sans: "Outfit", system-ui, sans-serif;
  --font-serif: "Fraunces", Georgia, serif;
  --text-base: 1.0625rem;
  --leading-normal: 1.6;
  --radius-sm: 8px;
  --radius-md: 12px;
  --shadow-xs: 0 1px 3px rgba(20, 40, 40, 0.05);
  --shadow-sm: 0 3px 12px rgba(20, 40, 40, 0.08);
  --shadow-md: 0 8px 24px rgba(20, 40, 40, 0.1);
  --focus-ring: 0 0 0 3px rgba(26, 92, 92, 0.2);
  --sidebar-width: 260px;
  --header-height: 4.5rem;
  --dashboard-main-pad: 2rem;
  --card-padding: 1.5rem;
  --nav-radius: 999px;
}

/* ==========================================================================
   8. Amber — heritage
   ========================================================================== */

html[data-theme="amber"] {
  --theme-style: "heritage";
  --color-primary: #6b4a1a;
  --color-primary-hover: #553a14;
  --color-primary-light: #f6f0e6;
  --color-primary-muted: #8a7048;
  --color-accent: #4a5c38;
  --color-accent-hover: #3a482c;
  --color-accent-light: #eef1e8;
  --color-bg: #fffef8;
  --color-bg-subtle: #f8f6f2;
  --color-bg-muted: #f0ece4;
  --color-bg-elevated: #ffffff;
  --color-text: #282014;
  --color-text-secondary: #484030;
  --color-text-muted: #686050;
  --color-text-inverse: #ffffff;
  --color-border: #e4dcd0;
  --color-border-strong: #ccc0b0;
  --color-divider: #eee8e0;
  --color-danger: #943838;
  --color-danger-bg: #faeaea;
  --color-success: #4a6040;
  --color-success-bg: #eef2ea;
  --color-info: #4a5868;
  --color-info-bg: #eef0f4;
  --color-warning: #8a6820;
  --color-warning-bg: #f6f0e0;
  --sidebar-bg: #6b4a1a;
  --sidebar-text: #faf6f0;
  --sidebar-muted: #c8b090;
  --topbar-bg: #fffef8;
  --font-sans: "Karla", system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --text-base: 1rem;
  --leading-normal: 1.55;
  --radius-sm: 4px;
  --radius-md: 6px;
  --shadow-xs: 0 1px 2px rgba(40, 32, 20, 0.06);
  --shadow-sm: 0 2px 8px rgba(40, 32, 20, 0.08);
  --shadow-md: 0 4px 16px rgba(40, 32, 20, 0.1);
  --focus-ring: 0 0 0 3px rgba(107, 74, 26, 0.22);
  --sidebar-width: 260px;
  --header-height: 4rem;
  --dashboard-main-pad: 1.5rem;
  --card-padding: 1.25rem;
  --nav-radius: 4px;
}

/* ==========================================================================
   9. Indigo — modern
   ========================================================================== */

html[data-theme="indigo"] {
  --theme-style: "modern";
  --color-primary: #2e3a6e;
  --color-primary-hover: #242e58;
  --color-primary-light: #eaeef6;
  --color-primary-muted: #586890;
  --color-accent: #4a5c42;
  --color-accent-hover: #3a4834;
  --color-accent-light: #eef1ea;
  --color-bg: #ffffff;
  --color-bg-subtle: #f4f5f9;
  --color-bg-muted: #eaeef4;
  --color-bg-elevated: #ffffff;
  --color-text: #181e30;
  --color-text-secondary: #363e54;
  --color-text-muted: #565e72;
  --color-text-inverse: #ffffff;
  --color-border: #d8dce8;
  --color-border-strong: #bcc4d4;
  --color-divider: #e6e8f0;
  --color-danger: #943838;
  --color-danger-bg: #faeaea;
  --color-success: #345848;
  --color-success-bg: #e8f0ea;
  --color-info: #2a5088;
  --color-info-bg: #e8f0fa;
  --color-warning: #8a7020;
  --color-warning-bg: #f4f0e0;
  --sidebar-bg: #2e3a6e;
  --sidebar-text: #f0f2fa;
  --sidebar-muted: #a8b4d4;
  --topbar-bg: #ffffff;
  --font-sans: "Manrope", system-ui, sans-serif;
  --font-serif: "Manrope", system-ui, sans-serif;
  --text-base: 1rem;
  --leading-normal: 1.5;
  --radius-sm: 6px;
  --radius-md: 8px;
  --shadow-xs: 0 1px 3px rgba(24, 30, 48, 0.06);
  --shadow-sm: 0 3px 10px rgba(24, 30, 48, 0.08);
  --shadow-md: 0 6px 20px rgba(24, 30, 48, 0.1);
  --focus-ring: 0 0 0 3px rgba(46, 58, 110, 0.22);
  --sidebar-width: 248px;
  --header-height: 4rem;
  --dashboard-main-pad: 1.5rem;
  --card-padding: 1.25rem;
  --nav-radius: 8px;
}

/* ==========================================================================
   10. Sage — organic
   ========================================================================== */

html[data-theme="sage"] {
  --theme-style: "organic";
  --color-primary: #4a5c4a;
  --color-primary-hover: #3a483a;
  --color-primary-light: #eef2ee;
  --color-primary-muted: #6a7a6a;
  --color-accent: #6b5a3a;
  --color-accent-hover: #56482e;
  --color-accent-light: #f2efe6;
  --color-bg: #ffffff;
  --color-bg-subtle: #f5f7f5;
  --color-bg-muted: #eaefea;
  --color-bg-elevated: #ffffff;
  --color-text: #1e281e;
  --color-text-secondary: #3c483c;
  --color-text-muted: #5c685c;
  --color-text-inverse: #ffffff;
  --color-border: #d8e0d8;
  --color-border-strong: #bcc8bc;
  --color-divider: #e6ece6;
  --color-danger: #8f3a32;
  --color-danger-bg: #faeded;
  --color-success: #3a6848;
  --color-success-bg: #e8f2ec;
  --color-info: #3a5868;
  --color-info-bg: #e8f0f4;
  --color-warning: #7a6220;
  --color-warning-bg: #f4f0e4;
  --sidebar-bg: #4a5c4a;
  --sidebar-text: #f2f6f2;
  --sidebar-muted: #b0c4b0;
  --topbar-bg: #ffffff;
  --font-sans: "Nunito Sans", system-ui, sans-serif;
  --font-serif: "Literata", Georgia, serif;
  --text-base: 1.0625rem;
  --leading-normal: 1.6;
  --radius-sm: 8px;
  --radius-md: 12px;
  --shadow-xs: 0 1px 3px rgba(30, 40, 30, 0.06);
  --shadow-sm: 0 3px 10px rgba(30, 40, 30, 0.08);
  --shadow-md: 0 6px 18px rgba(30, 40, 30, 0.1);
  --focus-ring: 0 0 0 3px rgba(74, 92, 74, 0.22);
  --sidebar-width: 288px;
  --header-height: 4.5rem;
  --dashboard-main-pad: 1.5rem;
  --card-padding: 1.5rem;
  --nav-radius: 999px;
}

/* ==========================================================================
   11. Copper — heritage
   ========================================================================== */

html[data-theme="copper"] {
  --theme-style: "heritage";
  --color-primary: #6b4226;
  --color-primary-hover: #55341e;
  --color-primary-light: #f4ece6;
  --color-primary-muted: #8a6248;
  --color-accent: #4a5c3a;
  --color-accent-hover: #3a482e;
  --color-accent-light: #eef1ea;
  --color-bg: #fffef8;
  --color-bg-subtle: #f8f5f2;
  --color-bg-muted: #f0eae4;
  --color-bg-elevated: #ffffff;
  --color-text: #281c14;
  --color-text-secondary: #483c30;
  --color-text-muted: #685c50;
  --color-text-inverse: #ffffff;
  --color-border: #e4d8d0;
  --color-border-strong: #ccc0b4;
  --color-divider: #eee6e0;
  --color-danger: #943838;
  --color-danger-bg: #faeaea;
  --color-success: #4a6040;
  --color-success-bg: #eef2ea;
  --color-info: #4a5868;
  --color-info-bg: #eef0f4;
  --color-warning: #8a6820;
  --color-warning-bg: #f6f0e0;
  --sidebar-bg: #6b4226;
  --sidebar-text: #faf6f0;
  --sidebar-muted: #c8a890;
  --topbar-bg: #fffef8;
  --font-sans: "Karla", system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --text-base: 1rem;
  --leading-normal: 1.55;
  --radius-sm: 4px;
  --radius-md: 6px;
  --shadow-xs: 0 1px 2px rgba(40, 28, 20, 0.06);
  --shadow-sm: 0 2px 8px rgba(40, 28, 20, 0.08);
  --shadow-md: 0 4px 16px rgba(40, 28, 20, 0.1);
  --focus-ring: 0 0 0 3px rgba(107, 66, 38, 0.22);
  --sidebar-width: 260px;
  --header-height: 4rem;
  --dashboard-main-pad: 1.5rem;
  --card-padding: 1.25rem;
  --nav-radius: 4px;
}

/* ==========================================================================
   12. Midnight — dark
   ========================================================================== */

html[data-theme="midnight"] {
  --theme-style: "dark";
  --color-primary: #6b9fd4;
  --color-primary-hover: #8bb4de;
  --color-primary-light: #1a2838;
  --color-primary-muted: #8aa4bc;
  --color-accent: #7a9a6a;
  --color-accent-hover: #8eaa80;
  --color-accent-light: #1e2a22;
  --color-bg: #0f1419;
  --color-bg-subtle: #141a22;
  --color-bg-muted: #1c2430;
  --color-bg-elevated: #1a222c;
  --color-text: #e8ecf0;
  --color-text-secondary: #c4ccd4;
  --color-text-muted: #8a96a4;
  --color-text-inverse: #0f1419;
  --color-border: #2a3440;
  --color-border-strong: #3a4654;
  --color-divider: #222a34;
  --color-danger: #d48484;
  --color-danger-bg: #3a2222;
  --color-success: #6aaa82;
  --color-success-bg: #1e3028;
  --color-info: #6aa8d4;
  --color-info-bg: #1a2838;
  --color-warning: #d4b060;
  --color-warning-bg: #2a2418;
  --sidebar-bg: #0a0e12;
  --sidebar-text: #e8ecf0;
  --sidebar-muted: #6a7888;
  --topbar-bg: #141a22;
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-serif: "Newsreader", Georgia, serif;
  --text-base: 1rem;
  --leading-normal: 1.55;
  --radius-sm: 6px;
  --radius-md: 8px;
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 3px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.4);
  --focus-ring: 0 0 0 3px rgba(107, 159, 212, 0.35);
  --sidebar-width: 260px;
  --header-height: 4rem;
  --dashboard-main-pad: 1.5rem;
  --card-padding: 1.25rem;
  --nav-radius: 6px;
}

/* ==========================================================================
   13. Rose — warm
   ========================================================================== */

html[data-theme="rose"] {
  --theme-style: "warm";
  --color-primary: #6b3a4a;
  --color-primary-hover: #552e3a;
  --color-primary-light: #f4eaee;
  --color-primary-muted: #8a5a68;
  --color-accent: #4a5c3a;
  --color-accent-hover: #3a482e;
  --color-accent-light: #eef1ea;
  --color-bg: #ffffff;
  --color-bg-subtle: #f8f4f5;
  --color-bg-muted: #f0eaeb;
  --color-bg-elevated: #ffffff;
  --color-text: #281820;
  --color-text-secondary: #483840;
  --color-text-muted: #685860;
  --color-text-inverse: #ffffff;
  --color-border: #e4d8dc;
  --color-border-strong: #ccb8c0;
  --color-divider: #eee4e8;
  --color-danger: #9b2c2c;
  --color-danger-bg: #fceaea;
  --color-success: #3a6048;
  --color-success-bg: #e8f2ec;
  --color-info: #5a4868;
  --color-info-bg: #f0ecf4;
  --color-warning: #8a6820;
  --color-warning-bg: #f6f0e0;
  --sidebar-bg: #6b3a4a;
  --sidebar-text: #faf4f6;
  --sidebar-muted: #c8a8b4;
  --topbar-bg: #ffffff;
  --font-sans: "Nunito Sans", system-ui, sans-serif;
  --font-serif: "Fraunces", Georgia, serif;
  --text-base: 1.0625rem;
  --leading-normal: 1.6;
  --radius-sm: 8px;
  --radius-md: 10px;
  --shadow-xs: 0 1px 3px rgba(40, 24, 32, 0.06);
  --shadow-sm: 0 3px 10px rgba(40, 24, 32, 0.08);
  --shadow-md: 0 6px 18px rgba(40, 24, 32, 0.1);
  --focus-ring: 0 0 0 3px rgba(107, 58, 74, 0.22);
  --sidebar-width: 260px;
  --header-height: 4rem;
  --dashboard-main-pad: 1.5rem;
  --card-padding: 1.25rem;
  --nav-radius: 999px;
}

/* ==========================================================================
   14. Olive — organic
   ========================================================================== */

html[data-theme="olive"] {
  --theme-style: "organic";
  --color-primary: #4a5230;
  --color-primary-hover: #3a4026;
  --color-primary-light: #f0f2e8;
  --color-primary-muted: #6a7050;
  --color-accent: #5c4830;
  --color-accent-hover: #4a3826;
  --color-accent-light: #f2ece6;
  --color-bg: #ffffff;
  --color-bg-subtle: #f6f7f2;
  --color-bg-muted: #eceee4;
  --color-bg-elevated: #ffffff;
  --color-text: #222418;
  --color-text-secondary: #424838;
  --color-text-muted: #626858;
  --color-text-inverse: #ffffff;
  --color-border: #dce0d4;
  --color-border-strong: #c4cab8;
  --color-divider: #e8ece2;
  --color-danger: #8f3a32;
  --color-danger-bg: #faeded;
  --color-success: #4a6040;
  --color-success-bg: #eef2ea;
  --color-info: #3a5868;
  --color-info-bg: #e8f0f4;
  --color-warning: #7a6220;
  --color-warning-bg: #f4f0e4;
  --sidebar-bg: #4a5230;
  --sidebar-text: #f4f6ee;
  --sidebar-muted: #b0b898;
  --topbar-bg: #ffffff;
  --font-sans: "Nunito Sans", system-ui, sans-serif;
  --font-serif: "Literata", Georgia, serif;
  --text-base: 1.0625rem;
  --leading-normal: 1.6;
  --radius-sm: 8px;
  --radius-md: 12px;
  --shadow-xs: 0 1px 3px rgba(34, 36, 24, 0.06);
  --shadow-sm: 0 3px 10px rgba(34, 36, 24, 0.08);
  --shadow-md: 0 6px 18px rgba(34, 36, 24, 0.1);
  --focus-ring: 0 0 0 3px rgba(74, 82, 48, 0.22);
  --sidebar-width: 288px;
  --header-height: 4.5rem;
  --dashboard-main-pad: 1.5rem;
  --card-padding: 1.5rem;
  --nav-radius: 999px;
}

/* ==========================================================================
   15. Steel — corporate
   ========================================================================== */

html[data-theme="steel"] {
  --theme-style: "corporate";
  --color-primary: #3a5068;
  --color-primary-hover: #2e4054;
  --color-primary-light: #eaedf2;
  --color-primary-muted: #5a7088;
  --color-accent: #4a5c48;
  --color-accent-hover: #3a4838;
  --color-accent-light: #eef0ea;
  --color-bg: #ffffff;
  --color-bg-subtle: #f3f5f7;
  --color-bg-muted: #e8ecf0;
  --color-bg-elevated: #ffffff;
  --color-text: #1a2430;
  --color-text-secondary: #384450;
  --color-text-muted: #586470;
  --color-text-inverse: #ffffff;
  --color-border: #d8dee6;
  --color-border-strong: #bcc6d2;
  --color-divider: #e6eaee;
  --color-danger: #943838;
  --color-danger-bg: #faeaea;
  --color-success: #345848;
  --color-success-bg: #e8f0ea;
  --color-info: #2a5888;
  --color-info-bg: #e8f0fa;
  --color-warning: #8a7020;
  --color-warning-bg: #f4f0e0;
  --sidebar-bg: #3a5068;
  --sidebar-text: #f0f4f8;
  --sidebar-muted: #a8b8c8;
  --topbar-bg: #ffffff;
  --font-sans: "Source Sans 3", system-ui, sans-serif;
  --font-serif: "Source Serif 4", Georgia, serif;
  --text-base: 1rem;
  --leading-normal: 1.55;
  --radius-sm: 4px;
  --radius-md: 6px;
  --shadow-xs: 0 1px 2px rgba(26, 36, 48, 0.06);
  --shadow-sm: 0 2px 6px rgba(26, 36, 48, 0.08);
  --shadow-md: 0 4px 14px rgba(26, 36, 48, 0.1);
  --focus-ring: 0 0 0 3px rgba(58, 80, 104, 0.25);
  --sidebar-width: 260px;
  --header-height: 4rem;
  --dashboard-main-pad: 1.5rem;
  --card-padding: 1.25rem;
  --nav-radius: 4px;
}

/* ==========================================================================
   16. Cocoa — heritage
   ========================================================================== */

html[data-theme="cocoa"] {
  --theme-style: "heritage";
  --color-primary: #4a3828;
  --color-primary-hover: #3a2c20;
  --color-primary-light: #f2ece6;
  --color-primary-muted: #6a5848;
  --color-accent: #4a5c3a;
  --color-accent-hover: #3a482e;
  --color-accent-light: #eef1ea;
  --color-bg: #fffef8;
  --color-bg-subtle: #f7f4f2;
  --color-bg-muted: #f0eae4;
  --color-bg-elevated: #ffffff;
  --color-text: #241c14;
  --color-text-secondary: #443c30;
  --color-text-muted: #645c50;
  --color-text-inverse: #ffffff;
  --color-border: #e0d8d0;
  --color-border-strong: #c8bcb0;
  --color-divider: #ece6e0;
  --color-danger: #943838;
  --color-danger-bg: #faeaea;
  --color-success: #4a6040;
  --color-success-bg: #eef2ea;
  --color-info: #4a5868;
  --color-info-bg: #eef0f4;
  --color-warning: #8a6820;
  --color-warning-bg: #f6f0e0;
  --sidebar-bg: #4a3828;
  --sidebar-text: #faf6f0;
  --sidebar-muted: #b8a898;
  --topbar-bg: #fffef8;
  --font-sans: "Karla", system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --text-base: 1rem;
  --leading-normal: 1.55;
  --radius-sm: 4px;
  --radius-md: 6px;
  --shadow-xs: 0 1px 2px rgba(36, 28, 20, 0.06);
  --shadow-sm: 0 2px 8px rgba(36, 28, 20, 0.08);
  --shadow-md: 0 4px 16px rgba(36, 28, 20, 0.1);
  --focus-ring: 0 0 0 3px rgba(74, 56, 40, 0.22);
  --sidebar-width: 260px;
  --header-height: 4rem;
  --dashboard-main-pad: 1.5rem;
  --card-padding: 1.25rem;
  --nav-radius: 4px;
}

/* ==========================================================================
   17. Azure — coastal
   ========================================================================== */

html[data-theme="azure"] {
  --theme-style: "coastal";
  --color-primary: #1a5a8a;
  --color-primary-hover: #14486e;
  --color-primary-light: #e6f0f8;
  --color-primary-muted: #4a7aa8;
  --color-accent: #3a6848;
  --color-accent-hover: #2e5238;
  --color-accent-light: #e8f2ea;
  --color-bg: #ffffff;
  --color-bg-subtle: #f3f7fb;
  --color-bg-muted: #e8f0f8;
  --color-bg-elevated: #ffffff;
  --color-text: #142030;
  --color-text-secondary: #344050;
  --color-text-muted: #546070;
  --color-text-inverse: #ffffff;
  --color-border: #d4e0ec;
  --color-border-strong: #b8cce0;
  --color-divider: #e2eaf2;
  --color-danger: #943838;
  --color-danger-bg: #faeaea;
  --color-success: #2a6848;
  --color-success-bg: #e4f2ea;
  --color-info: #1a6a9a;
  --color-info-bg: #e4f2fa;
  --color-warning: #8a7020;
  --color-warning-bg: #f4f0e0;
  --sidebar-bg: #1a5a8a;
  --sidebar-text: #f0f6fc;
  --sidebar-muted: #9cb8d8;
  --topbar-bg: #ffffff;
  --font-sans: "Outfit", system-ui, sans-serif;
  --font-serif: "Fraunces", Georgia, serif;
  --text-base: 1.0625rem;
  --leading-normal: 1.6;
  --radius-sm: 8px;
  --radius-md: 12px;
  --shadow-xs: 0 1px 3px rgba(20, 32, 48, 0.05);
  --shadow-sm: 0 3px 12px rgba(20, 32, 48, 0.08);
  --shadow-md: 0 8px 24px rgba(20, 32, 48, 0.1);
  --focus-ring: 0 0 0 3px rgba(26, 90, 138, 0.2);
  --sidebar-width: 260px;
  --header-height: 4.5rem;
  --dashboard-main-pad: 2rem;
  --card-padding: 1.5rem;
  --nav-radius: 999px;
}

/* ==========================================================================
   18. Plum — modern
   ========================================================================== */

html[data-theme="plum"] {
  --theme-style: "modern";
  --color-primary: #4a3048;
  --color-primary-hover: #3a2638;
  --color-primary-light: #f0eaf0;
  --color-primary-muted: #6a5068;
  --color-accent: #4a5c3a;
  --color-accent-hover: #3a482e;
  --color-accent-light: #eef1ea;
  --color-bg: #ffffff;
  --color-bg-subtle: #f7f4f7;
  --color-bg-muted: #f0eaf0;
  --color-bg-elevated: #ffffff;
  --color-text: #241c24;
  --color-text-secondary: #443c44;
  --color-text-muted: #645c64;
  --color-text-inverse: #ffffff;
  --color-border: #e0d8e0;
  --color-border-strong: #c8bcc8;
  --color-divider: #ece6ec;
  --color-danger: #943838;
  --color-danger-bg: #faeaea;
  --color-success: #3a6048;
  --color-success-bg: #e8f2ec;
  --color-info: #4a4868;
  --color-info-bg: #f0eef4;
  --color-warning: #8a6820;
  --color-warning-bg: #f6f0e0;
  --sidebar-bg: #4a3048;
  --sidebar-text: #f6f0f6;
  --sidebar-muted: #b8a0b8;
  --topbar-bg: #ffffff;
  --font-sans: "Manrope", system-ui, sans-serif;
  --font-serif: "Manrope", system-ui, sans-serif;
  --text-base: 1rem;
  --leading-normal: 1.5;
  --radius-sm: 6px;
  --radius-md: 8px;
  --shadow-xs: 0 1px 3px rgba(36, 28, 36, 0.06);
  --shadow-sm: 0 3px 10px rgba(36, 28, 36, 0.08);
  --shadow-md: 0 6px 20px rgba(36, 28, 36, 0.1);
  --focus-ring: 0 0 0 3px rgba(74, 48, 72, 0.22);
  --sidebar-width: 248px;
  --header-height: 4rem;
  --dashboard-main-pad: 1.5rem;
  --card-padding: 1.25rem;
  --nav-radius: 8px;
}

/* ==========================================================================
   19. Moss — organic
   ========================================================================== */

html[data-theme="moss"] {
  --theme-style: "organic";
  --color-primary: #3a5038;
  --color-primary-hover: #2e402c;
  --color-primary-light: #eaf0ea;
  --color-primary-muted: #5a7058;
  --color-accent: #6b5a30;
  --color-accent-hover: #564826;
  --color-accent-light: #f2efe6;
  --color-bg: #ffffff;
  --color-bg-subtle: #f4f7f4;
  --color-bg-muted: #e8f0e8;
  --color-bg-elevated: #ffffff;
  --color-text: #1a2418;
  --color-text-secondary: #384438;
  --color-text-muted: #586458;
  --color-text-inverse: #ffffff;
  --color-border: #d4e0d4;
  --color-border-strong: #b8ccb8;
  --color-divider: #e4ece4;
  --color-danger: #8f3a32;
  --color-danger-bg: #faeded;
  --color-success: #3a6848;
  --color-success-bg: #e8f2ec;
  --color-info: #3a5868;
  --color-info-bg: #e8f0f4;
  --color-warning: #7a6220;
  --color-warning-bg: #f4f0e4;
  --sidebar-bg: #3a5038;
  --sidebar-text: #f0f6f0;
  --sidebar-muted: #a8c0a8;
  --topbar-bg: #ffffff;
  --font-sans: "Nunito Sans", system-ui, sans-serif;
  --font-serif: "Literata", Georgia, serif;
  --text-base: 1.0625rem;
  --leading-normal: 1.6;
  --radius-sm: 8px;
  --radius-md: 12px;
  --shadow-xs: 0 1px 3px rgba(26, 36, 24, 0.06);
  --shadow-sm: 0 3px 10px rgba(26, 36, 24, 0.08);
  --shadow-md: 0 6px 18px rgba(26, 36, 24, 0.1);
  --focus-ring: 0 0 0 3px rgba(58, 80, 56, 0.22);
  --sidebar-width: 288px;
  --header-height: 4.5rem;
  --dashboard-main-pad: 1.5rem;
  --card-padding: 1.5rem;
  --nav-radius: 999px;
}

/* ==========================================================================
   20. Sandstone — heritage
   ========================================================================== */

html[data-theme="sandstone"] {
  --theme-style: "heritage";
  --color-primary: #6a5840;
  --color-primary-hover: #544630;
  --color-primary-light: #f4f0ea;
  --color-primary-muted: #887860;
  --color-accent: #4a5c3a;
  --color-accent-hover: #3a482e;
  --color-accent-light: #eef1ea;
  --color-bg: #faf6f0;
  --color-bg-subtle: #f4f0e8;
  --color-bg-muted: #ece6dc;
  --color-bg-elevated: #faf6f0;
  --color-text: #282014;
  --color-text-secondary: #484030;
  --color-text-muted: #686050;
  --color-text-inverse: #ffffff;
  --color-border: #e0d8cc;
  --color-border-strong: #c8bca8;
  --color-divider: #ece6dc;
  --color-danger: #943838;
  --color-danger-bg: #faeaea;
  --color-success: #4a6040;
  --color-success-bg: #eef2ea;
  --color-info: #4a5868;
  --color-info-bg: #eef0f4;
  --color-warning: #8a6820;
  --color-warning-bg: #f6f0e0;
  --sidebar-bg: #6a5840;
  --sidebar-text: #faf6f0;
  --sidebar-muted: #c8b8a0;
  --topbar-bg: #faf6f0;
  --font-sans: "Karla", system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --text-base: 1rem;
  --leading-normal: 1.55;
  --radius-sm: 4px;
  --radius-md: 6px;
  --shadow-xs: 0 1px 2px rgba(40, 32, 20, 0.06);
  --shadow-sm: 0 2px 8px rgba(40, 32, 20, 0.08);
  --shadow-md: 0 4px 16px rgba(40, 32, 20, 0.1);
  --focus-ring: 0 0 0 3px rgba(106, 88, 64, 0.22);
  --sidebar-width: 260px;
  --header-height: 4rem;
  --dashboard-main-pad: 1.5rem;
  --card-padding: 1.25rem;
  --nav-radius: 4px;
}

/* ==========================================================================
   21. Graphite — dark
   ========================================================================== */

html[data-theme="graphite"] {
  --theme-style: "dark";
  --color-primary: #a0aab4;
  --color-primary-hover: #b8c0c8;
  --color-primary-light: #2a2e34;
  --color-primary-muted: #788088;
  --color-accent: #8a9a78;
  --color-accent-hover: #9aaa88;
  --color-accent-light: #242820;
  --color-bg: #12151a;
  --color-bg-subtle: #181b22;
  --color-bg-muted: #22262e;
  --color-bg-elevated: #1e2228;
  --color-text: #e8eaec;
  --color-text-secondary: #c4c8cc;
  --color-text-muted: #888c94;
  --color-text-inverse: #12151a;
  --color-border: #32363e;
  --color-border-strong: #444850;
  --color-divider: #282c34;
  --color-danger: #d48484;
  --color-danger-bg: #3a2222;
  --color-success: #78aa88;
  --color-success-bg: #1e2e24;
  --color-info: #78a8c8;
  --color-info-bg: #1e2830;
  --color-warning: #c8a860;
  --color-warning-bg: #2a2418;
  --sidebar-bg: #0e1014;
  --sidebar-text: #e8eaec;
  --sidebar-muted: #686c74;
  --topbar-bg: #181b22;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-serif: "DM Sans", system-ui, sans-serif;
  --text-base: 0.9375rem;
  --leading-normal: 1.45;
  --radius-sm: 0;
  --radius-md: 0;
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --focus-ring: 0 0 0 2px rgba(160, 170, 180, 0.35);
  --sidebar-width: 220px;
  --header-height: 3.5rem;
  --dashboard-main-pad: 1rem;
  --card-padding: 1rem;
  --nav-radius: 0;
}

/* ==========================================================================
   22. Coral — warm
   ========================================================================== */

html[data-theme="coral"] {
  --theme-style: "warm";
  --color-primary: #7a4038;
  --color-primary-hover: #62322c;
  --color-primary-light: #f6ecea;
  --color-primary-muted: #986058;
  --color-accent: #4a5c3a;
  --color-accent-hover: #3a482e;
  --color-accent-light: #eef1ea;
  --color-bg: #ffffff;
  --color-bg-subtle: #f8f4f3;
  --color-bg-muted: #f0eae8;
  --color-bg-elevated: #ffffff;
  --color-text: #281c18;
  --color-text-secondary: #483c38;
  --color-text-muted: #685c58;
  --color-text-inverse: #ffffff;
  --color-border: #e4d8d4;
  --color-border-strong: #ccb8b4;
  --color-divider: #eee4e2;
  --color-danger: #9b2c2c;
  --color-danger-bg: #fceaea;
  --color-success: #3a6048;
  --color-success-bg: #e8f2ec;
  --color-info: #5a4868;
  --color-info-bg: #f0ecf4;
  --color-warning: #8a6820;
  --color-warning-bg: #f6f0e0;
  --sidebar-bg: #7a4038;
  --sidebar-text: #faf4f2;
  --sidebar-muted: #c8a8a0;
  --topbar-bg: #ffffff;
  --font-sans: "Nunito Sans", system-ui, sans-serif;
  --font-serif: "Fraunces", Georgia, serif;
  --text-base: 1.0625rem;
  --leading-normal: 1.6;
  --radius-sm: 8px;
  --radius-md: 10px;
  --shadow-xs: 0 1px 3px rgba(40, 28, 24, 0.06);
  --shadow-sm: 0 3px 10px rgba(40, 28, 24, 0.08);
  --shadow-md: 0 6px 18px rgba(40, 28, 24, 0.1);
  --focus-ring: 0 0 0 3px rgba(122, 64, 56, 0.22);
  --sidebar-width: 260px;
  --header-height: 4rem;
  --dashboard-main-pad: 1.5rem;
  --card-padding: 1.25rem;
  --nav-radius: 999px;
}

/* ==========================================================================
   23. Pine — organic
   ========================================================================== */

html[data-theme="pine"] {
  --theme-style: "organic";
  --color-primary: #1e4038;
  --color-primary-hover: #16322c;
  --color-primary-light: #e6f0ee;
  --color-primary-muted: #4a6860;
  --color-accent: #5c5230;
  --color-accent-hover: #4a4226;
  --color-accent-light: #f2f0e6;
  --color-bg: #ffffff;
  --color-bg-subtle: #f3f7f6;
  --color-bg-muted: #e8f0ee;
  --color-bg-elevated: #ffffff;
  --color-text: #142420;
  --color-text-secondary: #344440;
  --color-text-muted: #546460;
  --color-text-inverse: #ffffff;
  --color-border: #d4e0dc;
  --color-border-strong: #b8ccc4;
  --color-divider: #e2ece8;
  --color-danger: #8f3a32;
  --color-danger-bg: #faeded;
  --color-success: #2a5c48;
  --color-success-bg: #e4f2ea;
  --color-info: #2a5868;
  --color-info-bg: #e4f0f4;
  --color-warning: #7a6220;
  --color-warning-bg: #f4f0e4;
  --sidebar-bg: #1e4038;
  --sidebar-text: #f0f6f4;
  --sidebar-muted: #98b8b0;
  --topbar-bg: #ffffff;
  --font-sans: "Nunito Sans", system-ui, sans-serif;
  --font-serif: "Literata", Georgia, serif;
  --text-base: 1.0625rem;
  --leading-normal: 1.6;
  --radius-sm: 8px;
  --radius-md: 12px;
  --shadow-xs: 0 1px 3px rgba(20, 36, 32, 0.06);
  --shadow-sm: 0 3px 10px rgba(20, 36, 32, 0.08);
  --shadow-md: 0 6px 18px rgba(20, 36, 32, 0.1);
  --focus-ring: 0 0 0 3px rgba(30, 64, 56, 0.22);
  --sidebar-width: 288px;
  --header-height: 4.5rem;
  --dashboard-main-pad: 1.5rem;
  --card-padding: 1.5rem;
  --nav-radius: 999px;
}

/* ==========================================================================
   24. Wine — editorial
   ========================================================================== */

html[data-theme="wine"] {
  --theme-style: "editorial";
  --color-primary: #4a2030;
  --color-primary-hover: #3a1826;
  --color-primary-light: #f2e8ec;
  --color-primary-muted: #6a4050;
  --color-accent: #4a5c3a;
  --color-accent-hover: #3a482e;
  --color-accent-light: #eef1ea;
  --color-bg: #ffffff;
  --color-bg-subtle: #f7f3f5;
  --color-bg-muted: #f0e8ec;
  --color-bg-elevated: #ffffff;
  --color-text: #241418;
  --color-text-secondary: #443438;
  --color-text-muted: #645458;
  --color-text-inverse: #ffffff;
  --color-border: #e0d4d8;
  --color-border-strong: #c8b4bc;
  --color-divider: #ece2e6;
  --color-danger: #9b2c2c;
  --color-danger-bg: #fceaea;
  --color-success: #3a6048;
  --color-success-bg: #e8f2ec;
  --color-info: #4a3868;
  --color-info-bg: #f0ecf4;
  --color-warning: #8a6820;
  --color-warning-bg: #f6f0e0;
  --sidebar-bg: #4a2030;
  --sidebar-text: #faf4f6;
  --sidebar-muted: #c8a0ac;
  --topbar-bg: #ffffff;
  --font-sans: "Source Sans 3", system-ui, sans-serif;
  --font-serif: "Libre Baskerville", Georgia, serif;
  --text-base: 1rem;
  --leading-normal: 1.55;
  --radius-sm: 2px;
  --radius-md: 2px;
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --focus-ring: 0 0 0 2px rgba(74, 32, 48, 0.25);
  --sidebar-width: 248px;
  --header-height: 4rem;
  --dashboard-main-pad: 1.5rem;
  --card-padding: 1.25rem;
  --nav-radius: 0;
}

/* ==========================================================================
   25. Sky — airy coastal
   ========================================================================== */

html[data-theme="sky"] {
  --theme-style: "airy";
  --color-primary: #2868a0;
  --color-primary-hover: #205280;
  --color-primary-light: #e8f2fa;
  --color-primary-muted: #5088b8;
  --color-accent: #3a6848;
  --color-accent-hover: #2e5238;
  --color-accent-light: #e8f2ea;
  --color-bg: #ffffff;
  --color-bg-subtle: #f0f6fc;
  --color-bg-muted: #e4eef8;
  --color-bg-elevated: #ffffff;
  --color-text: #142030;
  --color-text-secondary: #344050;
  --color-text-muted: #546070;
  --color-text-inverse: #ffffff;
  --color-border: #d4e4f0;
  --color-border-strong: #b8d0e4;
  --color-divider: #e2eef6;
  --color-danger: #943838;
  --color-danger-bg: #faeaea;
  --color-success: #2a6848;
  --color-success-bg: #e4f2ea;
  --color-info: #2088c0;
  --color-info-bg: #e4f4fc;
  --color-warning: #8a7020;
  --color-warning-bg: #f4f0e0;
  --sidebar-bg: #2868a0;
  --sidebar-text: #f0f8fc;
  --sidebar-muted: #a0c8e8;
  --topbar-bg: #ffffff;
  --font-sans: "Outfit", system-ui, sans-serif;
  --font-serif: "Fraunces", Georgia, serif;
  --text-base: 1.0625rem;
  --leading-normal: 1.65;
  --radius-sm: 10px;
  --radius-md: 12px;
  --shadow-xs: 0 1px 3px rgba(20, 32, 48, 0.04);
  --shadow-sm: 0 4px 14px rgba(20, 32, 48, 0.07);
  --shadow-md: 0 10px 30px rgba(20, 32, 48, 0.1);
  --focus-ring: 0 0 0 3px rgba(40, 104, 160, 0.18);
  --sidebar-width: 260px;
  --header-height: 4.5rem;
  --dashboard-main-pad: 2rem;
  --card-padding: 1.5rem;
  --nav-radius: 999px;
}

/* ==========================================================================
   26. Espresso — dark warm
   ========================================================================== */

html[data-theme="espresso"] {
  --theme-style: "dark";
  --color-primary: #c4a882;
  --color-primary-hover: #d4bc9a;
  --color-primary-light: #2a241e;
  --color-primary-muted: #988870;
  --color-accent: #8a9a6a;
  --color-accent-hover: #9aaa7a;
  --color-accent-light: #242820;
  --color-bg: #1a1410;
  --color-bg-subtle: #201a14;
  --color-bg-muted: #2a241c;
  --color-bg-elevated: #242018;
  --color-text: #ece8e4;
  --color-text-secondary: #c8c0b8;
  --color-text-muted: #908880;
  --color-text-inverse: #1a1410;
  --color-border: #3c3630;
  --color-border-strong: #504840;
  --color-divider: #302c26;
  --color-danger: #d48478;
  --color-danger-bg: #3a2220;
  --color-success: #8aaa78;
  --color-success-bg: #1e2a20;
  --color-info: #88a8c8;
  --color-info-bg: #1e2830;
  --color-warning: #d4b060;
  --color-warning-bg: #2a2418;
  --sidebar-bg: #141008;
  --sidebar-text: #ece8e4;
  --sidebar-muted: #887860;
  --topbar-bg: #201a14;
  --font-sans: "Karla", system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --text-base: 1rem;
  --leading-normal: 1.55;
  --radius-sm: 4px;
  --radius-md: 6px;
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 3px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.4);
  --focus-ring: 0 0 0 3px rgba(196, 168, 130, 0.3);
  --sidebar-width: 260px;
  --header-height: 4rem;
  --dashboard-main-pad: 1.5rem;
  --card-padding: 1.25rem;
  --nav-radius: 4px;
}

/* ==========================================================================
   27. Mint — coastal / organic
   ========================================================================== */

html[data-theme="mint"] {
  --theme-style: "coastal";
  --color-primary: #2a6858;
  --color-primary-hover: #225246;
  --color-primary-light: #e6f4f0;
  --color-primary-muted: #4a8878;
  --color-accent: #5c5230;
  --color-accent-hover: #4a4226;
  --color-accent-light: #f2f0e6;
  --color-bg: #ffffff;
  --color-bg-subtle: #f2f9f7;
  --color-bg-muted: #e8f4f0;
  --color-bg-elevated: #ffffff;
  --color-text: #142820;
  --color-text-secondary: #344840;
  --color-text-muted: #546860;
  --color-text-inverse: #ffffff;
  --color-border: #d4e8e0;
  --color-border-strong: #b8d4c8;
  --color-divider: #e2f0ea;
  --color-danger: #8f3a32;
  --color-danger-bg: #faeded;
  --color-success: #1e6848;
  --color-success-bg: #e4f4ec;
  --color-info: #2a7888;
  --color-info-bg: #e4f4f8;
  --color-warning: #8a7020;
  --color-warning-bg: #f4f0e0;
  --sidebar-bg: #2a6858;
  --sidebar-text: #f0faf6;
  --sidebar-muted: #98c8b8;
  --topbar-bg: #ffffff;
  --font-sans: "Outfit", system-ui, sans-serif;
  --font-serif: "Fraunces", Georgia, serif;
  --text-base: 1.0625rem;
  --leading-normal: 1.6;
  --radius-sm: 8px;
  --radius-md: 12px;
  --shadow-xs: 0 1px 3px rgba(20, 40, 32, 0.05);
  --shadow-sm: 0 3px 12px rgba(20, 40, 32, 0.08);
  --shadow-md: 0 8px 24px rgba(20, 40, 32, 0.1);
  --focus-ring: 0 0 0 3px rgba(42, 104, 88, 0.2);
  --sidebar-width: 260px;
  --header-height: 4.5rem;
  --dashboard-main-pad: 2rem;
  --card-padding: 1.5rem;
  --nav-radius: 999px;
}

/* ==========================================================================
   28. Lavender — modern soft
   ========================================================================== */

html[data-theme="lavender"] {
  --theme-style: "modern";
  --color-primary: #5a5068;
  --color-primary-hover: #484058;
  --color-primary-light: #f0eef4;
  --color-primary-muted: #787088;
  --color-accent: #4a5c42;
  --color-accent-hover: #3a4834;
  --color-accent-light: #eef0ea;
  --color-bg: #ffffff;
  --color-bg-subtle: #f6f4f8;
  --color-bg-muted: #eeeaf0;
  --color-bg-elevated: #ffffff;
  --color-text: #201c28;
  --color-text-secondary: #403c48;
  --color-text-muted: #605c68;
  --color-text-inverse: #ffffff;
  --color-border: #dcd8e4;
  --color-border-strong: #c4bcc8;
  --color-divider: #e8e4ec;
  --color-danger: #943838;
  --color-danger-bg: #faeaea;
  --color-success: #3a6048;
  --color-success-bg: #e8f2ec;
  --color-info: #4a5888;
  --color-info-bg: #eef0f8;
  --color-warning: #8a6820;
  --color-warning-bg: #f6f0e0;
  --sidebar-bg: #5a5068;
  --sidebar-text: #f4f2f8;
  --sidebar-muted: #b8b0c8;
  --topbar-bg: #ffffff;
  --font-sans: "Manrope", system-ui, sans-serif;
  --font-serif: "Manrope", system-ui, sans-serif;
  --text-base: 1rem;
  --leading-normal: 1.5;
  --radius-sm: 6px;
  --radius-md: 8px;
  --shadow-xs: 0 1px 3px rgba(32, 28, 40, 0.05);
  --shadow-sm: 0 3px 10px rgba(32, 28, 40, 0.07);
  --shadow-md: 0 6px 20px rgba(32, 28, 40, 0.09);
  --focus-ring: 0 0 0 3px rgba(90, 80, 104, 0.2);
  --sidebar-width: 248px;
  --header-height: 4rem;
  --dashboard-main-pad: 1.5rem;
  --card-padding: 1.25rem;
  --nav-radius: 8px;
}

/* ==========================================================================
   29. Terracotta — warm heritage
   ========================================================================== */

html[data-theme="terracotta"] {
  --theme-style: "heritage";
  --color-primary: #8a4830;
  --color-primary-hover: #703a26;
  --color-primary-light: #f6ece8;
  --color-primary-muted: #a86850;
  --color-accent: #4a5c3a;
  --color-accent-hover: #3a482e;
  --color-accent-light: #eef1ea;
  --color-bg: #fffef8;
  --color-bg-subtle: #f8f4f2;
  --color-bg-muted: #f0eae4;
  --color-bg-elevated: #ffffff;
  --color-text: #281c14;
  --color-text-secondary: #483c30;
  --color-text-muted: #685c50;
  --color-text-inverse: #ffffff;
  --color-border: #e4d8d0;
  --color-border-strong: #ccc0b4;
  --color-divider: #eee6e0;
  --color-danger: #943838;
  --color-danger-bg: #faeaea;
  --color-success: #4a6040;
  --color-success-bg: #eef2ea;
  --color-info: #4a5868;
  --color-info-bg: #eef0f4;
  --color-warning: #8a6820;
  --color-warning-bg: #f6f0e0;
  --sidebar-bg: #8a4830;
  --sidebar-text: #faf4f0;
  --sidebar-muted: #c8a898;
  --topbar-bg: #fffef8;
  --font-sans: "Karla", system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --text-base: 1rem;
  --leading-normal: 1.55;
  --radius-sm: 4px;
  --radius-md: 6px;
  --shadow-xs: 0 1px 2px rgba(40, 28, 20, 0.06);
  --shadow-sm: 0 2px 8px rgba(40, 28, 20, 0.08);
  --shadow-md: 0 4px 16px rgba(40, 28, 20, 0.1);
  --focus-ring: 0 0 0 3px rgba(138, 72, 48, 0.22);
  --sidebar-width: 260px;
  --header-height: 4rem;
  --dashboard-main-pad: 1.5rem;
  --card-padding: 1.25rem;
  --nav-radius: 4px;
}

/* ==========================================================================
   30. Ivory — editorial minimal
   ========================================================================== */

html[data-theme="ivory"] {
  --theme-style: "editorial";
  --color-primary: #3a3020;
  --color-primary-hover: #2a2418;
  --color-primary-light: #f0ece4;
  --color-primary-muted: #6a5840;
  --color-accent: #4a5c3a;
  --color-accent-hover: #3a482e;
  --color-accent-light: #eef1ea;
  --color-bg: #f7f4ec;
  --color-bg-subtle: #f3f0e8;
  --color-bg-muted: #ebe6dc;
  --color-bg-elevated: #faf8f2;
  --color-text: #1a1810;
  --color-text-secondary: #3a3428;
  --color-text-muted: #5a5448;
  --color-text-inverse: #f7f4ec;
  --color-border: #d8d0c4;
  --color-border-strong: #c0b8a8;
  --color-divider: #e4ddd0;
  --color-danger: #8a3030;
  --color-danger-bg: #faeaea;
  --color-success: #3a5840;
  --color-success-bg: #e8f0ea;
  --color-info: #3a5068;
  --color-info-bg: #e8eef4;
  --color-warning: #7a6220;
  --color-warning-bg: #f4f0e4;
  --sidebar-bg: #3a3020;
  --sidebar-text: #f7f4ec;
  --sidebar-muted: #b8a898;
  --topbar-bg: #f7f4ec;
  --font-sans: "Source Sans 3", system-ui, sans-serif;
  --font-serif: "Libre Baskerville", Georgia, serif;
  --text-base: 1rem;
  --leading-normal: 1.55;
  --radius-sm: 0;
  --radius-md: 0;
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --focus-ring: 0 0 0 2px rgba(58, 48, 32, 0.2);
  --sidebar-width: 248px;
  --header-height: 4rem;
  --dashboard-main-pad: 1.5rem;
  --card-padding: 1.25rem;
  --nav-radius: 0;
}

/* ==========================================================================
   Structural CSS — uses theme tokens
   ========================================================================== */

html[data-theme] body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  background: var(--color-bg-subtle);
  color: var(--color-text);
}

html[data-theme] h1,
html[data-theme] .page-title,
html[data-theme] .site-brand,
html[data-theme] .sidebar-brand a {
  font-family: var(--font-serif);
}

html[data-theme] .dashboard-main h2,
html[data-theme] .dashboard-main h3,
html[data-theme] .dashboard-main .card-title,
html[data-theme] .dashboard-main .family-card__title,
html[data-theme] .dashboard-main .stat-label,
html[data-theme] .dashboard-main .module-card__label {
  font-family: var(--font-sans);
  color: var(--color-text);
  text-transform: none;
  letter-spacing: normal;
}

html[data-theme] .dashboard-sidebar,
html[data-theme] .admin-sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg, var(--color-bg));
  color: var(--sidebar-text, var(--color-text));
}

html[data-theme] .dashboard-content,
html[data-theme] .admin-content {
  margin-left: var(--sidebar-width);
}

html[data-theme] .dashboard-topbar,
html[data-theme] .admin-topbar {
  height: var(--header-height);
  background: var(--topbar-bg, var(--color-bg));
}

html[data-theme] .dashboard-main,
html[data-theme] .admin-main {
  padding: var(--dashboard-main-pad, 1.5rem);
}

html[data-theme] .card {
  background: var(--color-bg-elevated, var(--color-bg));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  border-color: var(--color-border);
}

html[data-theme] .form.card,
html[data-theme] form.card {
  padding: var(--card-padding, 1.35rem);
}

html[data-theme] .btn {
  border-radius: var(--radius-sm);
}

html[data-theme] .sidebar-link {
  border-radius: var(--nav-radius, var(--radius-sm));
  color: var(--sidebar-muted, var(--color-text-secondary));
}

html[data-theme] .sidebar-link:hover {
  background: color-mix(in srgb, var(--sidebar-text, var(--color-text)) 10%, transparent);
  color: var(--sidebar-text, var(--color-text));
  text-decoration: none;
}

html[data-theme] .sidebar-link.is-active {
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
  color: var(--sidebar-text, var(--color-primary));
}

html[data-theme] .sidebar-brand a {
  color: var(--sidebar-text, var(--color-primary));
}

html[data-theme] .sidebar-brand a:hover {
  color: var(--sidebar-text, var(--color-primary-hover));
}

html[data-theme] .form-input,
html[data-theme] .form-select,
html[data-theme] .form-textarea,
html[data-theme] select.form-input {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-border);
  border-radius: var(--radius-sm);
}

html[data-theme] .btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse, #fff);
}

html[data-theme] .btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

html[data-theme] .sidebar-muted,
html[data-theme] .sidebar .text-muted {
  color: var(--sidebar-muted, var(--color-text-muted));
}

html[data-theme] .ui-icon {
  color: currentColor;
}

html[data-theme] .layout-dashboard .page-title {
  overflow: visible;
  line-height: 1.25;
  padding-top: 0.15rem;
}

/* Sharp / minimal themes */
html[data-theme="slate"] .card,
html[data-theme="charcoal"] .card,
html[data-theme="graphite"] .card {
  box-shadow: none;
  border-width: 1px;
}

html[data-theme="slate"] .sidebar-link.is-active,
html[data-theme="charcoal"] .sidebar-link.is-active,
html[data-theme="graphite"] .sidebar-link.is-active {
  background: transparent;
  box-shadow: inset 3px 0 0 var(--color-primary);
  border-radius: 0;
}

/* Editorial themes */
html[data-theme="burgundy"] .dashboard-main,
html[data-theme="wine"] .dashboard-main,
html[data-theme="ivory"] .dashboard-main {
  max-width: 1100px;
}

html[data-theme="burgundy"] .page-title,
html[data-theme="wine"] .page-title,
html[data-theme="ivory"] .page-title {
  letter-spacing: -0.02em;
  font-weight: 700;
}

html[data-theme="burgundy"] .card,
html[data-theme="wine"] .card,
html[data-theme="ivory"] .card {
  box-shadow: none;
  border-radius: 0;
  border: 1px solid var(--color-border);
}

/* Organic soft themes */
html[data-theme="forest"] .card,
html[data-theme="sage"] .card,
html[data-theme="moss"] .card,
html[data-theme="pine"] .card,
html[data-theme="olive"] .card {
  border: none;
  box-shadow: var(--shadow-sm);
  border-radius: 12px;
}

html[data-theme="forest"] .sidebar-link.is-active,
html[data-theme="sage"] .sidebar-link.is-active,
html[data-theme="moss"] .sidebar-link.is-active,
html[data-theme="pine"] .sidebar-link.is-active,
html[data-theme="olive"] .sidebar-link.is-active {
  border-radius: 999px;
}

/* Coastal / airy themes */
html[data-theme="ocean"] .dashboard-main,
html[data-theme="teal"] .dashboard-main,
html[data-theme="azure"] .dashboard-main,
html[data-theme="sky"] .dashboard-main,
html[data-theme="mint"] .dashboard-main {
  padding: 2rem;
}

html[data-theme="ocean"] .card,
html[data-theme="teal"] .card,
html[data-theme="azure"] .card,
html[data-theme="sky"] .card,
html[data-theme="mint"] .card {
  border-radius: 12px;
  border: none;
  box-shadow: var(--shadow-md);
}

/* Dark themes — sidebar inherits light text */
html[data-theme="midnight"] .sidebar-link,
html[data-theme="graphite"] .sidebar-link,
html[data-theme="espresso"] .sidebar-link {
  color: var(--sidebar-text);
}

html[data-theme="midnight"] .sidebar-link.is-active,
html[data-theme="graphite"] .sidebar-link.is-active,
html[data-theme="espresso"] .sidebar-link.is-active {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* ==========================================================================
   Theme Preview Swatches
   ========================================================================== */

.theme-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.85rem;
}

.theme-swatch {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid #d0d4da;
  border-radius: 8px;
  background: #fff;
  color: #1a2332;
  cursor: pointer;
  min-height: 9.5rem;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.theme-swatch:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26, 35, 50, 0.08);
}

.theme-swatch.is-active {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
}

.theme-swatch__bar {
  height: 44px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0.35rem 0.5rem;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.theme-swatch__name {
  font-weight: 700;
  font-size: 0.9rem;
  color: #1a2332 !important;
  line-height: 1.2;
}

.theme-swatch__meta {
  font-size: 0.7rem;
  color: #5c6570 !important;
  line-height: 1.35;
}

.theme-form {
  max-width: none;
}

/* ==========================================================================
   Module Grid & Family Page Utilities
   ========================================================================== */

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

.module-card {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  background: var(--color-bg);
  transition: border-color 120ms ease, background-color 120ms ease;
}

.module-card:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  text-decoration: none;
}

.module-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 4px;
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.module-card__icon .ui-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.module-card__text {
  min-width: 0;
}

.module-card__label {
  font-weight: 600;
  display: block;
  color: var(--color-text);
}

.module-card__desc {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  display: block;
  margin-top: 0.15rem;
  line-height: 1.4;
}

.family-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.family-actions--danger {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-divider);
}

.family-subnav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.family-subnav-link {
  display: inline-block;
  padding: 0.35rem 0.65rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.family-subnav-link:hover {
  color: var(--color-primary);
  border-color: var(--color-border-strong);
  text-decoration: none;
}

.family-subnav-link.is-active {
  color: var(--color-primary);
  background: var(--color-primary-light);
  border-color: var(--color-primary-muted);
  font-weight: 600;
}

.family-subnav-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 0.65rem;
}

.inline-form {
  display: inline;
}

.family-modules .card-body,
.family-actions-panel .card-body {
  padding-top: 0.25rem;
}

.grid-stats.family-stats {
  margin-bottom: 1.25rem;
}

.stat-value--text {
  font-size: 1rem !important;
  font-weight: 600;
}

.stat-value--badge {
  font-size: 1rem !important;
}

.account-nav {
  margin-bottom: 1.25rem;
  padding: 0 0 0.65rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
}

.account-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.account-nav a {
  display: inline-block;
  padding: 0.45rem 0.1rem 0.55rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  transition: color 120ms ease, border-color 120ms ease;
}

.account-nav a:hover {
  color: var(--color-text);
  border-color: transparent;
  text-decoration: none;
  background: transparent;
}

.account-nav a.is-active {
  color: var(--color-text);
  background: transparent;
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}

.form-preview {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  margin-bottom: 0.65rem;
}

.grid.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 920px) {
  html[data-theme] .dashboard-content,
  html[data-theme] .admin-content {
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .grid.grid-2 {
    grid-template-columns: 1fr;
  }

  .form.card,
  form.card {
    padding: 1.1rem 1rem 1.25rem;
  }
}