/*
 * BP06 — themes.css
 * ==================
 * CSS custom properties for all 17 themes.
 * Applied via: html[data-theme="t01"] { ... }
 *
 * Every theme defines the same set of variables so components
 * just use var(--color-primary) etc. without knowing which theme is active.
 *
 * Variable naming:
 *   --color-*     Core palette
 *   --font-*      Typography
 *   --radius-*    Border radius scale
 *   --shadow-*    Shadow scale
 *   --space-*     Section spacing
 */

/* ── Base (fallback values) ──────────────────────────────────────────────── */
:root {
  /* Typography — overridden per style theme */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-size-base: 1rem;
  --line-height-body: 1.7;

  /* Border radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-btn: 6px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.12);

  /* Section spacing */
  --section-py: 80px;
}

/* ══════════════════════════════════════════════════════════════════════════
   COLOUR THEMES (t01–t12)
   All use the same layout (Elegant base).
   Only the colour palette changes.
══════════════════════════════════════════════════════════════════════════ */

/* ── t01 Forest Green ──────────────────────────────────────────────────── */
html[data-theme="t01"] {
  --color-primary:       #2D5016;
  --color-primary-light: #3d6b1f;
  --color-primary-dark:  #1e3610;
  --color-accent:        #4A7C1F;
  --color-bg:            #FAFAF8;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #F5F0E8;
  --color-border:        #E5E0D6;
  --color-text:          #1A1A1A;
  --color-text-muted:    #6B7355;
  --color-hero-bg:       #2D5016;
  --color-hero-text:     #FFFFFF;
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #2D5016;
  --color-btn-bg:        #2D5016;
  --color-btn-text:      #FFFFFF;
  --color-btn-hover:     #3d6b1f;
}

/* ── t02 Midnight Navy ─────────────────────────────────────────────────── */
html[data-theme="t02"] {
  --color-primary:       #0A1628;
  --color-primary-light: #1a2f50;
  --color-primary-dark:  #060e1a;
  --color-accent:        #2563EB;
  --color-bg:            #F8FAFF;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #F0F4FF;
  --color-border:        #DDE5F7;
  --color-text:          #0A1628;
  --color-text-muted:    #4B5FA6;
  --color-hero-bg:       #0A1628;
  --color-hero-text:     #FFFFFF;
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #0A1628;
  --color-btn-bg:        #2563EB;
  --color-btn-text:      #FFFFFF;
  --color-btn-hover:     #1d4ed8;
}

/* ── t03 Burnt Orange ──────────────────────────────────────────────────── */
html[data-theme="t03"] {
  --color-primary:       #7C2D12;
  --color-primary-light: #9a3a18;
  --color-primary-dark:  #5e220d;
  --color-accent:        #EA580C;
  --color-bg:            #FFFBF8;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #FFF7ED;
  --color-border:        #FDDDC3;
  --color-text:          #1C0A00;
  --color-text-muted:    #92400E;
  --color-hero-bg:       #7C2D12;
  --color-hero-text:     #FFFFFF;
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #7C2D12;
  --color-btn-bg:        #EA580C;
  --color-btn-text:      #FFFFFF;
  --color-btn-hover:     #c2410c;
}

/* ── t04 Slate Blue ────────────────────────────────────────────────────── */
html[data-theme="t04"] {
  --color-primary:       #1E3A5F;
  --color-primary-light: #2a4f7a;
  --color-primary-dark:  #152a45;
  --color-accent:        #3B82F6;
  --color-bg:            #F8FBFF;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #F0F6FF;
  --color-border:        #DBEAFE;
  --color-text:          #0F1F33;
  --color-text-muted:    #475E8A;
  --color-hero-bg:       #1E3A5F;
  --color-hero-text:     #FFFFFF;
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #1E3A5F;
  --color-btn-bg:        #3B82F6;
  --color-btn-text:      #FFFFFF;
  --color-btn-hover:     #2563eb;
}

/* ── t05 Plum ──────────────────────────────────────────────────────────── */
html[data-theme="t05"] {
  --color-primary:       #4A1942;
  --color-primary-light: #631f59;
  --color-primary-dark:  #33122e;
  --color-accent:        #9333EA;
  --color-bg:            #FDF8FF;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #FAF0FF;
  --color-border:        #EDD9FF;
  --color-text:          #1A0820;
  --color-text-muted:    #6B3080;
  --color-hero-bg:       #4A1942;
  --color-hero-text:     #FFFFFF;
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #4A1942;
  --color-btn-bg:        #9333EA;
  --color-btn-text:      #FFFFFF;
  --color-btn-hover:     #7e22ce;
}

/* ── t06 Charcoal ──────────────────────────────────────────────────────── */
html[data-theme="t06"] {
  --color-primary:       #1C1C1C;
  --color-primary-light: #333333;
  --color-primary-dark:  #0a0a0a;
  --color-accent:        #555555;
  --color-bg:            #FAFAFA;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #F5F5F5;
  --color-border:        #E5E5E5;
  --color-text:          #1C1C1C;
  --color-text-muted:    #6B7280;
  --color-hero-bg:       #1C1C1C;
  --color-hero-text:     #FFFFFF;
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #1C1C1C;
  --color-btn-bg:        #1C1C1C;
  --color-btn-text:      #FFFFFF;
  --color-btn-hover:     #333333;
}

/* ── t07 Electric Blue ─────────────────────────────────────────────────── */
html[data-theme="t07"] {
  --color-primary:       #1D4ED8;
  --color-primary-light: #2563eb;
  --color-primary-dark:  #1e40af;
  --color-accent:        #60A5FA;
  --color-bg:            #F5F8FF;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #EFF6FF;
  --color-border:        #BFDBFE;
  --color-text:          #0F1B3D;
  --color-text-muted:    #3B5EA6;
  --color-hero-bg:       #1D4ED8;
  --color-hero-text:     #FFFFFF;
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #1D4ED8;
  --color-btn-bg:        #1D4ED8;
  --color-btn-text:      #FFFFFF;
  --color-btn-hover:     #1e40af;
}

/* ── t08 Rose Gold ─────────────────────────────────────────────────────── */
html[data-theme="t08"] {
  --color-primary:       #9D174D;
  --color-primary-light: #be185d;
  --color-primary-dark:  #831843;
  --color-accent:        #EC4899;
  --color-bg:            #FFF8FB;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #FFF1F2;
  --color-border:        #FBCFE8;
  --color-text:          #1F0A14;
  --color-text-muted:    #9D3070;
  --color-hero-bg:       #9D174D;
  --color-hero-text:     #FFFFFF;
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #9D174D;
  --color-btn-bg:        #EC4899;
  --color-btn-text:      #FFFFFF;
  --color-btn-hover:     #db2777;
}

/* ── t09 Teal ──────────────────────────────────────────────────────────── */
html[data-theme="t09"] {
  --color-primary:       #134E4A;
  --color-primary-light: #1a6561;
  --color-primary-dark:  #0d3836;
  --color-accent:        #0D9488;
  --color-bg:            #F5FDFC;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #F0FDFA;
  --color-border:        #CCFBF1;
  --color-text:          #0A2422;
  --color-text-muted:    #2D7A74;
  --color-hero-bg:       #134E4A;
  --color-hero-text:     #FFFFFF;
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #134E4A;
  --color-btn-bg:        #0D9488;
  --color-btn-text:      #FFFFFF;
  --color-btn-hover:     #0f766e;
}

/* ── t10 Gold ──────────────────────────────────────────────────────────── */
html[data-theme="t10"] {
  --color-primary:       #78350F;
  --color-primary-light: #92400e;
  --color-primary-dark:  #5c2a0b;
  --color-accent:        #D97706;
  --color-bg:            #FFFCF5;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #FFFBEB;
  --color-border:        #FDE68A;
  --color-text:          #1C0E00;
  --color-text-muted:    #92600A;
  --color-hero-bg:       #78350F;
  --color-hero-text:     #FFFFFF;
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #78350F;
  --color-btn-bg:        #D97706;
  --color-btn-text:      #FFFFFF;
  --color-btn-hover:     #b45309;
}

/* ── t11 Crimson ───────────────────────────────────────────────────────── */
html[data-theme="t11"] {
  --color-primary:       #7F1D1D;
  --color-primary-light: #991b1b;
  --color-primary-dark:  #5f1414;
  --color-accent:        #DC2626;
  --color-bg:            #FFF8F8;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #FEF2F2;
  --color-border:        #FECACA;
  --color-text:          #1C0505;
  --color-text-muted:    #991B1B;
  --color-hero-bg:       #7F1D1D;
  --color-hero-text:     #FFFFFF;
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #7F1D1D;
  --color-btn-bg:        #DC2626;
  --color-btn-text:      #FFFFFF;
  --color-btn-hover:     #b91c1c;
}

/* ── t12 Sage ──────────────────────────────────────────────────────────── */
html[data-theme="t12"] {
  --color-primary:       #3D5A40;
  --color-primary-light: #4e7252;
  --color-primary-dark:  #2d4330;
  --color-accent:        #5C8A62;
  --color-bg:            #F7FAF7;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #F0F7F1;
  --color-border:        #D5E8D7;
  --color-text:          #1A2B1C;
  --color-text-muted:    #4D6B50;
  --color-hero-bg:       #3D5A40;
  --color-hero-text:     #FFFFFF;
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #3D5A40;
  --color-btn-bg:        #3D5A40;
  --color-btn-text:      #FFFFFF;
  --color-btn-hover:     #4e7252;
}

/* ══════════════════════════════════════════════════════════════════════════
   STYLE THEMES (s01–s05)
   Different fonts, layouts, personalities.
   Each overrides the colour vars AND adds layout-specific vars.
══════════════════════════════════════════════════════════════════════════ */

/* ── s01 Elegant ───────────────────────────────────────────────────────── */
html[data-theme="s01"] {
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Raleway', system-ui, sans-serif;
  --font-size-base: 1.05rem;
  --line-height-body: 1.8;
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  6px;
  --radius-btn: 2px;
  --section-py: 100px;

  --color-primary:       #1A1A2E;
  --color-primary-light: #2a2a4e;
  --color-primary-dark:  #0d0d1a;
  --color-accent:        #C9A85C;
  --color-bg:            #FDFCF9;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #F8F6F0;
  --color-border:        #E8E4D8;
  --color-text:          #1A1A2E;
  --color-text-muted:    #7A7460;
  --color-hero-bg:       #1A1A2E;
  --color-hero-text:     #F8F6F0;
  --color-nav-bg:        #FDFCF9;
  --color-nav-text:      #1A1A2E;
  --color-btn-bg:        #C9A85C;
  --color-btn-text:      #1A1A2E;
  --color-btn-hover:     #b8963f;
}

/* ── s02 Bold ──────────────────────────────────────────────────────────── */
html[data-theme="s02"] {
  --font-heading: 'Oswald', sans-serif;
  --font-body:    'Roboto', system-ui, sans-serif;
  --font-size-base: 1rem;
  --line-height-body: 1.65;
  --radius-sm:  0px;
  --radius-md:  2px;
  --radius-lg:  4px;
  --radius-btn: 0px;
  --section-py: 80px;

  --color-primary:       #0D0D0D;
  --color-primary-light: #1a1a1a;
  --color-primary-dark:  #000000;
  --color-accent:        #FF3B00;
  --color-bg:            #FFFFFF;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #F5F5F5;
  --color-border:        #E0E0E0;
  --color-text:          #0D0D0D;
  --color-text-muted:    #555555;
  --color-hero-bg:       #0D0D0D;
  --color-hero-text:     #FFFFFF;
  --color-nav-bg:        #0D0D0D;
  --color-nav-text:      #FFFFFF;
  --color-btn-bg:        #FF3B00;
  --color-btn-text:      #FFFFFF;
  --color-btn-hover:     #cc2f00;
}

/* ── s03 Modern ────────────────────────────────────────────────────────── */
html[data-theme="s03"] {
  --font-heading: 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-size-base: 0.9375rem;
  --line-height-body: 1.65;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-btn: 8px;
  --section-py: 80px;

  --color-primary:       #0F172A;
  --color-primary-light: #1e293b;
  --color-primary-dark:  #020617;
  --color-accent:        #06B6D4;
  --color-bg:            #F8FAFC;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #F1F5F9;
  --color-border:        #E2E8F0;
  --color-text:          #0F172A;
  --color-text-muted:    #475569;
  --color-hero-bg:       #0F172A;
  --color-hero-text:     #FFFFFF;
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #0F172A;
  --color-btn-bg:        #06B6D4;
  --color-btn-text:      #FFFFFF;
  --color-btn-hover:     #0891b2;
}

/* ── s04 Warm ──────────────────────────────────────────────────────────── */
html[data-theme="s04"] {
  --font-heading: 'Merriweather', Georgia, serif;
  --font-body:    'Nunito', system-ui, sans-serif;
  --font-size-base: 1rem;
  --line-height-body: 1.8;
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --radius-btn: 50px;
  --section-py: 80px;

  --color-primary:       #5C4033;
  --color-primary-light: #7a5545;
  --color-primary-dark:  #3e2b22;
  --color-accent:        #E8956D;
  --color-bg:            #FDF9F5;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #FDF6EE;
  --color-border:        #F0E0CC;
  --color-text:          #2C1810;
  --color-text-muted:    #8B6355;
  --color-hero-bg:       #5C4033;
  --color-hero-text:     #FDF9F5;
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #5C4033;
  --color-btn-bg:        #E8956D;
  --color-btn-text:      #FFFFFF;
  --color-btn-hover:     #d4784d;
}

/* ── s05 Dark ──────────────────────────────────────────────────────────── */
html[data-theme="s05"] {
  --font-heading: 'Montserrat', system-ui, sans-serif;
  --font-body:    'Raleway', system-ui, sans-serif;
  --font-size-base: 1rem;
  --line-height-body: 1.7;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-btn: 4px;
  --section-py: 80px;

  --color-primary:       #000000;
  --color-primary-light: #111111;
  --color-primary-dark:  #000000;
  --color-accent:        #F5C518;
  --color-bg:            #0A0A0A;
  --color-surface:       #141414;
  --color-surface-alt:   #1A1A1A;
  --color-border:        #2A2A2A;
  --color-text:          #F0F0F0;
  --color-text-muted:    #888888;
  --color-hero-bg:       #000000;
  --color-hero-text:     #FFFFFF;
  --color-nav-bg:        #0A0A0A;
  --color-nav-text:      #F0F0F0;
  --color-btn-bg:        #F5C518;
  --color-btn-text:      #000000;
  --color-btn-hover:     #e6b800;
}