/* ============================================
   V1 "ATELIER" — dark, playful, experimental
   ============================================ */
body[data-variant="atelier"] {
  --bg: #0A0A0A;
  --fg: #EDEDED;
  --bg-2: #141414;
  --bg-3: #1C1C1C;
  --line: #232323;
  font-family: var(--font-display);
}
body[data-variant="atelier"] .hero-wordmark {
  font-size: clamp(72px, 15vw, 240px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.85;
}
body[data-variant="atelier"] .home-manifesto {
  font-size: clamp(36px, 5.5vw, 88px);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--fg-dim);
}
body[data-variant="atelier"] .home-manifesto .keyword {
  color: var(--fg);
}
body[data-variant="atelier"] .home-manifesto .highlight {
  color: #000;
  padding: 0 8px;
}
body[data-variant="atelier"] .home-manifesto .highlight.yellow { background: var(--acc-yellow); }
body[data-variant="atelier"] .home-manifesto .highlight.cyan   { background: var(--acc-cyan); }
body[data-variant="atelier"] .home-manifesto .highlight.green  { background: var(--acc-green); color: #000; }

/* ============================================
   V2 "MONOLITH" — massive wordmark, restrained grid
   ============================================ */
body[data-variant="monolith"] {
  --bg: #0A0A0A;
  --fg: #FFFFFF;
  --bg-2: #121212;
  --bg-3: #1A1A1A;
  --line: #262626;
}
body[data-variant="monolith"] .hero-wordmark {
  font-size: clamp(80px, 22vw, 360px);
  font-weight: 700;
  font-stretch: 110%;
  letter-spacing: -0.055em;
  line-height: 0.82;
}
body[data-variant="monolith"] .home-manifesto {
  display: none;
}
body[data-variant="monolith"] .palette-strip {
  display: flex;
}

/* ============================================
   V3 "FOUNDRY" — light editorial, specimen-style
   ============================================ */
body[data-variant="foundry"] {
  --bg: #F4F1EC;
  --fg: #111111;
  --bg-2: #E9E5DE;
  --bg-3: #DCD7CE;
  --line: #CFCAC2;
  --fg-dim: #6A6A6A;
  --fg-dimmer: #9A9A9A;
}
body[data-variant="foundry"] .hero-wordmark {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: clamp(72px, 14vw, 220px);
  letter-spacing: -0.04em;
  line-height: 0.9;
}
body[data-variant="foundry"] .home-manifesto {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(28px, 4vw, 60px);
  font-weight: 400;
  line-height: 1.15;
  color: #333;
  max-width: 1100px;
}
body[data-variant="foundry"] .home-manifesto .highlight {
  background: none;
  border-bottom: 4px solid #111;
  padding: 0 2px;
  color: #111;
}
body[data-variant="foundry"] .home-manifesto .highlight.yellow { border-color: #B8A400; }
body[data-variant="foundry"] .home-manifesto .highlight.cyan { border-color: #0088C9; }
body[data-variant="foundry"] .home-manifesto .highlight.green { border-color: #12904C; }
body[data-variant="foundry"] .placeholder {
  background: repeating-linear-gradient(135deg, #E9E5DE 0 16px, #DCD7CE 16px 32px);
}
body[data-variant="foundry"] .topbar { color: #000; mix-blend-mode: normal; border-bottom: 1px solid var(--line); background: rgba(244,241,236,0.9); backdrop-filter: blur(6px); }

/* ============================================
   V4 "ATELIER LIGHT" — playful on white foundation
   Same vocabulary as Atelier, flipped palette.
   ============================================ */
body[data-variant="atelier-light"] {
  --bg:     #FBFAF7;
  --bg-2:   #F0EEE8;
  --bg-3:   #E5E2D9;
  --fg:     #0A0A0A;
  --fg-dim: #6A6A6A;
  --fg-dimmer: #B5B1A6;
  --line:   #D9D5CC;
}
body[data-variant="atelier-light"] .hero-wordmark {
  font-size: clamp(72px, 15vw, 240px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.85;
}
body[data-variant="atelier-light"] .home-manifesto {
  font-size: clamp(36px, 5.5vw, 88px);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--fg-dim);
}
body[data-variant="atelier-light"] .home-manifesto .keyword { color: var(--fg); }
body[data-variant="atelier-light"] .home-manifesto .highlight {
  color: #000;
  padding: 0 8px;
}
body[data-variant="atelier-light"] .home-manifesto .highlight.yellow { background: var(--acc-yellow); }
body[data-variant="atelier-light"] .home-manifesto .highlight.cyan   { background: var(--acc-cyan); }
body[data-variant="atelier-light"] .home-manifesto .highlight.green  { background: var(--acc-green); }

/* Topbar readable on light */
body[data-variant="atelier-light"] .topbar {
  color: #000;
  mix-blend-mode: normal;
  background: rgba(251,250,247,0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
body[data-variant="atelier-light"] .topbar .mark .glyph { background: #000; }

/* Selection stays yellow; placeholders use warm grays */
body[data-variant="atelier-light"] .placeholder {
  background: repeating-linear-gradient(135deg, var(--bg-2) 0 16px, var(--bg-3) 16px 32px);
}

/* Shader overlay cards on light foundation */
body[data-variant="atelier-light"].shader-active .cats a,
body[data-variant="atelier-light"].shader-active .sysbar > div,
body[data-variant="atelier-light"].shader-active .metrics .m,
body[data-variant="atelier-light"].shader-active .stack-block .cell,
body[data-variant="atelier-light"].shader-active .proj-visual,
body[data-variant="atelier-light"].shader-active .viz,
body[data-variant="atelier-light"].shader-active .qa,
body[data-variant="atelier-light"].shader-active .ab-portrait {
  background-color: rgba(251,250,247,0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Buttons: dark outline on white */
body[data-variant="atelier-light"] .btn { border-color: #0A0A0A; color: #0A0A0A; }
body[data-variant="atelier-light"] .btn:hover { background: #0A0A0A; color: #FBFAF7; }
body[data-variant="atelier-light"] .btn.primary { background: var(--acc-yellow); color: #000; border-color: var(--acc-yellow); }
body[data-variant="atelier-light"] .btn.primary:hover { background: transparent; color: #000; border-color: #000; }

/* Product visual chrome on light */
body[data-variant="atelier-light"] .proj-visual { background: #0A0A0A; }
body[data-variant="atelier-light"] .viz { background: #0F0F0F; color: #EDEDED; }
body[data-variant="atelier-light"] .viz .lbl,
body[data-variant="atelier-light"] .viz .caption { color: #7A7A7A; }

/* Footer buttons on light */
body[data-variant="atelier-light"] footer.site-footer a:hover { color: #000; background: var(--acc-yellow); padding: 0 4px; }

/* About side borders readable */
body[data-variant="atelier-light"] .ab-head h1 em { color: #0A0A0A; background: var(--acc-yellow); padding: 0 8px; }
body[data-variant="atelier-light"] .prod-head h1 em { color: #0A0A0A; background: var(--acc-cyan); padding: 0 8px; }
body[data-variant="atelier-light"] .mk-head h1 em { color: #0A0A0A; background: var(--acc-green); padding: 0 8px; }

/* Selected work hover on light */
body[data-variant="atelier-light"] .selected:hover { background: var(--bg-2); }

/* QA card */
body[data-variant="atelier-light"] .qa { background: var(--bg-2); }