/* ==========================================================================
   Theme: Bauhaus Grid, primary colors, pure geometry, design school energy.
   Circles, squares, and rules arrange the page like a composition exercise.
   ========================================================================== */

[data-theme="bauhaus"] {
  --bg: #f6f3ec;
  --bg-soft: #efeadf;
  --surface: #ffffff;
  --ink: #15151a;
  --muted: #4f4f57;
  --accent: #d8281c;
  --accent-ink: #ffffff;
  --accent-2: #1d4ed8;
  --line: #15151a;
  --border-w: 2px;
  --radius: 0px;
  --radius-lg: 0px;
  --shadow: none;
  --shadow-strong: 8px 8px 0 0 #f0b41c;

  --font-display: "Inter", sans-serif;
  --h-weight: 800;
  --h-tracking: -0.02em;
  --h-transform: lowercase;
  --kicker-font: "Inter", sans-serif;
  --btn-radius: 0px;
  --tk-speed: 55;
}

[data-theme="bauhaus"] .kicker {
  color: var(--ink);
  font-weight: 800;
  letter-spacing: 0.22em;
}
[data-theme="bauhaus"] .kicker::before {
  content: "";
  display: inline-block;
  width: 0.7rem; height: 0.7rem;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 0.5rem;
}
[data-theme="bauhaus"] .hero-title em { color: var(--accent); }
[data-theme="bauhaus"] .why .section-title em { color: var(--accent); }

[data-theme="bauhaus"] .btn {
  border: 2px solid var(--ink);
  font-weight: 800;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
[data-theme="bauhaus"] .btn--primary { background: var(--accent); border-color: var(--ink); color: #fff; }
[data-theme="bauhaus"] .btn--primary:hover {
  background: var(--accent-2); border-color: var(--ink); color: #fff;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 0 #f0b41c;
}
[data-theme="bauhaus"] .btn--ghost:hover {
  background: var(--ink); color: var(--bg);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 0 #f0b41c;
}

[data-theme="bauhaus"] .site-header { border-bottom: 3px solid var(--ink); }
[data-theme="bauhaus"] .brand-name { font-weight: 800; }
[data-theme="bauhaus"] .brand-name i { color: var(--accent); font-weight: 800; }
[data-theme="bauhaus"] .nav-link { font-weight: 700; text-transform: lowercase; }
[data-theme="bauhaus"] .lang-btn { border: 2px solid var(--ink); }

[data-theme="bauhaus"] .hp {
  border: 2px solid var(--ink);
  background: var(--surface);
  font-weight: 700;
  text-transform: lowercase;
}
[data-theme="bauhaus"] .hp:nth-child(1) { border-radius: 99px; }
[data-theme="bauhaus"] .hp:nth-child(3) { background: #f0b41c; }

/* Hero: the composition exercise, circle, square, triangle, one rule */
[data-theme="bauhaus"] .ha-1 {
  opacity: 1; width: 9.5rem; height: 9.5rem; border-radius: 50%;
  background: var(--accent);
  top: -8%; right: 0;
  z-index: 0;
}
[data-theme="bauhaus"] .ha-2 {
  opacity: 1; width: 6rem; height: 6rem;
  background: var(--accent-2);
  bottom: 0; left: -2%;
  z-index: 0;
}
[data-theme="bauhaus"] .ha-3 {
  opacity: 1; width: 0; height: 0;
  border-left: 2.2rem solid transparent;
  border-right: 2.2rem solid transparent;
  border-bottom: 3.8rem solid #f0b41c;
  bottom: 6%; right: 16%;
  z-index: 3;
}
[data-theme="bauhaus"] .ha-4 {
  opacity: 1; width: 120%; height: 3px;
  background: var(--ink);
  left: -10%; top: 30%;
  transform: rotate(-24deg);
  z-index: 0;
}
[data-theme="bauhaus"] .win { border: 3px solid var(--ink); }
[data-theme="bauhaus"] .win-bar { border-bottom: 2px solid var(--ink); font-weight: 700; }
[data-theme="bauhaus"] .win-dots i { background: var(--accent); }
[data-theme="bauhaus"] .win-dots i:nth-child(2) { background: #f0b41c; border-radius: 0; }
[data-theme="bauhaus"] .win-dots i:nth-child(3) { background: var(--accent-2); border-radius: 0; transform: rotate(45deg) scale(0.85); }
[data-theme="bauhaus"] .ha-chip { background: var(--accent-2); }
[data-theme="bauhaus"] .ha-chip--alt { border: 2px solid var(--ink); }
[data-theme="bauhaus"] .ha-line { background: #e3ddcd; }

/* Ticker: metronome strip */
[data-theme="bauhaus"] .ticker {
  background: var(--surface);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}
[data-theme="bauhaus"] .tk-item {
  color: var(--ink);
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: 0.12em;
}
[data-theme="bauhaus"] .tk-sep { color: var(--accent); }
[data-theme="bauhaus"] .tk-sep::before { content: "●"; font-size: 0.65em; }
[data-theme="bauhaus"] .tk-group .tk-sep:nth-of-type(3n+2) { color: var(--accent-2); }
[data-theme="bauhaus"] .tk-group .tk-sep:nth-of-type(3n)::before { content: "■"; color: #f0b41c; }

/* Cards: white fields in a black structure, color used as punctuation */
[data-theme="bauhaus"] .svc-card, [data-theme="bauhaus"] .why-card,
[data-theme="bauhaus"] .step, [data-theme="bauhaus"] .demo-card,
[data-theme="bauhaus"] .price-card, [data-theme="bauhaus"] .form,
[data-theme="bauhaus"] .win--admin {
  border: 2px solid var(--ink);
}
[data-theme="bauhaus"] .svc-card:hover, [data-theme="bauhaus"] .demo-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 0 var(--accent-2);
}
[data-theme="bauhaus"] .svc-card:nth-child(3n+1):hover { box-shadow: 5px 5px 0 0 var(--accent); }
[data-theme="bauhaus"] .svc-card:nth-child(3n):hover { box-shadow: 5px 5px 0 0 #f0b41c; }
/* icons framed in rotating geometric shapes */
[data-theme="bauhaus"] .svc-icon {
  color: #fff;
  padding: 0.5rem;
  width: 2.9rem; height: 2.9rem;
}
[data-theme="bauhaus"] .svc-card:nth-child(3n+1) .svc-icon { background: var(--accent); border-radius: 50%; }
[data-theme="bauhaus"] .svc-card:nth-child(3n+2) .svc-icon { background: var(--accent-2); border-radius: 0; }
[data-theme="bauhaus"] .svc-card:nth-child(3n) .svc-icon { background: #f0b41c; color: var(--ink); border-radius: 0 50% 50% 50%; }

[data-theme="bauhaus"] .why-num {
  display: inline-grid; place-items: center;
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
}
[data-theme="bauhaus"] .why-card:nth-child(2) .why-num { background: var(--accent); }
[data-theme="bauhaus"] .why-card:nth-child(3) .why-num { background: var(--accent-2); }

[data-theme="bauhaus"] .step-num {
  border: 2px solid var(--ink);
  background: var(--ink); color: #fff;
  font-weight: 700;
}
[data-theme="bauhaus"] .steps .step:nth-child(2n) .step-num { background: var(--accent); border-color: var(--accent); }
[data-theme="bauhaus"] .steps .step:nth-child(3n) .step-num { background: var(--accent-2); border-color: var(--accent-2); }

[data-theme="bauhaus"] .demo-thumb { border: 2px solid var(--ink); }
[data-theme="bauhaus"] .dt-b { background: var(--accent); }
[data-theme="bauhaus"] .demo-status { border: 2px solid var(--ink); border-radius: 0; color: var(--ink); font-weight: 600; }
[data-theme="bauhaus"] .demo-status--prod { background: #f0b41c; border-color: var(--ink); color: var(--ink); }

[data-theme="bauhaus"] .price-badge { background: var(--ink); border-radius: 0; }
[data-theme="bauhaus"] .price-card--featured { box-shadow: var(--shadow-strong); }
[data-theme="bauhaus"] .price-list li::before { content: "●"; color: var(--accent); font-size: 0.7em; top: 0.4em; }
[data-theme="bauhaus"] .price-list li:nth-child(2n)::before { color: var(--accent-2); }
[data-theme="bauhaus"] .price-list li:nth-child(3n)::before { content: "■"; color: #f0b41c; }

[data-theme="bauhaus"] .field input, [data-theme="bauhaus"] .field select, [data-theme="bauhaus"] .field textarea {
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--surface);
}
[data-theme="bauhaus"] .field input:focus, [data-theme="bauhaus"] .field select:focus, [data-theme="bauhaus"] .field textarea:focus {
  border-color: var(--accent-2);
  box-shadow: 3px 3px 0 0 #f0b41c;
}
[data-theme="bauhaus"] .site-footer { border-top: 3px solid var(--ink); }

[data-theme="bauhaus"] .mode-panel { border: 2px solid var(--ink); }
[data-theme="bauhaus"] .mp-label { color: var(--ink); }
[data-theme="bauhaus"] .mp-label::before { content: "● "; color: var(--accent); font-size: 0.8em; }
[data-theme="bauhaus"] .mp-col + .mp-col .mp-label::before { color: var(--accent-2); }
[data-theme="bauhaus"] .car-btn { border: 2px solid var(--ink); border-radius: 50%; }
[data-theme="bauhaus"] .car-btn:hover { background: var(--accent); border-color: var(--ink); color: #fff; }

/* Motion: mechanical precision */
[data-theme="bauhaus"] .reveal {
  transform: translateY(14px);
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}

/* --------------------------------------------------------------------------
   Self-preview
   -------------------------------------------------------------------------- */
.mode-card[data-mode="bauhaus"] .mc-prev {
  background: #f6f3ec;
  border: 2px solid #15151a;
  border-radius: 0;
}
.mode-card[data-mode="bauhaus"] .mp-a {
  width: 2rem; height: 2rem; border-radius: 50%;
  background: #d8281c;
  right: 0.6rem; top: 0.55rem;
}
.mode-card[data-mode="bauhaus"] .mp-b {
  width: 1.3rem; height: 1.3rem;
  background: #1d4ed8;
  left: 0.65rem; top: 0.65rem;
}
.mode-card[data-mode="bauhaus"] .mp-c {
  width: 0; height: 0; background: none;
  border-left: 0.75rem solid transparent;
  border-right: 0.75rem solid transparent;
  border-bottom: 1.3rem solid #f0b41c;
  right: 1.1rem; bottom: 0.55rem;
}
.mode-card[data-mode="bauhaus"] .mc-aa {
  font-family: "Inter", sans-serif; font-weight: 800; text-transform: lowercase;
  color: #15151a; left: 0.65rem; bottom: 0.45rem;
}