/**
 * LEVEL.fun — Dynamic Theming Architecture
 * 
 * TO CHANGE THE COLOR SCHEME:
 * You can simply edit the CSS custom properties in :root below,
 * or choose one of the built-in themes ([data-theme="..."]),
 * or use the interactive Theme Switcher widget in the UI.
 */

:root,
[data-theme="default"] {
  /* ==========================================================================
     1. BRAND & ACCENT COLORS
     ========================================================================== */
  --color-primary: #ff7a1a;
  --color-primary-hover: #ff8c36;
  --color-primary-active: #e3660a;
  --color-primary-soft: #ffe8d6;
  --color-primary-text: #ffffff;
  --color-primary-glow: rgba(255, 122, 26, 0.35);
  --color-primary-dark: #843300;

  --color-accent-lime: #d9f58c;
  --color-accent-lime-hover: #c4e473;
  --color-accent-lime-text: #102f40;
  --color-accent-lime-glow: rgba(217, 245, 140, 0.4);

  /* ==========================================================================
     2. BACKGROUNDS & SURFACES
     ========================================================================== */
  --color-bg-page: #a8d8f8;
  --color-bg-sky: #a8d8f8;
  --color-bg-sky-opacity: 1;
  --color-bg-mesh: transparent;
  --theme-bg-image: url('../level/sky.png');
  --theme-bg-size: cover;
  --theme-bg-pos: center top;
  --theme-bg-repeat: no-repeat;
  --theme-bg-attachment: fixed;
  
  /* Glassmorphic Cards & Panels */
  --color-card-bg: rgba(255, 255, 255, 0.72);
  --color-card-bg-solid: #ffffff;
  --color-card-border: rgba(255, 255, 255, 0.85);
  --color-card-border-subtle: rgba(255, 255, 255, 0.65);
  --color-card-hover-border: #ff7a1a;
  --color-card-shadow: 0 16px 40px rgba(36, 81, 109, 0.08);
  --color-card-shadow-hover: 0 20px 50px rgba(36, 81, 109, 0.14);

  /* ==========================================================================
     3. TYPOGRAPHY & TEXT
     ========================================================================== */
  --color-text-main: #0b1a2b;
  --color-text-muted: #44566b;
  --color-text-subtle: #485c71;
  --color-text-dim: #607e92;
  --color-text-inverse: #ffffff;

  /* ==========================================================================
     4. NAVIGATION & FOOTER
     ========================================================================== */
  --color-nav-bg: rgba(255, 255, 255, 0.55);
  --color-nav-border: rgba(255, 255, 255, 0.75);
  --color-nav-shadow: 0 5px 22px rgba(36, 82, 118, 0.05);
  --color-nav-text: #0b1a2b;
  --color-nav-active-bg: rgba(255, 255, 255, 0.95);
  --color-footer-bg: rgba(242, 250, 255, 0.48);
  --color-footer-border: #ffffff;

  /* ==========================================================================
     5. TABLES, GRIDS & LISTS
     ========================================================================== */
  --color-table-header-bg: rgba(240, 248, 253, 0.95);
  --color-table-header-text: #0b1a2b;
  --color-table-border: rgba(16, 47, 64, 0.12);
  --color-table-row-hover: rgba(255, 238, 224, 0.65);
  --color-table-row-stripe: rgba(247, 252, 255, 0.5);

  /* ==========================================================================
     6. BADGES, STATUS & CHIPS
     ========================================================================== */
  --color-badge-phase1-bg: #ffe7d3;
  --color-badge-phase1-border: #ffd5b3;
  --color-badge-phase1-text: #9e3d00;
  --color-badge-phase1-dot: #ff7a1a;

  --color-badge-phase2-bg: rgba(234, 245, 252, 0.85);
  --color-badge-phase2-border: rgba(200, 223, 232, 0.65);
  --color-badge-phase2-text: #486982;
  --color-badge-phase2-dot: #849ba5;

  /* ==========================================================================
     7. BUTTONS & INPUTS
     ========================================================================== */
  --color-btn-dark-bg: #102f40;
  --color-btn-dark-hover: #ff7a1a;
  --color-btn-dark-text: #ffffff;

  --color-btn-outline-bg: rgba(255, 255, 255, 0.85);
  --color-btn-outline-border: rgba(194, 217, 231, 0.7);
  --color-btn-outline-text: #173b53;
  --color-btn-outline-hover-bg: #ffffff;

  --color-input-bg: rgba(255, 255, 255, 0.9);
  --color-input-border: #c8dfe8;
  --color-input-focus-border: #ff7a1a;
  --color-input-focus-glow: rgba(255, 122, 26, 0.2);

  /* ==========================================================================
     8. SECTION ACCENTS & HERO CARDS
     ========================================================================== */
  --color-hero-banner-count-bg: #ff7a1a;
  --color-hero-banner-count-text: #17283b;
  --color-hero-banner-body-bg: #edfaffeb;
  --color-hero-banner-border: rgba(255, 255, 255, 0.85);

  --color-vault-card-bg: #edfaff;
  --color-vault-card-border: #cde4f0;
  --color-vault-card-text: #173b53;

  /* Floating visual blocks */
  --color-float-block-a-bg: #cde9fc;
  --color-float-block-a-text: #245270;
  --color-float-block-b-bg: #ff7a1a;
  --color-float-block-b-text: #ffffff;
  --color-float-block-c-bg: #102f40;
  --color-float-block-c-text: #d9f58c;
}

/* ==========================================================================
   PRESET 2: DARK OBSIDIAN (Deep space mode with glowing orange accents)
   ========================================================================== */
[data-theme="dark-obsidian"] {
  --color-primary: #ff7a1a;
  --color-primary-hover: #ff933b;
  --color-primary-active: #e3660a;
  --color-primary-soft: #2a180e;
  --color-primary-text: #ffffff;
  --color-primary-glow: rgba(255, 122, 26, 0.45);
  --color-primary-dark: #ff8c36;

  --color-accent-lime: #d9f58c;
  --color-accent-lime-hover: #e5f8a8;
  --color-accent-lime-text: #080d17;
  --color-accent-lime-glow: rgba(217, 245, 140, 0.3);

  --color-bg-page: #0b101b;
  --color-bg-sky: #070a12;
  --color-bg-sky-opacity: 0.15;
  --color-bg-mesh: radial-gradient(circle at 50% 20%, rgba(255, 122, 26, 0.08) 0%, rgba(11, 16, 27, 0.95) 100%);

  --color-card-bg: rgba(18, 25, 41, 0.78);
  --color-card-bg-solid: #121929;
  --color-card-border: rgba(255, 255, 255, 0.12);
  --color-card-border-subtle: rgba(255, 255, 255, 0.08);
  --color-card-hover-border: #ff7a1a;
  --color-card-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  --color-card-shadow-hover: 0 20px 50px rgba(0, 0, 0, 0.7);

  --color-text-main: #f1f5f9;
  --color-text-muted: #94a3b8;
  --color-text-subtle: #64748b;
  --color-text-dim: #475569;
  --color-text-inverse: #0b101b;

  --color-nav-bg: rgba(15, 23, 42, 0.85);
  --color-nav-border: rgba(255, 255, 255, 0.1);
  --color-nav-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  --color-nav-text: #f1f5f9;
  --color-nav-active-bg: rgba(30, 41, 59, 0.8);
  --color-footer-bg: rgba(11, 16, 27, 0.85);
  --color-footer-border: rgba(255, 255, 255, 0.08);

  --color-table-header-bg: rgba(20, 30, 48, 0.95);
  --color-table-header-text: #94a3b8;
  --color-table-border: rgba(255, 255, 255, 0.08);
  --color-table-row-hover: rgba(255, 122, 26, 0.12);
  --color-table-row-stripe: rgba(18, 25, 41, 0.4);

  --color-badge-phase1-bg: rgba(255, 122, 26, 0.18);
  --color-badge-phase1-border: rgba(255, 122, 26, 0.4);
  --color-badge-phase1-text: #ffa86b;
  --color-badge-phase1-dot: #ff7a1a;

  --color-badge-phase2-bg: rgba(148, 163, 184, 0.12);
  --color-badge-phase2-border: rgba(148, 163, 184, 0.25);
  --color-badge-phase2-text: #cbd5e1;
  --color-badge-phase2-dot: #94a3b8;

  --color-btn-dark-bg: #ff7a1a;
  --color-btn-dark-hover: #ff9138;
  --color-btn-dark-text: #ffffff;

  --color-btn-outline-bg: rgba(30, 41, 59, 0.6);
  --color-btn-outline-border: rgba(255, 255, 255, 0.15);
  --color-btn-outline-text: #f1f5f9;
  --color-btn-outline-hover-bg: rgba(255, 255, 255, 0.1);

  --color-input-bg: rgba(18, 25, 41, 0.9);
  --color-input-border: rgba(255, 255, 255, 0.14);
  --color-input-focus-border: #ff7a1a;
  --color-input-focus-glow: rgba(255, 122, 26, 0.35);

  --color-hero-banner-count-bg: #ff7a1a;
  --color-hero-banner-count-text: #0b101b;
  --color-hero-banner-body-bg: rgba(18, 25, 41, 0.92);
  --color-hero-banner-border: rgba(255, 255, 255, 0.12);

  --color-vault-card-bg: rgba(18, 25, 41, 0.85);
  --color-vault-card-border: rgba(255, 255, 255, 0.12);
  --color-vault-card-text: #f1f5f9;

  --color-float-block-a-bg: #1e293b;
  --color-float-block-a-text: #93c5fd;
  --color-float-block-b-bg: #ff7a1a;
  --color-float-block-b-text: #ffffff;
  --color-float-block-c-bg: #030712;
  --color-float-block-c-text: #d9f58c;
}

/* ==========================================================================
   PRESET 3: CYBERPUNK NEON (Synthwave matrix green & electric cyan)
   ========================================================================== */
[data-theme="cyberpunk-neon"] {
  --color-primary: #00ff88;
  --color-primary-hover: #33ff9f;
  --color-primary-active: #00cc6d;
  --color-primary-soft: #08291a;
  --color-primary-text: #050d09;
  --color-primary-glow: rgba(0, 255, 136, 0.45);
  --color-primary-dark: #00ff88;

  --color-accent-lime: #00f0ff;
  --color-accent-lime-hover: #5cf5ff;
  --color-accent-lime-text: #050d09;
  --color-accent-lime-glow: rgba(0, 240, 255, 0.4);

  --color-bg-page: #070b12;
  --color-bg-sky: #03060a;
  --color-bg-sky-opacity: 0.1;
  --color-bg-mesh: radial-gradient(circle at 50% 20%, rgba(0, 255, 136, 0.08) 0%, rgba(7, 11, 18, 0.98) 100%);
  --theme-bg-image: 
    radial-gradient(circle at 12% 14%, rgba(0, 255, 136, 0.16) 0%, transparent 42%),
    radial-gradient(circle at 88% 16%, rgba(0, 229, 255, 0.15) 0%, transparent 45%),
    radial-gradient(circle at 50% 85%, rgba(168, 85, 247, 0.10) 0%, transparent 50%),
    linear-gradient(to right, rgba(0, 255, 136, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 255, 136, 0.04) 1px, transparent 1px);
  --theme-bg-size: 100% 100%, 100% 100%, 100% 100%, 48px 48px, 48px 48px;
  --theme-bg-pos: center top, center top, center top, 0 0, 0 0;

  --color-card-bg: rgba(12, 19, 31, 0.82);
  --color-card-bg-solid: #0c131f;
  --color-card-border: rgba(0, 255, 136, 0.25);
  --color-card-border-subtle: rgba(255, 255, 255, 0.07);
  --color-card-hover-border: #00ff88;
  --color-card-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
  --color-card-shadow-hover: 0 20px 50px rgba(0, 255, 136, 0.12);

  --color-text-main: #f0fdf4;
  --color-text-muted: #86efac;
  --color-text-subtle: #4ade80;
  --color-text-dim: #22c55e;
  --color-text-inverse: #070b12;

  --color-nav-bg: rgba(10, 16, 26, 0.88);
  --color-nav-border: rgba(0, 255, 136, 0.2);
  --color-nav-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  --color-nav-text: #f0fdf4;
  --color-nav-active-bg: rgba(0, 255, 136, 0.12);
  --color-footer-bg: rgba(7, 11, 18, 0.9);
  --color-footer-border: rgba(0, 255, 136, 0.15);

  --color-table-header-bg: rgba(14, 24, 38, 0.95);
  --color-table-header-text: #86efac;
  --color-table-border: rgba(0, 255, 136, 0.12);
  --color-table-row-hover: rgba(0, 255, 136, 0.1);
  --color-table-row-stripe: rgba(12, 19, 31, 0.4);

  --color-badge-phase1-bg: rgba(0, 255, 136, 0.15);
  --color-badge-phase1-border: rgba(0, 255, 136, 0.4);
  --color-badge-phase1-text: #00ff88;
  --color-badge-phase1-dot: #00ff88;

  --color-badge-phase2-bg: rgba(0, 240, 255, 0.12);
  --color-badge-phase2-border: rgba(0, 240, 255, 0.3);
  --color-badge-phase2-text: #67e8f9;
  --color-badge-phase2-dot: #00f0ff;

  --color-btn-dark-bg: #00ff88;
  --color-btn-dark-hover: #33ff9f;
  --color-btn-dark-text: #050d09;

  --color-btn-outline-bg: rgba(12, 19, 31, 0.7);
  --color-btn-outline-border: rgba(0, 255, 136, 0.3);
  --color-btn-outline-text: #f0fdf4;
  --color-btn-outline-hover-bg: rgba(0, 255, 136, 0.15);

  --color-input-bg: rgba(12, 19, 31, 0.9);
  --color-input-border: rgba(0, 255, 136, 0.25);
  --color-input-focus-border: #00ff88;
  --color-input-focus-glow: rgba(0, 255, 136, 0.4);

  --color-hero-banner-count-bg: #00ff88;
  --color-hero-banner-count-text: #050d09;
  --color-hero-banner-body-bg: rgba(12, 19, 31, 0.95);
  --color-hero-banner-border: rgba(0, 255, 136, 0.3);

  --color-vault-card-bg: rgba(12, 19, 31, 0.9);
  --color-vault-card-border: rgba(0, 255, 136, 0.25);
  --color-vault-card-text: #f0fdf4;

  --color-float-block-a-bg: #0f241a;
  --color-float-block-a-text: #00ff88;
  --color-float-block-b-bg: #00ff88;
  --color-float-block-b-text: #050d09;
  --color-float-block-c-bg: #002229;
  --color-float-block-c-text: #00f0ff;
}

/* ==========================================================================
   PRESET 4: BINANCE BSC GOLD (Official BNB Chain gold & obsidian theme)
   ========================================================================== */
[data-theme="binance-gold"] {
  --color-primary: #f0b90b;
  --color-primary-hover: #fcd535;
  --color-primary-active: #d6a100;
  --color-primary-soft: #2e260a;
  --color-primary-text: #181a20;
  --color-primary-glow: rgba(240, 185, 11, 0.4);
  --color-primary-dark: #f0b90b;

  --color-accent-lime: #fcd535;
  --color-accent-lime-hover: #ffe47a;
  --color-accent-lime-text: #181a20;
  --color-accent-lime-glow: rgba(252, 213, 53, 0.35);

  --color-bg-page: #14151a;
  --color-bg-sky: #0b0e11;
  --color-bg-sky-opacity: 0.12;
  --color-bg-mesh: radial-gradient(circle at 50% 20%, rgba(240, 185, 11, 0.08) 0%, rgba(20, 21, 26, 0.98) 100%);

  --color-card-bg: rgba(24, 26, 32, 0.82);
  --color-card-bg-solid: #181a20;
  --color-card-border: rgba(240, 185, 11, 0.22);
  --color-card-border-subtle: rgba(255, 255, 255, 0.08);
  --color-card-hover-border: #f0b90b;
  --color-card-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  --color-card-shadow-hover: 0 20px 50px rgba(240, 185, 11, 0.15);

  --color-text-main: #eaecef;
  --color-text-muted: #b7bdc6;
  --color-text-subtle: #848e9c;
  --color-text-dim: #5e6673;
  --color-text-inverse: #181a20;

  --color-nav-bg: rgba(20, 21, 26, 0.88);
  --color-nav-border: rgba(240, 185, 11, 0.18);
  --color-nav-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  --color-nav-text: #eaecef;
  --color-nav-active-bg: rgba(240, 185, 11, 0.12);
  --color-footer-bg: rgba(15, 16, 20, 0.9);
  --color-footer-border: rgba(240, 185, 11, 0.15);

  --color-table-header-bg: rgba(30, 32, 38, 0.95);
  --color-table-header-text: #b7bdc6;
  --color-table-border: rgba(255, 255, 255, 0.08);
  --color-table-row-hover: rgba(240, 185, 11, 0.1);
  --color-table-row-stripe: rgba(24, 26, 32, 0.4);

  --color-badge-phase1-bg: rgba(240, 185, 11, 0.18);
  --color-badge-phase1-border: rgba(240, 185, 11, 0.4);
  --color-badge-phase1-text: #f0b90b;
  --color-badge-phase1-dot: #f0b90b;

  --color-badge-phase2-bg: rgba(183, 189, 198, 0.12);
  --color-badge-phase2-border: rgba(183, 189, 198, 0.25);
  --color-badge-phase2-text: #eaecef;
  --color-badge-phase2-dot: #848e9c;

  --color-btn-dark-bg: #f0b90b;
  --color-btn-dark-hover: #fcd535;
  --color-btn-dark-text: #181a20;

  --color-btn-outline-bg: rgba(30, 32, 38, 0.7);
  --color-btn-outline-border: rgba(240, 185, 11, 0.3);
  --color-btn-outline-text: #eaecef;
  --color-btn-outline-hover-bg: rgba(240, 185, 11, 0.15);

  --color-input-bg: rgba(24, 26, 32, 0.9);
  --color-input-border: rgba(255, 255, 255, 0.15);
  --color-input-focus-border: #f0b90b;
  --color-input-focus-glow: rgba(240, 185, 11, 0.35);

  --color-hero-banner-count-bg: #f0b90b;
  --color-hero-banner-count-text: #181a20;
  --color-hero-banner-body-bg: rgba(24, 26, 32, 0.95);
  --color-hero-banner-border: rgba(240, 185, 11, 0.25);

  --color-vault-card-bg: rgba(24, 26, 32, 0.9);
  --color-vault-card-border: rgba(240, 185, 11, 0.22);
  --color-vault-card-text: #eaecef;

  --color-float-block-a-bg: #2b2510;
  --color-float-block-a-text: #f0b90b;
  --color-float-block-b-bg: #f0b90b;
  --color-float-block-b-text: #181a20;
  --color-float-block-c-bg: #1e2026;
  --color-float-block-c-text: #fcd535;
}

/* ==========================================================================
   PRESET 5: SOLANA & ETHEREUM PURPLE (Electric violet and synthwave cyan)
   ========================================================================== */
[data-theme="solana-purple"] {
  --color-primary: #a855f7;
  --color-primary-hover: #c084fc;
  --color-primary-active: #9333ea;
  --color-primary-soft: #2e1065;
  --color-primary-text: #ffffff;
  --color-primary-glow: rgba(168, 85, 247, 0.4);
  --color-primary-dark: #c084fc;

  --color-accent-lime: #14f195;
  --color-accent-lime-hover: #55f8b4;
  --color-accent-lime-text: #0b091a;
  --color-accent-lime-glow: rgba(20, 241, 149, 0.35);

  --color-bg-page: #0d0b1c;
  --color-bg-sky: #060510;
  --color-bg-sky-opacity: 0.15;
  --color-bg-mesh: radial-gradient(circle at 50% 20%, rgba(168, 85, 247, 0.12) 0%, rgba(13, 11, 28, 0.98) 100%);
  --theme-bg-image: 
    radial-gradient(circle at 12% 14%, rgba(168, 85, 247, 0.20) 0%, transparent 42%),
    radial-gradient(circle at 88% 16%, rgba(52, 211, 153, 0.14) 0%, transparent 45%),
    radial-gradient(circle at 50% 85%, rgba(192, 132, 252, 0.10) 0%, transparent 50%),
    linear-gradient(to right, rgba(168, 85, 247, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(168, 85, 247, 0.04) 1px, transparent 1px);
  --theme-bg-size: 100% 100%, 100% 100%, 100% 100%, 48px 48px, 48px 48px;
  --theme-bg-pos: center top, center top, center top, 0 0, 0 0;

  --color-card-bg: rgba(22, 17, 43, 0.82);
  --color-card-bg-solid: #16112b;
  --color-card-border: rgba(168, 85, 247, 0.25);
  --color-card-border-subtle: rgba(255, 255, 255, 0.08);
  --color-card-hover-border: #a855f7;
  --color-card-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
  --color-card-shadow-hover: 0 20px 50px rgba(168, 85, 247, 0.2);

  --color-text-main: #f8fafc;
  --color-text-muted: #cbd5e1;
  --color-text-subtle: #94a3b8;
  --color-text-dim: #64748b;
  --color-text-inverse: #0d0b1c;

  --color-nav-bg: rgba(16, 12, 33, 0.88);
  --color-nav-border: rgba(168, 85, 247, 0.2);
  --color-nav-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  --color-nav-text: #f8fafc;
  --color-nav-active-bg: rgba(168, 85, 247, 0.15);
  --color-footer-bg: rgba(10, 8, 22, 0.9);
  --color-footer-border: rgba(168, 85, 247, 0.15);

  --color-table-header-bg: rgba(28, 22, 54, 0.95);
  --color-table-header-text: #cbd5e1;
  --color-table-border: rgba(255, 255, 255, 0.08);
  --color-table-row-hover: rgba(168, 85, 247, 0.12);
  --color-table-row-stripe: rgba(22, 17, 43, 0.4);

  --color-badge-phase1-bg: rgba(168, 85, 247, 0.2);
  --color-badge-phase1-border: rgba(168, 85, 247, 0.45);
  --color-badge-phase1-text: #d8b4fe;
  --color-badge-phase1-dot: #a855f7;

  --color-badge-phase2-bg: rgba(20, 241, 149, 0.12);
  --color-badge-phase2-border: rgba(20, 241, 149, 0.3);
  --color-badge-phase2-text: #6ee7b7;
  --color-badge-phase2-dot: #14f195;

  --color-btn-dark-bg: #a855f7;
  --color-btn-dark-hover: #c084fc;
  --color-btn-dark-text: #ffffff;

  --color-btn-outline-bg: rgba(28, 22, 54, 0.7);
  --color-btn-outline-border: rgba(168, 85, 247, 0.3);
  --color-btn-outline-text: #f8fafc;
  --color-btn-outline-hover-bg: rgba(168, 85, 247, 0.15);

  --color-input-bg: rgba(22, 17, 43, 0.9);
  --color-input-border: rgba(168, 85, 247, 0.25);
  --color-input-focus-border: #a855f7;
  --color-input-focus-glow: rgba(168, 85, 247, 0.35);

  --color-hero-banner-count-bg: #a855f7;
  --color-hero-banner-count-text: #ffffff;
  --color-hero-banner-body-bg: rgba(22, 17, 43, 0.95);
  --color-hero-banner-border: rgba(168, 85, 247, 0.3);

  --color-vault-card-bg: rgba(22, 17, 43, 0.9);
  --color-vault-card-border: rgba(168, 85, 247, 0.25);
  --color-vault-card-text: #f8fafc;

  --color-float-block-a-bg: #22153d;
  --color-float-block-a-text: #c084fc;
  --color-float-block-b-bg: #a855f7;
  --color-float-block-b-text: #ffffff;
  --color-float-block-c-bg: #092820;
  --color-float-block-c-text: #14f195;
}

/* ==========================================================================
   PRESET 6: EMERALD & MINT DEFI (Fresh green financial aesthetic)
   ========================================================================== */
[data-theme="emerald-defi"] {
  --color-primary: #10b981;
  --color-primary-hover: #34d399;
  --color-primary-active: #059669;
  --color-primary-soft: #d1fae5;
  --color-primary-text: #ffffff;
  --color-primary-glow: rgba(16, 185, 129, 0.35);
  --color-primary-dark: #065f46;

  --color-accent-lime: #6ee7b7;
  --color-accent-lime-hover: #a7f3d0;
  --color-accent-lime-text: #064e3b;
  --color-accent-lime-glow: rgba(110, 231, 183, 0.35);

  --color-bg-page: #f0fdf4;
  --color-bg-sky: #a7f3d0;
  --color-bg-sky-opacity: 0.35;
  --color-bg-mesh: radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.85) 0%, rgba(167, 243, 208, 0.4) 100%);

  --color-card-bg: rgba(255, 255, 255, 0.78);
  --color-card-bg-solid: #ffffff;
  --color-card-border: rgba(255, 255, 255, 0.9);
  --color-card-border-subtle: rgba(167, 243, 208, 0.6);
  --color-card-hover-border: #10b981;
  --color-card-shadow: 0 14px 40px rgba(6, 78, 59, 0.07);
  --color-card-shadow-hover: 0 20px 50px rgba(6, 78, 59, 0.12);

  --color-text-main: #064e3b;
  --color-text-muted: #047857;
  --color-text-subtle: #059669;
  --color-text-dim: #6ee7b7;
  --color-text-inverse: #ffffff;

  --color-nav-bg: rgba(240, 253, 244, 0.85);
  --color-nav-border: rgba(255, 255, 255, 0.8);
  --color-nav-shadow: 0 4px 24px rgba(6, 78, 59, 0.05);
  --color-nav-text: #064e3b;
  --color-nav-active-bg: rgba(255, 255, 255, 0.95);
  --color-footer-bg: rgba(236, 253, 245, 0.7);
  --color-footer-border: rgba(255, 255, 255, 0.9);

  --color-table-header-bg: rgba(236, 253, 245, 0.95);
  --color-table-header-text: #047857;
  --color-table-border: rgba(167, 243, 208, 0.6);
  --color-table-row-hover: rgba(209, 250, 229, 0.6);
  --color-table-row-stripe: rgba(240, 253, 244, 0.5);

  --color-badge-phase1-bg: #d1fae5;
  --color-badge-phase1-border: #a7f3d0;
  --color-badge-phase1-text: #065f46;
  --color-badge-phase1-dot: #10b981;

  --color-badge-phase2-bg: rgba(240, 253, 244, 0.85);
  --color-badge-phase2-border: rgba(167, 243, 208, 0.6);
  --color-badge-phase2-text: #047857;
  --color-badge-phase2-dot: #34d399;

  --color-btn-dark-bg: #064e3b;
  --color-btn-dark-hover: #10b981;
  --color-btn-dark-text: #ffffff;

  --color-btn-outline-bg: rgba(255, 255, 255, 0.85);
  --color-btn-outline-border: rgba(167, 243, 208, 0.7);
  --color-btn-outline-text: #064e3b;
  --color-btn-outline-hover-bg: #ffffff;

  --color-input-bg: rgba(255, 255, 255, 0.9);
  --color-input-border: #a7f3d0;
  --color-input-focus-border: #10b981;
  --color-input-focus-glow: rgba(16, 185, 129, 0.25);

  --color-hero-banner-count-bg: #10b981;
  --color-hero-banner-count-text: #ffffff;
  --color-hero-banner-body-bg: #ecfdf5eb;
  --color-hero-banner-border: rgba(255, 255, 255, 0.85);

  --color-vault-card-bg: #ecfdf5;
  --color-vault-card-border: #a7f3d0;
  --color-vault-card-text: #064e3b;

  --color-float-block-a-bg: #d1fae5;
  --color-float-block-a-text: #065f46;
  --color-float-block-b-bg: #10b981;
  --color-float-block-b-text: #ffffff;
  --color-float-block-c-bg: #064e3b;
  --color-float-block-c-text: #6ee7b7;
}

/* ==========================================================================
   PRESET 7: MINIMALIST MONOCHROME (Clean zinc & pure contrast)
   ========================================================================== */
[data-theme="minimalist-mono"] {
  --color-primary: #18181b;
  --color-primary-hover: #27272a;
  --color-primary-active: #09090b;
  --color-primary-soft: #f4f4f5;
  --color-primary-text: #ffffff;
  --color-primary-glow: rgba(24, 24, 27, 0.2);
  --color-primary-dark: #18181b;

  --color-accent-lime: #71717a;
  --color-accent-lime-hover: #52525b;
  --color-accent-lime-text: #ffffff;
  --color-accent-lime-glow: rgba(113, 113, 122, 0.2);

  --color-bg-page: #fafafa;
  --color-bg-sky: #e4e4e7;
  --color-bg-sky-opacity: 0.2;
  --color-bg-mesh: radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.95) 0%, rgba(244, 244, 245, 0.8) 100%);

  --color-card-bg: rgba(255, 255, 255, 0.85);
  --color-card-bg-solid: #ffffff;
  --color-card-border: rgba(228, 228, 231, 0.9);
  --color-card-border-subtle: rgba(228, 228, 231, 0.6);
  --color-card-hover-border: #18181b;
  --color-card-shadow: 0 14px 40px rgba(0, 0, 0, 0.05);
  --color-card-shadow-hover: 0 20px 50px rgba(0, 0, 0, 0.09);

  --color-text-main: #18181b;
  --color-text-muted: #52525b;
  --color-text-subtle: #71717a;
  --color-text-dim: #a1a1aa;
  --color-text-inverse: #ffffff;

  --color-nav-bg: rgba(255, 255, 255, 0.88);
  --color-nav-border: rgba(228, 228, 231, 0.8);
  --color-nav-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  --color-nav-text: #18181b;
  --color-nav-active-bg: rgba(24, 24, 27, 0.06);
  --color-footer-bg: rgba(250, 250, 250, 0.85);
  --color-footer-border: rgba(228, 228, 231, 0.8);

  --color-table-header-bg: rgba(244, 244, 245, 0.95);
  --color-table-header-text: #52525b;
  --color-table-border: rgba(228, 228, 231, 0.7);
  --color-table-row-hover: rgba(244, 244, 245, 0.8);
  --color-table-row-stripe: rgba(250, 250, 250, 0.6);

  --color-badge-phase1-bg: #18181b;
  --color-badge-phase1-border: #18181b;
  --color-badge-phase1-text: #ffffff;
  --color-badge-phase1-dot: #ffffff;

  --color-badge-phase2-bg: #f4f4f5;
  --color-badge-phase2-border: #e4e4e7;
  --color-badge-phase2-text: #52525b;
  --color-badge-phase2-dot: #a1a1aa;

  --color-btn-dark-bg: #18181b;
  --color-btn-dark-hover: #3f3f46;
  --color-btn-dark-text: #ffffff;

  --color-btn-outline-bg: #ffffff;
  --color-btn-outline-border: #d4d4d8;
  --color-btn-outline-text: #18181b;
  --color-btn-outline-hover-bg: #f4f4f5;

  --color-input-bg: #ffffff;
  --color-input-border: #d4d4d8;
  --color-input-focus-border: #18181b;
  --color-input-focus-glow: rgba(24, 24, 27, 0.15);

  --color-hero-banner-count-bg: #18181b;
  --color-hero-banner-count-text: #ffffff;
  --color-hero-banner-body-bg: #ffffff;
  --color-hero-banner-border: #e4e4e7;

  --color-vault-card-bg: #f4f4f5;
  --color-vault-card-border: #e4e4e7;
  --color-vault-card-text: #18181b;

  --color-float-block-a-bg: #e4e4e7;
  --color-float-block-a-text: #18181b;
  --color-float-block-b-bg: #18181b;
  --color-float-block-b-text: #ffffff;
  --color-float-block-c-bg: #71717a;
  --color-float-block-c-text: #ffffff;
}