/* ============================================================
   THEME: STREET ARCHITECT — "The Structured Mural"
   Urban brutalism, neon lime on dark, sharp industrial
   ============================================================ */

[data-theme="street-architect"] {
  /* Colors */
  --bg: #0e0e0e;
  --surface: #0e0e0e;
  --surface-container-low: #131313;
  --surface-container-high: #20201f;
  --primary: #f3ffca;
  --primary-dim: #beee00;
  --on-surface: #ffffff;
  --on-surface-variant: #adaaaa;
  --on-primary: #516700;
  --accent: #8ff5ff;
  --accent-secondary: #262626;
  --outline-variant: #484847;
  --outline: #767575;

  /* Typography */
  --font-headline: 'Epilogue', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;
  --font-label: 'Space Grotesk', sans-serif;
  --font-signature: 'Epilogue', sans-serif;

  /* Shape */
  --radius: 0px;

  /* Decorative */
  --texture-opacity: 0;
  --grain-opacity: 0.03;
  --glow-opacity: 0;
}

/* Dark radial base */
[data-theme="street-architect"] body {
  background-color: #0e0e0e;
  background-image: radial-gradient(circle at 50% 50%, #1a1a1a 0%, #0e0e0e 100%);
}

[data-theme="street-architect"] .site-header {
  background: #0e0e0e;
}

/* Bold uppercase title */
[data-theme="street-architect"] .site-title {
  font-family: 'Epilogue', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  color: #f3ffca;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Label */
[data-theme="street-architect"] .content-label {
  font-family: 'Space Grotesk', sans-serif;
  color: #adaaaa;
  letter-spacing: 0.2em;
}

/* Content container with accent bar */
[data-theme="street-architect"] .content-container {
  background: #131313;
  padding: clamp(2rem, 6vw, 6rem);
  position: relative;
  overflow: hidden;
}

[data-theme="street-architect"] .content-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, #f3ffca, #cafd00, #8ff5ff);
}

/* Massive uppercase headline */
[data-theme="street-architect"] .content-quote {
  font-family: 'Epilogue', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: #f3ffca;
  text-shadow: 0 0 30px rgba(243, 255, 202, 0.15);
}

/* Structural details in footer area */
[data-theme="street-architect"] .content-footer-line {
  background: #484847;
}

[data-theme="street-architect"] .content-footer-text {
  color: #8ff5ff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
}

/* Footer */
[data-theme="street-architect"] .footer-text {
  color: #484847;
}

/* Dropdown — dark */
[data-theme="street-architect"] .theme-selector {
  background-color: #262626;
  color: #adaaaa;
  border-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23adaaaa' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 1 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

[data-theme="street-architect"] .theme-selector:hover {
  border-color: #484847;
  color: #f3ffca;
}

[data-theme="street-architect"] .theme-selector:focus-visible {
  border-color: #f3ffca;
  box-shadow: 0 0 0 2px rgba(243, 255, 202, 0.15);
}

[data-theme="street-architect"] .theme-selector-label {
  color: #adaaaa;
}

/* Selection */
[data-theme="street-architect"] ::selection {
  background: #f3ffca;
  color: #516700;
}

@media (max-width: 768px) {
  [data-theme="street-architect"] .content-container {
    padding: 1.5rem;
  }
}