/* ═════════════════════════════════════════════════════════════════════════
   PIXEL HEAVEN — SHARED THEME SYSTEM
   Loaded from every page. Provides the 5-theme palette + typography +
   shape vocabulary. Combine with page-specific styles for per-page layout.
   ════════════════════════════════════════════════════════════════════════ */

/* Theme fonts (Outfit/Plus Jakarta/JetBrains already loaded by style.css) */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&family=Archivo+Black&family=Roboto+Condensed:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Playfair+Display:ital,wght@0,400;0,600;0,800;1,400&family=Lora:wght@400;500;600&display=swap');

:root,
:root[data-theme="default"] {
  /* New theme variables */
  --bg:        #04060f;
  --surface:   #0b0e1d;
  --surface-2: #131635;
  --line:      rgba(130,170,255,.12);
  --line-strong: rgba(130,170,255,.25);
  --text:      #f0f4ff;
  --text-2:    #c4c5cf;
  --text-3:    #8b8d99;
  --brand:     #3b82f6;
  --brand-2:   #a855f7;
  --brand-soft: rgba(96,165,250,0.10);
  --accent:    #6ee7b7;
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-hand:    'Caveat', cursive;
  --display-weight: 800;
  --display-spacing: -0.02em;
  --heading-case: none;
  --body-tracking: 0;
  --radius-sm: 8px;
  --radius:    16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --section-py: 80px;
  --hero-py:    70px;

  /* Bridge to existing style.css vars — keep default values working unchanged */
  --glass:     rgba(13,20,40,.6);
  --line-hi:   rgba(130,170,255,.25);
  --blue:      #3b82f6;
  --blue-2:    #60a5fa;
  --blue-3:    #93c5fd;
  --blue-glow: rgba(59,130,246,.45);
  --purple:    #7c3aed;
  --purple-2:  #a855f7;
  --purple-3:  #c4b5fd;
  --purple-glow: rgba(168,85,247,.45);
  --green:     #10b981;
  --gold:      #fcd34d;
  --display:   var(--font-display);
  --sans:      var(--font-body);
  --mono:      var(--font-mono);
}

:root[data-theme="plumber"] {
  --bg: #060e1a; --surface: #0d1a30; --surface-2: #16243f;
  --line: rgba(255,255,255,0.10); --line-strong: rgba(255,255,255,0.20);
  --text: #fafafa; --text-2: #d2d6e0; --text-3: #92a0b8;
  --brand: #dc2626; --brand-2: #fbbf24; --brand-soft: rgba(220,38,38,0.12); --accent: #fbbf24;
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --display-weight: 400; --display-spacing: 0.02em; --heading-case: uppercase;
  --radius-sm: 2px; --radius: 4px; --radius-lg: 6px; --radius-pill: 4px;
  --section-py: 64px; --hero-py: 44px;

  /* Bridge to existing style.css */
  --glass: rgba(13,26,48,.7); --line-hi: rgba(255,255,255,0.20);
  --blue: #dc2626; --blue-2: #ef4444; --blue-3: #f87171;
  --blue-glow: rgba(220,38,38,.45);
  --purple: #fbbf24; --purple-2: #fcd34d; --purple-3: #fde68a;
  --purple-glow: rgba(251,191,36,.4);
  --display: var(--font-display); --sans: var(--font-body); --mono: var(--font-mono);
}

:root[data-theme="builder"] {
  --bg: #161517; --surface: #1f1e21; --surface-2: #29282d;
  --line: rgba(255,255,255,0.10); --line-strong: rgba(255,255,255,0.22);
  --text: #f5f3ef; --text-2: #c8c3b8; --text-3: #8b8579;
  --brand: #ea580c; --brand-2: #fbbf24; --brand-soft: rgba(234,88,12,0.12); --accent: #fbbf24;
  --font-display: 'Archivo Black', system-ui, sans-serif;
  --font-body: 'Roboto Condensed', system-ui, sans-serif;
  --display-weight: 400; --display-spacing: -0.03em; --heading-case: uppercase;
  --radius-sm: 0px; --radius: 0px; --radius-lg: 0px; --radius-pill: 0px;
  --section-py: 80px; --hero-py: 72px;

  /* Bridge */
  --glass: rgba(31,30,33,.85); --line-hi: rgba(255,255,255,0.22);
  --blue: #ea580c; --blue-2: #f97316; --blue-3: #fb923c;
  --blue-glow: rgba(234,88,12,.45);
  --purple: #fbbf24; --purple-2: #fcd34d; --purple-3: #fde68a;
  --purple-glow: rgba(251,191,36,.4);
  --display: var(--font-display); --sans: var(--font-body); --mono: var(--font-mono);
}

:root[data-theme="beauty"] {
  --bg: #faf6f0; --surface: #ffffff; --surface-2: #f4ece1;
  --line: rgba(40,30,30,0.10); --line-strong: rgba(40,30,30,0.22);
  --text: #2a1f1f; --text-2: #5e4d4d; --text-3: #8a7a7a;
  --brand: #c97a8b; --brand-2: #d4a574; --brand-soft: rgba(201,122,139,0.10); --accent: #b8860b;
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --display-weight: 500; --display-spacing: 0; --heading-case: none; --body-tracking: 0.005em;
  --radius-sm: 16px; --radius: 24px; --radius-lg: 36px; --radius-pill: 999px;
  --section-py: 100px; --hero-py: 90px;

  /* Bridge — light-mode adjustments */
  --glass: rgba(255,255,255,.8); --line-hi: rgba(40,30,30,0.22);
  --blue: #c97a8b; --blue-2: #d4748d; --blue-3: #e09baa;
  --blue-glow: rgba(201,122,139,.4);
  --purple: #d4a574; --purple-2: #e0bb8a; --purple-3: #ecd1a1;
  --purple-glow: rgba(212,165,116,.4);
  --display: var(--font-display); --sans: var(--font-body); --mono: var(--font-mono);
}

:root[data-theme="solicitor"] {
  --bg: #0d1119; --surface: #161c2a; --surface-2: #1f2638;
  --line: rgba(255,255,255,0.10); --line-strong: rgba(255,255,255,0.18);
  --text: #f4f0e8; --text-2: #c8c1b3; --text-3: #8f897c;
  --brand: #c9a47a; --brand-2: #87a17d; --brand-soft: rgba(201,164,122,0.10); --accent: #87a17d;
  --font-display: 'Playfair Display', 'Times New Roman', serif;
  --font-body: 'Lora', Georgia, serif;
  --display-weight: 600; --display-spacing: -0.01em; --heading-case: none; --body-tracking: 0.005em;
  --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; --radius-pill: 999px;
  --section-py: 96px; --hero-py: 90px;

  /* Bridge */
  --glass: rgba(22,28,42,.7); --line-hi: rgba(255,255,255,0.18);
  --blue: #c9a47a; --blue-2: #d4b896; --blue-3: #e0cba8;
  --blue-glow: rgba(201,164,122,.4);
  --purple: #87a17d; --purple-2: #9eb593; --purple-3: #b5c9aa;
  --purple-glow: rgba(135,161,125,.4);
  --display: var(--font-display); --sans: var(--font-body); --mono: var(--font-mono);
}

/* ── View Transitions API ─────────────────────────────────────────────── */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 600ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Targeted transitions on key elements (no universal selector — paint storms) */
body, .nav, .nav-cta, .nav-links a, .hero-card, .hero-variant,
.promise, .promise-portrait, .tt-main, .tt-side, .tt-tag,
.faq-item, .faq-q, .btn, .btn.ghost, .section-head, .eyebrow,
.theme-toggle, .theme-option, .card, .price-card, .price-cta, .card-tag {
  transition:
    background-color 500ms cubic-bezier(0.4, 0, 0.2, 1),
    color 400ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 500ms cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 500ms cubic-bezier(0.4, 0, 0.2, 1),
    border-width 500ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.motif { transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1); }

/* ── Theme switcher widget ─────────────────────────────────────────────── */
.theme-switcher { position: fixed; top: 22px; right: 22px; z-index: 200; }
.theme-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 12px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  transition: border-color 200ms, transform 200ms, background-color 500ms;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.theme-toggle-swatch {
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  flex-shrink: 0;
  transition: background 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-options {
  display: none;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding: 10px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  backdrop-filter: blur(24px);
  border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  min-width: 280px;
}
.theme-options.open { display: flex; animation: pop-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes pop-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.theme-option {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px; font-weight: 500;
  text-align: left; width: 100%;
  cursor: pointer;
}
.theme-option:hover { background: var(--surface-2); }
.theme-option.active { background: var(--surface-2); border-color: var(--line-strong); }
.theme-option-swatch {
  width: 22px; height: 22px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--line) inset;
}
.theme-option-meta { display: flex; flex-direction: column; line-height: 1.2; }
.theme-option-name { font-size: 14px; font-weight: 600; }
.theme-option-detail { font-size: 11px; color: var(--text-3); font-family: var(--font-mono); letter-spacing: 0.08em; }

.theme-sweep {
  position: fixed; inset: 0; pointer-events: none; z-index: 199;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 0%, var(--brand) 0%, transparent 50%);
  mix-blend-mode: overlay;
}
:root[data-theme="beauty"] .theme-sweep { mix-blend-mode: multiply; }
.theme-sweep.firing { animation: sweep 600ms cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes sweep {
  0%   { opacity: 0; }
  40%  { opacity: 0.25; }
  100% { opacity: 0; }
}

/* ── Shared typography (theme-aware) ────────────────────────────────────── */
.grad {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
:root[data-theme="beauty"] .grad,
:root[data-theme="solicitor"] .grad {
  font-style: italic;
  font-weight: 400;
}

/* ── Eyebrow restyle per theme ─────────────────────────────────────────── */
:root[data-theme="beauty"] .eyebrow,
:root[data-theme="solicitor"] .eyebrow {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  text-transform: none !important;
  font-size: 16px !important;
  letter-spacing: 0.04em !important;
  color: var(--brand) !important;
}

.hand { font-family: var(--font-hand); font-weight: 500; }

/* ── Personal Promise panel — replaces the AI-cliché trust strip ──────── */
.promise {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  padding: 28px 32px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  max-width: 880px;
  margin: 0 auto;
}
:root[data-theme="builder"] .promise { border-width: 2px; }
:root[data-theme="beauty"] .promise { padding: 36px 40px; border-color: var(--brand-2); }
:root[data-theme="solicitor"] .promise { border-color: var(--line-strong); }
@media (max-width: 720px) {
  .promise { grid-template-columns: 1fr; padding: 24px; text-align: left; }
}

.promise-portrait {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: var(--display-weight);
  position: relative;
  flex-shrink: 0;
  letter-spacing: var(--display-spacing);
}
:root[data-theme="builder"] .promise-portrait { border-radius: 0; }
.promise-portrait::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px dashed var(--line-strong);
  pointer-events: none;
}
:root[data-theme="builder"] .promise-portrait::after { border-radius: 0; }

.promise-body p {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.65;
  max-width: 56ch;
}
:root[data-theme="beauty"] .promise-body p,
:root[data-theme="solicitor"] .promise-body p { font-size: 16px; line-height: 1.75; }
.promise-body p strong { color: var(--text); font-weight: 600; }

.promise-name {
  margin-top: 12px;
  font-family: var(--font-hand);
  font-size: 34px;
  font-weight: 700;
  color: var(--brand-2);
  line-height: 1;
  display: inline-block;
  transform: rotate(-2deg);
}
:root[data-theme="builder"] .promise-name {
  transform: none;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.05em;
}

.promise-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 4px;
}
:root[data-theme="beauty"] .promise-meta,
:root[data-theme="solicitor"] .promise-meta {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: none;
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* ── Signature in footer ────────────────────────────────────────────────── */
.foot-signature {
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  margin-bottom: 28px;
}
.foot-signature img {
  width: 140px;
  filter: brightness(1.5);
}
:root[data-theme="beauty"] .foot-signature img { filter: invert(0.85); }
.foot-hand {
  font-family: var(--font-hand);
  font-size: 24px;
  color: var(--brand-2);
  margin-top: 6px;
  display: inline-block;
  transform: rotate(-1deg);
}