/* Theme presets — applied via html[data-theme="..."] */

/* ===== COLOR TOKENS PER THEME ===== */

:root,
[data-theme="supreme-classic"] {
  --ink: #071510;
  --forest: #1B4D3E;
  --forest-deep: #0F2E26;
  --forest-soft: #245C4A;
  --gold: #C9A227;
  --gold-bright: #E0B84A;
  --gold-muted: #8A7428;
  --cream: #F3EFE4;
  --stone: #E8E2D4;
  --mist: #F7F5F0;
  --text: #1A221F;
  --text-muted: #5C6B64;
  --line: rgba(27, 77, 62, 0.12);
  --shadow-gold: 0 0 0 1px rgba(201, 162, 39, 0.15), 0 16px 40px rgba(201, 162, 39, 0.08);
  --hero-gradient: radial-gradient(ellipse at 20% 80%, rgba(27, 77, 62, 0.45), transparent 50%);
}

/* Default chrome (supreme-classic) on :root before JS applies theme */
:root {
  --nav-solid-bg: var(--ink);
  --nav-text: rgba(255, 255, 255, 0.88);
  --nav-text-hover: var(--gold-bright);
  --nav-brand-text: #ffffff;
  --nav-toggle-border: rgba(255, 255, 255, 0.3);
  --nav-toggle-text: #ffffff;
  --nav-mobile-bg: var(--ink);
  --nav-border: rgba(255, 255, 255, 0.08);
  --nav-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  --hero-fallback-bg: var(--ink);
  --hero-text: #ffffff;
  --hero-overlay-main: linear-gradient(180deg, color-mix(in srgb, var(--ink) 22%, transparent) 0%, color-mix(in srgb, var(--ink) 6%, transparent) 45%, color-mix(in srgb, var(--ink) 42%, transparent) 100%);
  --page-hero-text: #ffffff;
  --page-hero-subtext: rgba(243, 239, 228, 0.92);
  --page-hero-overlay: linear-gradient(105deg, color-mix(in srgb, var(--ink) 52%, transparent) 0%, color-mix(in srgb, var(--ink) 28%, transparent) 38%, color-mix(in srgb, var(--ink) 8%, transparent) 62%, transparent 100%), linear-gradient(180deg, color-mix(in srgb, var(--ink) 8%, transparent) 0%, transparent 45%, color-mix(in srgb, var(--ink) 32%, transparent) 100%);
  --page-hero-text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.35);
  --footer-bg: var(--ink);
  --footer-text: rgba(243, 239, 228, 0.75);
  --footer-heading: var(--cream);
  --footer-border: rgba(255, 255, 255, 0.08);
  --footer-col-hover: var(--gold-bright);
  --section-dark-bg: radial-gradient(ellipse 80% 60% at 10% 0%, color-mix(in srgb, var(--gold) 7%, transparent), transparent 50%), radial-gradient(ellipse 60% 50% at 90% 100%, color-mix(in srgb, var(--forest) 35%, transparent), transparent 55%), linear-gradient(160deg, var(--forest-deep) 0%, var(--ink) 65%, color-mix(in srgb, var(--ink) 80%, black) 100%);
  --section-dark-text: var(--cream);
  --section-dark-muted: rgba(243, 239, 228, 0.7);
  --section-dark-heading: var(--cream);
  --section-dark-eyebrow: var(--gold);
  --section-dark-grid: rgba(201, 162, 39, 0.03);
  --btn-gold-text: var(--ink);
  --btn-outline-text: #ffffff;
  --btn-outline-border: rgba(255, 255, 255, 0.45);
  --btn-outline-hover-text: var(--gold-bright);
}

[data-theme="supreme-classic"] {
  --ink: #071510;
  --forest: #1B4D3E;
  --forest-deep: #0F2E26;
  --forest-soft: #245C4A;
  --gold: #C9A227;
  --gold-bright: #E0B84A;
  --gold-muted: #8A7428;
  --cream: #F3EFE4;
  --stone: #E8E2D4;
  --mist: #F7F5F0;
  --text: #1A221F;
  --text-muted: #5C6B64;
  --line: rgba(27, 77, 62, 0.12);
  --shadow-gold: 0 0 0 1px rgba(201, 162, 39, 0.15), 0 16px 40px rgba(201, 162, 39, 0.08);
  --hero-gradient: radial-gradient(ellipse at 20% 80%, rgba(27, 77, 62, 0.45), transparent 50%);
}

[data-theme="ivory-gold"] {
  --ink: #F8F5ED;
  --forest: #1B4D3E;
  --forest-deep: #143D32;
  --forest-soft: #2A6B55;
  --gold: #B8941F;
  --gold-bright: #D4AF37;
  --gold-muted: #8A7428;
  --cream: #FFFFFF;
  --stone: #EDE8DC;
  --mist: #FAF8F4;
  --text: #1A221F;
  --text-muted: #5C6B64;
  --line: rgba(27, 77, 62, 0.1);
  --shadow-gold: 0 0 0 1px rgba(201, 162, 39, 0.12), 0 16px 40px rgba(201, 162, 39, 0.06);
  --hero-gradient: radial-gradient(ellipse at 20% 80%, rgba(27, 77, 62, 0.12), transparent 50%);
}

[data-theme="pearl-white"] {
  --ink: #FFFFFF;
  --forest: #2D4A6F;
  --forest-deep: #1E3350;
  --forest-soft: #3D5F8C;
  --gold: #C9A227;
  --gold-bright: #E0B84A;
  --gold-muted: #8A7428;
  --cream: #FFFFFF;
  --stone: #EEF1F5;
  --mist: #F8FAFC;
  --text: #1E293B;
  --text-muted: #64748B;
  --line: rgba(45, 74, 111, 0.1);
  --shadow-gold: 0 0 0 1px rgba(201, 162, 39, 0.12), 0 16px 40px rgba(45, 74, 111, 0.06);
  --hero-gradient: radial-gradient(ellipse at 20% 80%, rgba(45, 74, 111, 0.1), transparent 50%);
}

[data-theme="cloud-sky"] {
  --ink: #F0F7FF;
  --forest: #1E40AF;
  --forest-deep: #1E3A8A;
  --forest-soft: #2563EB;
  --gold: #F59E0B;
  --gold-bright: #FBBF24;
  --gold-muted: #B45309;
  --cream: #FFFFFF;
  --stone: #E0EFFF;
  --mist: #F5FAFF;
  --text: #1E3A5F;
  --text-muted: #5B7A9A;
  --line: rgba(30, 64, 175, 0.1);
  --shadow-gold: 0 0 0 1px rgba(245, 158, 11, 0.15), 0 16px 40px rgba(30, 64, 175, 0.06);
  --hero-gradient: radial-gradient(ellipse at 20% 80%, rgba(30, 64, 175, 0.12), transparent 50%);
}

[data-theme="sage-garden"] {
  --ink: #F4F8F4;
  --forest: #3D6B4F;
  --forest-deep: #2D5240;
  --forest-soft: #4F8562;
  --gold: #B8860B;
  --gold-bright: #DAA520;
  --gold-muted: #8B6914;
  --cream: #FFFFFF;
  --stone: #E5EDE5;
  --mist: #F7FAF7;
  --text: #1F3328;
  --text-muted: #5A7264;
  --line: rgba(61, 107, 79, 0.1);
  --shadow-gold: 0 0 0 1px rgba(184, 134, 11, 0.12), 0 16px 40px rgba(61, 107, 79, 0.06);
  --hero-gradient: radial-gradient(ellipse at 20% 80%, rgba(61, 107, 79, 0.12), transparent 50%);
}

[data-theme="linen-warm"] {
  --ink: #FAF6F0;
  --forest: #7C4A2D;
  --forest-deep: #5C3620;
  --forest-soft: #9A6040;
  --gold: #D4A017;
  --gold-bright: #E8B923;
  --gold-muted: #9A7010;
  --cream: #FFFFFF;
  --stone: #F0E8DC;
  --mist: #FBF8F3;
  --text: #3D2A1A;
  --text-muted: #7A6555;
  --line: rgba(124, 74, 45, 0.1);
  --shadow-gold: 0 0 0 1px rgba(212, 160, 23, 0.15), 0 16px 40px rgba(124, 74, 45, 0.06);
  --hero-gradient: radial-gradient(ellipse at 20% 80%, rgba(124, 74, 45, 0.1), transparent 50%);
}

[data-theme="blush-rose"] {
  --ink: #FDF8F8;
  --forest: #8B3A4A;
  --forest-deep: #6B2835;
  --forest-soft: #A84D5E;
  --gold: #D4AF37;
  --gold-bright: #E8C547;
  --gold-muted: #9A8230;
  --cream: #FFFFFF;
  --stone: #F5E8EA;
  --mist: #FEFBFB;
  --text: #3D2028;
  --text-muted: #7A5A62;
  --line: rgba(139, 58, 74, 0.1);
  --shadow-gold: 0 0 0 1px rgba(212, 175, 55, 0.12), 0 16px 40px rgba(139, 58, 74, 0.06);
  --hero-gradient: radial-gradient(ellipse at 20% 80%, rgba(139, 58, 74, 0.1), transparent 50%);
}

[data-theme="royal-navy"] {
  --ink: #0A1628;
  --forest: #1E3A5F;
  --forest-deep: #0F2440;
  --forest-soft: #2A5080;
  --gold: #D4AF37;
  --gold-bright: #F0D060;
  --gold-muted: #9A8230;
  --cream: #EEF2F8;
  --stone: #DDE4EF;
  --mist: #F4F7FB;
  --text: #0F1D32;
  --text-muted: #5A6B82;
  --line: rgba(30, 58, 95, 0.14);
  --shadow-gold: 0 0 0 1px rgba(212, 175, 55, 0.18), 0 16px 40px rgba(212, 175, 55, 0.1);
  --hero-gradient: radial-gradient(ellipse at 20% 80%, rgba(30, 58, 95, 0.5), transparent 50%);
}

[data-theme="emerald-luxe"] {
  --ink: #062019;
  --forest: #0D5C4D;
  --forest-deep: #063D34;
  --forest-soft: #157A68;
  --gold: #E8D5A3;
  --gold-bright: #F5EACC;
  --gold-muted: #A89868;
  --cream: #F5F2EA;
  --stone: #E5DFD0;
  --mist: #FAF8F3;
  --text: #0A2820;
  --text-muted: #4A6B62;
  --line: rgba(13, 92, 77, 0.12);
  --shadow-gold: 0 0 0 1px rgba(232, 213, 163, 0.2), 0 16px 40px rgba(232, 213, 163, 0.1);
  --hero-gradient: radial-gradient(ellipse at 20% 80%, rgba(13, 92, 77, 0.45), transparent 50%);
}

[data-theme="burgundy-gold"] {
  --ink: #2A0A10;
  --forest: #6B1D2A;
  --forest-deep: #4A1018;
  --forest-soft: #8B3040;
  --gold: #C9A227;
  --gold-bright: #E0B84A;
  --gold-muted: #8A7428;
  --cream: #F8F0F1;
  --stone: #EDD8DC;
  --mist: #FBF6F7;
  --text: #2A1018;
  --text-muted: #7A5058;
  --line: rgba(107, 29, 42, 0.12);
  --shadow-gold: 0 0 0 1px rgba(201, 162, 39, 0.18), 0 16px 40px rgba(201, 162, 39, 0.1);
  --hero-gradient: radial-gradient(ellipse at 20% 80%, rgba(107, 29, 42, 0.4), transparent 50%);
}

[data-theme="slate-modern"] {
  --ink: #0F172A;
  --forest: #334155;
  --forest-deep: #1E293B;
  --forest-soft: #475569;
  --gold: #0891B2;
  --gold-bright: #22D3EE;
  --gold-muted: #0E7490;
  --cream: #F1F5F9;
  --stone: #E2E8F0;
  --mist: #F8FAFC;
  --text: #0F172A;
  --text-muted: #64748B;
  --line: rgba(51, 65, 85, 0.12);
  --shadow-gold: 0 0 0 1px rgba(8, 145, 178, 0.15), 0 16px 40px rgba(8, 145, 178, 0.08);
  --hero-gradient: radial-gradient(ellipse at 20% 80%, rgba(8, 145, 178, 0.35), transparent 50%);
}

[data-theme="midnight-copper"] {
  --ink: #141010;
  --forest: #3D2914;
  --forest-deep: #251A0C;
  --forest-soft: #5C3D1E;
  --gold: #B87333;
  --gold-bright: #D4956A;
  --gold-muted: #8B5A2B;
  --cream: #F5EDE4;
  --stone: #E8D9C8;
  --mist: #FAF6F1;
  --text: #2A1A10;
  --text-muted: #6B5344;
  --line: rgba(61, 41, 20, 0.12);
  --shadow-gold: 0 0 0 1px rgba(184, 115, 51, 0.18), 0 16px 40px rgba(184, 115, 51, 0.1);
  --hero-gradient: radial-gradient(ellipse at 20% 80%, rgba(184, 115, 51, 0.3), transparent 50%);
}

[data-theme="teal-gold"] {
  --ink: #042F2E;
  --forest: #0F766E;
  --forest-deep: #064E3B;
  --forest-soft: #14B8A6;
  --gold: #E0B84A;
  --gold-bright: #F5D060;
  --gold-muted: #A88830;
  --cream: #ECFDF5;
  --stone: #D1FAE5;
  --mist: #F0FDF9;
  --text: #042F2E;
  --text-muted: #4B7A72;
  --line: rgba(15, 118, 110, 0.12);
  --shadow-gold: 0 0 0 1px rgba(224, 184, 74, 0.15), 0 16px 40px rgba(224, 184, 74, 0.08);
  --hero-gradient: radial-gradient(ellipse at 20% 80%, rgba(15, 118, 110, 0.4), transparent 50%);
}

[data-theme="ocean-breeze"] {
  --ink: #0C4A6E;
  --forest: #0369A1;
  --forest-deep: #075985;
  --forest-soft: #0284C7;
  --gold: #EAB308;
  --gold-bright: #FACC15;
  --gold-muted: #A16207;
  --cream: #E0F2FE;
  --stone: #BAE6FD;
  --mist: #F0F9FF;
  --text: #0C4A6E;
  --text-muted: #4B7A9A;
  --line: rgba(3, 105, 161, 0.12);
  --shadow-gold: 0 0 0 1px rgba(234, 179, 8, 0.15), 0 16px 40px rgba(3, 105, 161, 0.08);
  --hero-gradient: radial-gradient(ellipse at 20% 80%, rgba(3, 105, 161, 0.4), transparent 50%);
}

[data-theme="forest-night"] {
  --ink: #030A08;
  --forest: #0F2E26;
  --forest-deep: #081A15;
  --forest-soft: #1B4D3E;
  --gold: #E0B84A;
  --gold-bright: #F5D060;
  --gold-muted: #A88830;
  --cream: #E8F0ED;
  --stone: #C5D9D2;
  --mist: #F0F5F3;
  --text: #0A1A15;
  --text-muted: #4A6B62;
  --line: rgba(15, 46, 38, 0.12);
  --shadow-gold: 0 0 0 1px rgba(224, 184, 74, 0.18), 0 16px 40px rgba(224, 184, 74, 0.1);
  --hero-gradient: radial-gradient(ellipse at 20% 80%, rgba(15, 46, 38, 0.5), transparent 50%);
}

[data-theme="obsidian-gold"] {
  --ink: #050505;
  --forest: #1A1A1A;
  --forest-deep: #0D0D0D;
  --forest-soft: #2A2A2A;
  --gold: #FFD700;
  --gold-bright: #FFE44D;
  --gold-muted: #B8960B;
  --cream: #F5F5F0;
  --stone: #E0E0D8;
  --mist: #FAFAF8;
  --text: #1A1A1A;
  --text-muted: #666660;
  --line: rgba(26, 26, 26, 0.12);
  --shadow-gold: 0 0 0 1px rgba(255, 215, 0, 0.2), 0 16px 40px rgba(255, 215, 0, 0.1);
  --hero-gradient: radial-gradient(ellipse at 20% 80%, rgba(255, 215, 0, 0.08), transparent 50%);
}

/* ===== LIGHT CHROME — Bright themes ===== */
[data-theme="ivory-gold"],
[data-theme="pearl-white"],
[data-theme="cloud-sky"],
[data-theme="sage-garden"],
[data-theme="linen-warm"],
[data-theme="blush-rose"] {
  --nav-solid-bg: rgba(255, 255, 255, 0.98);
  --nav-text: color-mix(in srgb, var(--text) 88%, transparent);
  --nav-text-hover: var(--forest);
  --nav-brand-text: var(--forest-deep);
  --nav-toggle-border: color-mix(in srgb, var(--forest) 25%, transparent);
  --nav-toggle-text: var(--forest-deep);
  --nav-mobile-bg: rgba(255, 255, 255, 0.98);
  --nav-border: color-mix(in srgb, var(--forest) 12%, transparent);
  --nav-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);

  --hero-fallback-bg: var(--mist);
  --hero-text: var(--forest-deep);
  --hero-overlay-main: linear-gradient(
    180deg,
    color-mix(in srgb, var(--mist) 38%, transparent) 0%,
    color-mix(in srgb, var(--mist) 10%, transparent) 45%,
    color-mix(in srgb, var(--mist) 50%, transparent) 100%
  );
  --page-hero-text: var(--forest-deep);
  --page-hero-subtext: color-mix(in srgb, var(--text) 82%, transparent);
  --page-hero-overlay: linear-gradient(
    105deg,
    color-mix(in srgb, var(--cream) 62%, transparent) 0%,
    color-mix(in srgb, var(--cream) 32%, transparent) 38%,
    color-mix(in srgb, var(--cream) 6%, transparent) 62%,
    transparent 100%
  ),
  linear-gradient(
    180deg,
    color-mix(in srgb, white 15%, transparent) 0%,
    transparent 45%,
    color-mix(in srgb, var(--forest) 6%, transparent) 100%
  );
  --page-hero-text-shadow: none;

  --footer-bg: var(--stone);
  --footer-text: var(--text-muted);
  --footer-heading: var(--forest-deep);
  --footer-border: color-mix(in srgb, var(--forest) 12%, transparent);
  --footer-col-hover: var(--forest);

  --section-dark-bg:
    radial-gradient(ellipse 80% 60% at 10% 0%, color-mix(in srgb, var(--gold) 8%, transparent), transparent 50%),
    radial-gradient(ellipse 60% 50% at 90% 100%, color-mix(in srgb, var(--forest) 8%, transparent), transparent 55%),
    linear-gradient(160deg, var(--stone) 0%, var(--mist) 55%, var(--cream) 100%);
  --section-dark-text: var(--forest-deep);
  --section-dark-muted: var(--text-muted);
  --section-dark-heading: var(--forest-deep);
  --section-dark-eyebrow: var(--gold-muted);
  --section-dark-grid: color-mix(in srgb, var(--forest) 4%, transparent);

  --btn-gold-text: var(--forest-deep);
  --btn-outline-text: var(--forest-deep);
  --btn-outline-border: color-mix(in srgb, var(--forest) 45%, transparent);
  --btn-outline-hover-text: var(--forest);
}

/* ===== DARK CHROME — Balanced & Dark themes ===== */
[data-theme="supreme-classic"],
[data-theme="teal-gold"],
[data-theme="slate-modern"],
[data-theme="ocean-breeze"],
[data-theme="royal-navy"],
[data-theme="emerald-luxe"],
[data-theme="burgundy-gold"],
[data-theme="midnight-copper"],
[data-theme="forest-night"],
[data-theme="obsidian-gold"] {
  --nav-solid-bg: var(--ink);
  --nav-text: rgba(255, 255, 255, 0.88);
  --nav-text-hover: var(--gold-bright);
  --nav-brand-text: #ffffff;
  --nav-toggle-border: rgba(255, 255, 255, 0.3);
  --nav-toggle-text: #ffffff;
  --nav-mobile-bg: var(--ink);
  --nav-border: rgba(255, 255, 255, 0.08);
  --nav-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);

  --hero-fallback-bg: var(--ink);
  --hero-text: #ffffff;
  --hero-overlay-main: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ink) 22%, transparent) 0%,
    color-mix(in srgb, var(--ink) 6%, transparent) 45%,
    color-mix(in srgb, var(--ink) 42%, transparent) 100%
  );
  --page-hero-text: #ffffff;
  --page-hero-subtext: rgba(243, 239, 228, 0.92);
  --page-hero-overlay: linear-gradient(
    105deg,
    color-mix(in srgb, var(--ink) 52%, transparent) 0%,
    color-mix(in srgb, var(--ink) 28%, transparent) 38%,
    color-mix(in srgb, var(--ink) 8%, transparent) 62%,
    transparent 100%
  ),
  linear-gradient(
    180deg,
    color-mix(in srgb, var(--ink) 8%, transparent) 0%,
    transparent 45%,
    color-mix(in srgb, var(--ink) 32%, transparent) 100%
  );
  --page-hero-text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.35);

  --footer-bg: var(--ink);
  --footer-text: rgba(243, 239, 228, 0.75);
  --footer-heading: var(--cream);
  --footer-border: rgba(255, 255, 255, 0.08);
  --footer-col-hover: var(--gold-bright);

  --section-dark-bg:
    radial-gradient(ellipse 80% 60% at 10% 0%, color-mix(in srgb, var(--gold) 7%, transparent), transparent 50%),
    radial-gradient(ellipse 60% 50% at 90% 100%, color-mix(in srgb, var(--forest) 35%, transparent), transparent 55%),
    linear-gradient(160deg, var(--forest-deep) 0%, var(--ink) 65%, color-mix(in srgb, var(--ink) 80%, black) 100%);
  --section-dark-text: var(--cream);
  --section-dark-muted: rgba(243, 239, 228, 0.7);
  --section-dark-heading: var(--cream);
  --section-dark-eyebrow: var(--gold);
  --section-dark-grid: rgba(201, 162, 39, 0.03);

  --btn-gold-text: var(--ink);
  --btn-outline-text: #ffffff;
  --btn-outline-border: rgba(255, 255, 255, 0.45);
  --btn-outline-hover-text: var(--gold-bright);
}