/*
 * BCC-Kostelnik – zentrale Design-Datei
 * Schritt 1: Design-Tokens und vorsichtige gemeinsame Oberflächenregeln.
 * Die bestehende Startseitenanimation, der Viewer und das Tailwind-Layout
 * bleiben unangetastet. Farben können künftig hier zentral angepasst werden.
 */

:root {
  color-scheme: dark;
  --bcc-bg: #020617;
  --bcc-surface: #0f172a;
  --bcc-surface-raised: #111c31;
  --bcc-border: #263449;
  --bcc-text: #e2e8f0;
  --bcc-text-muted: #94a3b8;
  --bcc-accent: #22d3ee;
  --bcc-accent-strong: #6366f1;
  --bcc-success: #10b981;
  --bcc-danger: #f43f5e;
  --bcc-radius-sm: 0.5rem;
  --bcc-radius-md: 0.875rem;
  --bcc-radius-lg: 1.125rem;
  --bcc-shadow-card: 0 12px 32px rgba(2, 6, 23, 0.22);
  --bcc-focus-ring: 0 0 0 3px rgba(34, 211, 238, 0.28);
}

html {
  scroll-behavior: smooth;
  background: var(--bcc-bg);
}

body {
  color: var(--bcc-text);
  background-color: var(--bcc-bg);
}

::selection {
  color: #fff;
  background: var(--bcc-accent-strong);
}

/* Einheitliche, sichtbare Tastaturfokusse */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--bcc-accent);
  outline-offset: 3px;
  box-shadow: var(--bcc-focus-ring);
}

/* Dezente, konsistente Oberflächen – keine Änderungen an Animation/Viewer */
header {
  border-color: var(--bcc-border);
}

footer {
  border-color: var(--bcc-border);
}

button,
input,
select,
textarea {
  accent-color: var(--bcc-accent-strong);
}

input,
select,
textarea {
  max-width: 100%;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

/* Mobile: verhindern, dass lange Beschriftungen das Layout sprengen */
@media (max-width: 640px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/* Nutzerwunsch: Animationen bei reduzierter Bewegung respektieren.
   Bestehende CAD-Animationen haben bereits eigene Regeln; diese Ergänzung
   betrifft vor allem allgemeine Scroll- und Übergangseffekte. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Helles Theme – die vorhandenen html.light-mode-Regeln bleiben maßgeblich. */
html.light-mode {
  color-scheme: light;
  --bcc-bg: #f8fafc;
  --bcc-surface: #ffffff;
  --bcc-surface-raised: #f1f5f9;
  --bcc-border: #e2e8f0;
  --bcc-text: #0f172a;
  --bcc-text-muted: #64748b;
}

/* =========================================
   BCC – zentrale Farben für die Startseite
   ========================================= */

/* Seitenhintergrund und Grundtext */
body {
    background-color: var(--bcc-bg) !important;
    color: var(--bcc-text) !important;
}

/* Häufig verwendete dunkle Flächen */
.bg-slate-950 {
    background-color: var(--bcc-bg) !important;
}

.bg-slate-900 {
    background-color: var(--bcc-surface) !important;
}

.bg-slate-900\/90 {
    background-color: var(--bcc-surface) !important;
}

.bg-slate-900\/50,
.bg-slate-900\/40 {
    background-color: var(--bcc-surface-raised) !important;
}

/* Rahmen */
.border-slate-800,
.border-slate-700 {
    border-color: var(--bcc-border) !important;
}

/* Zentrale Akzentfarben */
.bg-indigo-600 {
    background-color: var(--bcc-accent-strong) !important;
}

.hover\:bg-indigo-500:hover {
    background-color: var(--bcc-accent) !important;
}

.hover\:text-indigo-400:hover,
.hover\:text-indigo-300:hover {
    color: var(--bcc-accent) !important;
}

/* Tastaturfokus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline-color: var(--bcc-accent);
}