/*
 * BP06 — themes.css
 * ==================
 * CSS custom properties for all 17 themes.
 *
 * Two separate attributes drive the look:
 *   html[data-style="s01"]   — layout, fonts, radius, default palette
 *   html[data-colour="t01"]  — colour palette only (overrides style colours)
 *
 * ORDER MATTERS: style themes come first, colour themes come second.
 * When both attributes are set, the colour theme wins the cascade for
 * colour vars (same specificity, later declaration wins).
 *
 * Variable naming:
 *   --color-*     Core palette
 *   --font-*      Typography
 *   --radius-*    Border radius scale
 *   --shadow-*    Shadow scale
 *   --space-*     Section spacing
 */

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

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

  --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-py: 80px;
}

/* ══════════════════════════════════════════════════════════════════════════
   STYLE THEMES (s01–s05)  — come FIRST
   Different fonts, layouts, personalities + their own default palette.
   A colour theme set later in this file will override the palette.
══════════════════════════════════════════════════════════════════════════ */

/* ── s01 Elegant ───────────────────────────────────────────────────────── */
html[data-style="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-style="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-style="s03"] {
  --font-heading: 'JetBrains Mono', 'Courier New', monospace;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-size-base: 0.9375rem;
  --line-height-body: 1.65;
  /* Was 6/10/16/8px — same "promised vs delivered" gap as the heading font:
     the style's own description says "sharp corners," but these were
     rounder than several non-Tech styles. Genuinely sharp now. */
  --radius-sm:  0px;
  --radius-md:  2px;
  --radius-lg:  4px;
  --radius-btn: 2px;
  --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-style="s04"] {
  --font-heading: 'Poppins', system-ui, sans-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-style="s05"] {
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', 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: #0A0A0A;
  --color-primary-dark:  #000000;
  --color-accent:        #F5C518;
  --color-bg:            #050505;
  --color-surface:       #0A0A0A;
  --color-surface-alt:   #131313;
  --color-border:        #262626;
  --color-text:          #EDEDED;
  --color-text-muted:    #9A9A9A;
  --color-hero-bg:       #000000;
  --color-hero-text:     #EDEDED;
  --color-nav-bg:        #000000;
  --color-nav-text:      #EDEDED;
  --color-btn-bg:        #F5C518;
  --color-btn-text:      #000000;
  --color-btn-hover:     #e6b800;
}

/* ══════════════════════════════════════════════════════════════════════════
   COLOUR THEMES (t01–t12)  — come SECOND
   Same layout as the base (Elegant). Only the colour palette changes.
   These override the style theme's colour vars when both are active.

   Each theme is built from a 5-swatch source palette. Convention:
     darkest swatch  → primary / hero / nav text
     vivid swatch    → accent / buttons
     light swatch    → surface-alt / border tints
     grey swatch     → muted text
   Near-white page backgrounds are tints derived from the palette.
══════════════════════════════════════════════════════════════════════════ */

/* ── t01 Ink & Aqua ────────────────────────────────────────────────────────
   Ink Black #031926 · Aquamarine #ADFFE7 · Mauve Bark #654236
   Almond Silk #C1ABA6 · Grey #748181 */
html[data-colour="t01"] {
  --color-primary:       #031926;
  --color-primary-light: #0A3049;
  --color-primary-dark:  #010D14;
  --color-accent:        #ADFFE7;
  --color-bg:            #FBFAF8;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #F6F0EB;
  --color-border:        #E7DCD3;
  --color-text:          #031926;
  --color-text-muted:    #647070; /* darkened from #748181 — failed AA (3.87:1) against page bg */
  --color-hero-bg:       #031926;
  --color-hero-text:     #EFFFF9;
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #031926;
  --color-btn-bg:        #ADFFE7;
  --color-btn-text:      #031926;
  --color-btn-hover:     #8BF2D5;
}

/* ── t02 Spruce & Rose ─────────────────────────────────────────────────────
   Blue Spruce #157A6E · Shamrock #499F68 · Cotton Rose #FFD4D4
   Grapefruit Pink #FF858D · Taupe Grey #524948 */
html[data-colour="t02"] {
  --color-primary:       #157A6E;
  --color-primary-light: #499F68;
  --color-primary-dark:  #0E574E;
  --color-accent:        #FF858D;
  --color-bg:            #FAFCFB;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #FFF1F1;
  --color-border:        #FFD4D4;
  --color-text:          #17332E;
  --color-text-muted:    #524948;
  --color-hero-bg:       #157A6E;
  --color-hero-text:     #FFFFFF;
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #157A6E;
  --color-btn-bg:        #FF858D;
  --color-btn-text:      #17332E; /* was #FFFFFF — white on this pink failed AA (2.34:1); reuses this theme's own --color-text */
  --color-btn-hover:     #FF979E; /* lightened, not darkened — this theme's dark btn-text (#17332E) loses contrast if hover darkens toward it; was #F2666F at 4.46:1, failing */
}

/* ── t03 Deep Teal ─────────────────────────────────────────────────────────
   Dark Cyan #119DA4 · Cerulean #0C7489 · Dark Teal #13505B
   Black #040404 · Dust Grey #D7D9CE */
html[data-colour="t03"] {
  --color-primary:       #13505B;
  --color-primary-light: #0C7489;
  --color-primary-dark:  #0B333B;
  --color-accent:        #119DA4;
  --color-bg:            #F9FAF6;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #EFF1E9;
  --color-border:        #D7D9CE;
  --color-text:          #040404;
  --color-text-muted:    #5F6E66;
  --color-hero-bg:       #13505B;
  --color-hero-text:     #FFFFFF;
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #13505B;
  --color-btn-bg:        #119DA4;
  --color-btn-text:      #040404; /* was #FFFFFF — white on this teal failed AA (3.29:1); reuses this theme's own --color-text */
  --color-btn-hover:     #35ACB2; /* lightened, not darkened — this theme's dark btn-text (#040404) loses contrast if hover darkens toward it; was #0C7489 at 3.78:1, failing */
}

/* ── t04 Olive & Grape ─────────────────────────────────────────────────────
   Cool Steel #93A3B1 · Grey Olive #7C898B · Olive Leaf #40531B
   Mauve Shadow #443742 · Vintage Grape #442B48 */
html[data-colour="t04"] {
  --color-primary:       #442B48;
  --color-primary-light: #5C3B61;
  --color-primary-dark:  #2F1D33;
  --color-accent:        #40531B;
  --color-bg:            #F7F9FA;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #EFF2F4;
  --color-border:        #CDD6DE;
  --color-text:          #443742;
  --color-text-muted:    #657072; /* darkened from #7C898B — failed AA (3.42:1) against page bg */
  --color-hero-bg:       #442B48;
  --color-hero-text:     #FFFFFF;
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #442B48;
  --color-btn-bg:        #40531B;
  --color-btn-text:      #FFFFFF;
  --color-btn-hover:     #33420F;
}

/* ── t05 Twilight Blue ─────────────────────────────────────────────────────
   Midnight Violet #0D0221 · Deep Twilight #0F084B · French Blue #26408B
   Light Blue #A6CFD5 · Frozen Water #C2E7D9 */
html[data-colour="t05"] {
  --color-primary:       #0F084B;
  --color-primary-light: #26408B;
  --color-primary-dark:  #0D0221;
  --color-accent:        #26408B;
  --color-bg:            #F7FBF9;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #E9F5EF;
  --color-border:        #C2E7D9;
  --color-text:          #0D0221;
  --color-text-muted:    #5A6688;
  --color-hero-bg:       #0F084B;
  --color-hero-text:     #E6F2F4;
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #0F084B;
  --color-btn-bg:        #26408B;
  --color-btn-text:      #FFFFFF;
  --color-btn-hover:     #1C3068;
}

/* ── t06 Desert Sand ───────────────────────────────────────────────────────
   Sandy Clay #E1B07E · Desert Sand #E5BE9E · Pale Oak #CBC0AD
   Muted Teal #86A397 · Midnight Violet #361D2E */
html[data-colour="t06"] {
  --color-primary:       #361D2E;
  --color-primary-light: #4E2B43;
  --color-primary-dark:  #241220;
  --color-accent:        #E1B07E;
  --color-bg:            #FBF8F3;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #F3EEE3;
  --color-border:        #DCD3C2;
  --color-text:          #361D2E;
  --color-text-muted:    #5c7067; /* darkened from #6F887D — failed AA (3.61:1) against page bg */
  --color-hero-bg:       #361D2E;
  --color-hero-text:     #F2E3D2;
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #361D2E;
  --color-btn-bg:        #E1B07E;
  --color-btn-text:      #361D2E;
  --color-btn-hover:     #D69C61;
}

/* ── t07 Crimson & Carrot ──────────────────────────────────────────────────
   Onyx #12130F · Grey Olive #7C898B · Carrot Orange #F49D37
   Deep Crimson #8C001A · Sandy Clay #EDB88B */
html[data-colour="t07"] {
  --color-primary:       #8C001A;
  --color-primary-light: #A8112E;
  --color-primary-dark:  #660013;
  --color-accent:        #F49D37;
  --color-bg:            #FBF7F1;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #FAEFDE;
  --color-border:        #EDD8BC;
  --color-text:          #12130F;
  --color-text-muted:    #646f70; /* darkened from #7C898B — failed AA (3.39:1) against page bg */
  --color-hero-bg:       #8C001A;
  --color-hero-text:     #FFFFFF;
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #8C001A;
  --color-btn-bg:        #F49D37;
  --color-btn-text:      #12130F;
  --color-btn-hover:     #E68A1D;
}

/* ── t08 Wine & Cinnabar ───────────────────────────────────────────────────
   Wine Plum #5B2333 · White Smoke #F7F4F3 · Stone Brown #564D4A
   Cinnabar #F24333 · Mahogany Red #BA1B1D */
html[data-colour="t08"] {
  --color-primary:       #5B2333;
  --color-primary-light: #743044;
  --color-primary-dark:  #431825;
  --color-accent:        #F24333;
  --color-bg:            #F7F4F3;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #F1EAE8;
  --color-border:        #E2D6D3;
  --color-text:          #2E1119;
  --color-text-muted:    #564D4A;
  --color-hero-bg:       #5B2333;
  --color-hero-text:     #F7F4F3;
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #5B2333;
  --color-btn-bg:        #F24333;
  --color-btn-text:      #2E1119; /* was #FFFFFF — white on this red failed AA (3.73:1); reuses this theme's own --color-text */
  --color-btn-hover:     #F45F52; /* lightened, not darkened — this theme's dark btn-text (#2E1119) loses contrast if hover darkens toward it; was #BA1B1D at 2.70:1, failing */
}

/* ── t09 Charcoal & Taupe ──────────────────────────────────────────────────
   Black #0A0908 · Jet Black #22333B · White Smoke #F2F4F3
   Dusty Taupe #A9927D · Stone Brown #5E503F */
html[data-colour="t09"] {
  --color-primary:       #22333B;
  --color-primary-light: #33474F;
  --color-primary-dark:  #0A0908;
  --color-accent:        #A9927D;
  --color-bg:            #F2F4F3;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #EBEEEC;
  --color-border:        #DADFDD;
  --color-text:          #0A0908;
  --color-text-muted:    #5E503F;
  --color-hero-bg:       #22333B;
  --color-hero-text:     #F2F4F3;
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #22333B;
  --color-btn-bg:        #A9927D;
  --color-btn-text:      #0A0908;
  --color-btn-hover:     #96806A;
}

/* ── t10 Navy & Gold ───────────────────────────────────────────────────────
   Regal Navy #083D77 · Gold #FED72B · Pale Slate #B7B6C1
   Onyx #0D160B · Dark Ultramarine #1F0692 */
html[data-colour="t10"] {
  --color-primary:       #083D77;
  --color-primary-light: #1D5697;
  --color-primary-dark:  #052850;
  --color-accent:        #FED72B;
  --color-bg:            #F8F8FA;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #EFEFF3;
  --color-border:        #D8D7E0;
  --color-text:          #0D160B;
  --color-text-muted:    #67667A;
  --color-hero-bg:       #083D77;
  --color-hero-text:     #FFFFFF;
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #083D77;
  --color-btn-bg:        #FED72B;
  --color-btn-text:      #0D160B;
  --color-btn-hover:     #F0C400;
}

/* ── t11 Coral & Seagrass ──────────────────────────────────────────────────
   Vibrant Coral #FF6F59 · Dark Slate Grey #254441 · Seagrass #43AA8B
   Dry Sage #B2B09B · Watermelon #EF3054 */
html[data-colour="t11"] {
  --color-primary:       #254441;
  --color-primary-light: #43AA8B;
  --color-primary-dark:  #18302E;
  --color-accent:        #FF6F59;
  --color-bg:            #FAFAF6;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #F0F0E8;
  --color-border:        #DBDACB;
  --color-text:          #1E3230;
  --color-text-muted:    #6f6e5d; /* darkened from #757462 — failed AA (4.14:1 against surface-alt) */
  --color-hero-bg:       #254441;
  --color-hero-text:     #FFFFFF;
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #254441;
  --color-btn-bg:        #FF6F59;
  --color-btn-text:      #1E3230; /* was #FFFFFF — white on this coral failed AA (2.74:1); reuses this theme's own --color-text */
  --color-btn-hover:     #FF8572; /* lightened, not darkened — this theme's dark btn-text (#1E3230) loses contrast if hover darkens toward it; was #EF3054 at 3.36:1, failing */
}

/* ── t12 Burgundy & Blush ──────────────────────────────────────────────────
   Coffee Bean #211103 · Rich Mahogany #3D1308 · Burgundy #7B0D1E
   Cherry Rose #9F2042 · Lavender Blush #F8E5EE */
html[data-colour="t12"] {
  --color-primary:       #7B0D1E;
  --color-primary-light: #9F2042;
  --color-primary-dark:  #3D1308;
  --color-accent:        #9F2042;
  --color-bg:            #FDFAFB;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #F8E5EE;
  --color-border:        #EFD2DE;
  --color-text:          #211103;
  --color-text-muted:    #885e6a; /* darkened from #8A5F6B — failed AA (4.44:1 against surface-alt) */
  --color-hero-bg:       #7B0D1E;
  --color-hero-text:     #F8E5EE;
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #7B0D1E;
  --color-btn-bg:        #9F2042;
  --color-btn-text:      #FFFFFF;
  --color-btn-hover:     #88173A;
}

/* ── s05 Dark — force black on specific elements regardless of colour theme ── */
html[data-style="s05"] .site-header { background: #000 !important; }
html[data-style="s05"] .site-footer { background: #000 !important; }
html[data-style="s05"] .pcard       { background: #000 !important; }
html[data-style="s05"] .pcard-bar   { background: #0B0B0B !important; }
html[data-style="s05"] .inc         { background: #000 !important; border-color: rgba(255,255,255,.12) !important; }