/* Basis: Farben, Reset, Typografie */

:root {
  --bg: #0f1115;
  --bg-raised: #171a22;
  --bg-card: #1d212c;
  --line: #282c37;
  --line-light: rgba(255, 255, 255, 0.08);
  --text: #f0f2f7;
  --text-dim: #8b91a2;
  --accent: #f5c518;
  --accent-dim: #735c0c;
  --accent-glow: rgba(245, 197, 24, 0.2);
  --watched: #38a169;
  --watched-glow: rgba(56, 161, 105, 0.2);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f5f4ef;
    --bg-raised: #ffffff;
    --bg-card: #eae7dc;
    --line: #dcd7c9;
    --line-light: rgba(0, 0, 0, 0.06);
    --text: #1a1a1a;
    --text-dim: #6c695c;
    --accent: #c49000;
    --accent-dim: #faecc7;
    --accent-glow: rgba(196, 144, 0, 0.15);
    --watched: #2f855a;
    --watched-glow: rgba(47, 133, 90, 0.15);
  }
}

:root[data-theme="light"] {
  --bg: #f5f4ef;
  --bg-raised: #ffffff;
  --bg-card: #eae7dc;
  --line: #dcd7c9;
  --line-light: rgba(0, 0, 0, 0.06);
  --text: #1a1a1a;
  --text-dim: #6c695c;
  --accent: #c49000;
  --accent-dim: #faecc7;
  --accent-glow: rgba(196, 144, 0, 0.15);
  --watched: #2f855a;
  --watched-glow: rgba(47, 133, 90, 0.15);
}

* { box-sizing: border-box; }
html { height: 100%; }
body { min-height: 100%; display: flex; flex-direction: column; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.display { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.03em; }