/* ============================================================
   10 design directions. Each block defines the same token set;
   structural overrides below each block push past color swaps.
   ============================================================ */

/* 1. COMPASS BRAND — true Compass typography: Compass Serif + Compass Sans */
[data-theme="compass"] {
  --bg: #ffffff; --bg-2: #f6f6f4; --surface: #ffffff;
  --ink: #101010; --muted: #4f4f4f; --line: #e4e4e0;
  --accent: #101010; --on-accent: #ffffff;
  --d: 'Compass Serif', Times, 'Times New Roman', serif;
  --b: 'Compass Sans', Helvetica, Arial, sans-serif;
  --u: 'Compass Sans', Helvetica, Arial, sans-serif;
  --dw: 500; --radius: 2px; --btn-radius: 2px;
  --eye-ls: .2em;
}
[data-theme="compass"] .btn { font-weight: 500; }
[data-theme="compass"] h1 { font-weight: 400; }

/* 2. CLASSIC — traditional full-service brokerage, navy & cream */
[data-theme="classic"] {
  --bg: #fbf8f1; --bg-2: #f2ecdf; --surface: #fffdf8;
  --ink: #1d2b3a; --muted: #52606f; --line: #ddd4c2;
  --accent: #24466b; --on-accent: #fbf8f1;
  --d: 'Playfair Display', Georgia, serif; --b: Georgia, 'Times New Roman', serif; --u: 'Compass Sans', 'InterLocal', sans-serif;
  --dw: 600; --radius: 4px; --btn-radius: 4px;
  --hero-align: center; --hero-just: center; --hero-cols: 1fr;
  --band-bg: #1d2b3a; --band-ink: #fbf8f1;
}
[data-theme="classic"] .hero .lede { margin-inline: auto; }
[data-theme="classic"] .hero-media { display: none; }
[data-theme="classic"] h2 { font-weight: 700; }

/* 3. CLASSIC LUXURY — ivory, black & antique gold estate look */
[data-theme="classic-luxury"] {
  --bg: #f9f6ee; --bg-2: #f1ecdf; --surface: #fdfbf5;
  --ink: #17140f; --muted: #5c554a; --line: #ded5c0;
  --accent: #a07c33; --on-accent: #17140f;
  --d: 'Cormorant Garamond', Georgia, serif; --b: 'Cormorant Garamond', Georgia, serif; --u: 'Compass Sans', 'InterLocal', sans-serif;
  --dw: 500; --radius: 0px; --btn-radius: 0px;
  --btn-tt: uppercase; --btn-ls: .18em; --nav-tt: uppercase; --nav-ls: .14em;
  --eye-ls: .34em; --hero-align: center; --hero-just: center; --hero-cols: 1fr;
  --band-bg: #17140f; --band-ink: #f9f6ee; --band-btn-bg: #a07c33; --band-btn-ink: #17140f;
  --card-border: 1px solid #ded5c0;
}
[data-theme="classic-luxury"] body, [data-theme="classic-luxury"] p { font-size: 1.06rem; }
[data-theme="classic-luxury"] .nav a { font-size: .74rem; }
[data-theme="classic-luxury"] .btn { font-size: .78rem; padding: .85rem 2rem; }
[data-theme="classic-luxury"] h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 500; }
[data-theme="classic-luxury"] .hero .lede { margin-inline: auto; }
[data-theme="classic-luxury"] .hero-media { display: none; }
[data-theme="classic-luxury"] .eyebrow::after { content: ""; display: block; width: 46px; height: 1px; background: #a07c33; margin: .8rem auto 0; }
[data-theme="classic-luxury"] section:not(.hero):not(.band) .eyebrow::after { margin-left: 0; }

/* 4. MODERN MINIMAL — gallery-white, quiet, typographic */
[data-theme="modern-minimal"] {
  --bg: #ffffff; --bg-2: #fafafa; --surface: #ffffff;
  --ink: #17181a; --muted: #77797e; --line: #ececee;
  --accent: #17181a; --on-accent: #ffffff;
  --d: 'Manrope', 'InterLocal', sans-serif; --b: 'Manrope', 'InterLocal', sans-serif; --u: 'Manrope', sans-serif;
  --dw: 800; --dls: -.02em; --radius: 8px; --btn-radius: 999px;
  --card-border: 1px solid #ececee;
}
[data-theme="modern-minimal"] section { padding: clamp(3.6rem, 8vw, 6.5rem) 0; }
[data-theme="modern-minimal"] .eyebrow { color: #9a9ca1; }
[data-theme="modern-minimal"] .hero .lede { font-size: 1.2rem; }

/* 5. VERY MODERN — bold, oversized, high-impact contemporary */
[data-theme="very-modern"] {
  --bg: #f1efe9; --bg-2: #e8e5dc; --surface: #f7f5f0;
  --ink: #0a0a0a; --muted: #3c3c38; --line: #0a0a0a;
  --accent: #e8430f; --on-accent: #ffffff;
  --d: 'Archivo', 'InterLocal', sans-serif; --b: 'InterLocal', system-ui, sans-serif; --u: 'Archivo', sans-serif;
  --dw: 900; --dls: -.03em; --radius: 0px; --btn-radius: 0px;
  --btn-tt: uppercase; --btn-ls: .06em; --nav-tt: uppercase; --nav-ls: .05em;
  --card-border: 2px solid #0a0a0a; --media-border: 2px solid #0a0a0a;
  --band-bg: #0a0a0a; --band-ink: #f1efe9; --band-btn-bg: #e8430f; --band-btn-ink: #fff;
}
[data-theme="very-modern"] h1 { font-size: clamp(2.8rem, 7vw, 5.4rem); text-transform: uppercase; line-height: .98; }
[data-theme="very-modern"] h2 { text-transform: uppercase; letter-spacing: -.01em; }
[data-theme="very-modern"] .btn { font-weight: 800; box-shadow: 4px 4px 0 #0a0a0a; }
[data-theme="very-modern"] .btn:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 #0a0a0a; }
[data-theme="very-modern"] .site-head { border-bottom-width: 2px; }

/* 6. LUXURY TECH — deep slate, glass surfaces, champagne accent */
[data-theme="luxury-tech"] {
  --bg: #0b0d12; --bg-2: #10131a; --surface: rgba(255,255,255,.045);
  --ink: #eceef2; --muted: #9aa0ad; --line: rgba(255,255,255,.12);
  --accent: #c9a46b; --on-accent: #14110a;
  --d: 'Space Grotesk', 'InterLocal', sans-serif; --b: 'InterLocal', system-ui, sans-serif; --u: 'Space Grotesk', sans-serif;
  --dw: 600; --dls: -.015em; --radius: 14px; --btn-radius: 10px;
  --card-border: 1px solid rgba(255,255,255,.12); --card-blur: blur(12px);
  --shadow: 0 8px 40px rgba(0,0,0,.45);
  --logo-filter: invert(1); --photo-filter: saturate(.85);
  --head-bg: rgba(11,13,18,.85);
  --band-bg: linear-gradient(135deg, #171b25, #0b0d12); --band-ink: #eceef2;
  --band-btn-bg: #c9a46b; --band-btn-ink: #14110a;
  --foot-bg: #08090d;
}
[data-theme="luxury-tech"] body { background-image: radial-gradient(ellipse 70% 45% at 50% -5%, rgba(201,164,107,.13), transparent); background-repeat: no-repeat; }
[data-theme="luxury-tech"] p { color: #9aa0ad; }
[data-theme="luxury-tech"] .site-head { backdrop-filter: blur(14px); }
[data-theme="luxury-tech"] .eyebrow { color: #c9a46b; }

/* 7. TECHNICAL — precision, blueprint grid, engineered detail */
[data-theme="technical"] {
  --bg: #fafbfc; --bg-2: #f1f4f7; --surface: #ffffff;
  --ink: #10151b; --muted: #4d5866; --line: #d6dde4;
  --accent: #1156d6; --on-accent: #ffffff;
  --d: 'IBM Plex Sans', 'InterLocal', sans-serif; --b: 'IBM Plex Sans', 'InterLocal', sans-serif; --u: 'IBM Plex Mono', monospace;
  --dw: 600; --dls: -.01em; --radius: 3px; --btn-radius: 3px;
  --eye-ls: .08em; --card-border: 1px solid #d6dde4;
  --band-bg: #10151b; --band-ink: #fafbfc;
}
[data-theme="technical"] body {
  background-image: linear-gradient(rgba(17,86,214,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(17,86,214,.045) 1px, transparent 1px);
  background-size: 32px 32px;
}
[data-theme="technical"] .eyebrow { font-size: .7rem; }
[data-theme="technical"] .eyebrow::before { content: "// "; color: #8aa5d6; }
[data-theme="technical"] .step-num { font-size: .85rem; }
[data-theme="technical"] .card { box-shadow: 0 1px 0 #d6dde4; }
[data-theme="technical"] .lic { font-family: 'IBM Plex Mono', monospace; font-size: .7rem; }

/* 8. WARM TRADITIONAL — sage & sand, approachable, family-first */
[data-theme="warm"] {
  --bg: #f8f4ec; --bg-2: #efe8da; --surface: #fffcf6;
  --ink: #33302a; --muted: #6b6558; --line: #e0d7c5;
  --accent: #64764f; --on-accent: #fffcf6;
  --d: 'Lora', Georgia, serif; --b: 'Karla', 'InterLocal', sans-serif; --u: 'Karla', sans-serif;
  --dw: 600; --radius: 14px; --btn-radius: 999px;
  --shadow: 0 3px 16px rgba(80,70,50,.07); --card-border: 1px solid #e8e0d0;
  --band-bg: #64764f; --band-ink: #fffcf6;
}
[data-theme="warm"] .btn { padding: .8rem 1.8rem; }
[data-theme="warm"] .person img { border-radius: 14px 14px 0 0; }

/* 9. NORTH SHORE COASTAL — lake air, sea-glass teal, light serif */
[data-theme="coastal"] {
  --bg: #f5f8f8; --bg-2: #e9f0f1; --surface: #ffffff;
  --ink: #22333b; --muted: #566b74; --line: #d8e2e4;
  --accent: #3e7c8f; --on-accent: #ffffff;
  --d: 'Libre Caslon Text', Georgia, serif; --b: 'Karla', 'InterLocal', sans-serif; --u: 'Karla', sans-serif;
  --dw: 400; --radius: 10px; --btn-radius: 8px;
  --shadow: 0 2px 14px rgba(34,51,59,.06);
  --band-bg: #22333b; --band-ink: #f5f8f8; --band-btn-bg: #cdb98f; --band-btn-ink: #22333b;
}
[data-theme="coastal"] h1 em, [data-theme="coastal"] h2 em { font-style: italic; color: #3e7c8f; }
[data-theme="coastal"] .hero { background: linear-gradient(180deg, #e9f0f1, transparent 70%); }

/* 10. EDITORIAL — magazine serif, hairline rules, ink & signal red */
[data-theme="editorial"] {
  --bg: #fffef9; --bg-2: #fffef9; --surface: #fffef9;
  --ink: #141311; --muted: #45423c; --line: #141311;
  --accent: #b4231f; --on-accent: #fffef9;
  --d: 'Fraunces', Georgia, serif; --b: Georgia, 'Times New Roman', serif; --u: 'Compass Sans', 'InterLocal', sans-serif;
  --dw: 600; --radius: 0px; --btn-radius: 0px;
  --nav-tt: uppercase; --nav-ls: .1em; --eye-ls: .2em;
  --card-border: none;
}
[data-theme="editorial"] h1 { font-style: italic; font-size: clamp(2.6rem, 6vw, 4.8rem); }
[data-theme="editorial"] section { border-top: 1px solid #141311; }
[data-theme="editorial"] section.hero { border-top: none; }
[data-theme="editorial"] .card { border-top: 1px solid #141311; border-radius: 0; padding-left: 0; padding-right: 0; background: transparent; }
[data-theme="editorial"] .person { border-top: 1px solid #141311; }
[data-theme="editorial"] .person .meta { padding-left: 0; }
[data-theme="editorial"] .grid { gap: 2.5rem; }
[data-theme="editorial"] .eyebrow { color: #b4231f; }
[data-theme="editorial"] .btn.ghost { border-width: 1px; }
[data-theme="editorial"] .band { background: #141311; }