/* =========================================================================
   theme.css — Design-Tokens & Basis-Look des Spielplatzes
   Demos verlassen sich auf diese exakten Token-Namen. Nicht umbenennen.
   ========================================================================= */

:root {
  /* --- Flaechen / Hintergrund (dunkel, gestaffelt) --- */
  --bg: #0c0d12;
  --bg-soft: #14161f;
  --surface: #1b1e2b;
  --surface-2: #232739;
  /* Halbtransparente Surface fuer Glas-/Blur-Panels (~60% Alpha) —
     folgt automatisch --surface. */
  --surface-glass: color-mix(in srgb, var(--surface) 60%, transparent);
  /* Dunkleres Glas-Panel auf Basis von --bg-soft (#14161f, ~66% Alpha) —
     fuer Voll-Viewport-Effekte (animierter Grund hinter dem Panel). Ersetzt
     das frueher dort haendisch dup­lizierte rgba(20,22,31,0.x). */
  --bg-glass: color-mix(in srgb, var(--bg-soft) 66%, transparent);

  /* --- Linien --- */
  --border: rgba(255, 255, 255, 0.08);

  /* --- Text (abgestufte Helligkeit) --- */
  --text: #e9ebf2;
  --text-dim: #9aa1b4;
  --text-faint: #5b6178;

  /* --- Akzent (Default; einzelne Demos ueberschreiben --accent) --- */
  --accent: #6c5ce7;
  /* Weiche Akzent-Flaeche (~15% Alpha) — folgt automatisch --accent. */
  --accent-soft: color-mix(in srgb, var(--accent) 15%, transparent);

  /* --- Typografie --- */
  --font-sans: system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;

  /* --- Form & Rhythmus --- */
  --radius: 14px;
  --radius-sm: 8px;
  --gap: 16px;

  /* --- Tiefe: weicher, mehrschichtiger Schatten --- */
  --shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.35),
    0 16px 40px rgba(0, 0, 0, 0.45);

  /* --- Bewegung: eine Transition-Kurve fuer alles --- */
  --t: 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Fallback fuer Browser ohne color-mix(): grob die gleiche Wirkung. */
@supports not (background: color-mix(in srgb, red, blue)) {
  :root {
    --accent-soft: rgba(108, 92, 231, 0.15);
    --surface-glass: rgba(27, 30, 43, 0.6);
    --bg-glass: rgba(20, 22, 31, 0.66);
  }
}

/* =========================================================================
   Basis-Look
   ========================================================================= */

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);

  /* Dezentes Dot-Grid: zwei sehr subtile Punkt-Ebenen, leicht versetzt,
     ueber dem flaechigen Hintergrund. Stoert nie den Vordergrund. */
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    radial-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px;
  background-position: 0 0, 16px 16px;
  background-attachment: fixed;
}

/* --- Typo-Grundlinien --- */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 1rem + 1.4vw, 1.9rem); }
h3 { font-size: 1.25rem; }

p {
  color: var(--text-dim);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--t);
}
a:hover {
  color: var(--text);
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

::selection {
  background: var(--accent-soft);
  color: var(--text);
}

/* =========================================================================
   Sparsame Hilfsklassen — Playground-Look fuer konsistente Demos
   ========================================================================= */

/* Karte: Standard-Container fuer Demo-Inhalte. */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: calc(var(--gap) * 1.25);
}

/* Pill: kleines abgerundetes Label / Tag. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.8em;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1;
}

/* Button: Akzent-Knopf im Playground-Stil. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.6em 1.1em;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 550;
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.btn:active {
  transform: translateY(1px);
}
/* Gefuellte Akzent-Variante. */
.btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn--accent:hover {
  filter: brightness(1.08);
  background: var(--accent);
}