/* base.css – Design System & Dark/Light Variables */

/* Import Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

:root {
  /* Light theme – reines Weiß */
  --color-bg: hsl(0, 0%, 100%);
  --color-surface: rgba(255, 255, 255, 0.95);
  --color-primary: hsl(220, 80%, 55%);
  --color-primary-hover: hsl(220, 80%, 43%);
  --color-text: hsl(0, 0%, 12%);
  --color-muted: hsl(0, 0%, 42%);
  --color-glass: rgba(255, 255, 255, 0.85);
  --color-border: rgba(0, 0, 0, 0.10);
  --color-card: rgba(248, 248, 248, 0.95);
  --color-danger: hsl(0, 72%, 51%);
  --color-danger-hover: hsl(0, 72%, 41%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: hsl(0, 0%, 9%);
    --color-surface: hsl(0, 0%, 14%);
    --color-primary: hsl(220, 70%, 62%);
    --color-primary-hover: hsl(220, 70%, 52%);
    --color-text: hsl(0, 0%, 88%);
    --color-muted: hsl(0, 0%, 52%);
    --color-glass: hsl(0, 0%, 16%);
    --color-border: rgba(255, 255, 255, 0.07);
    --color-card: hsl(0, 0%, 16%);
    --color-danger: hsl(0, 75%, 60%);
    --color-danger-hover: hsl(0, 75%, 50%);
  }
}

/* Manuelle Theme-Klassen */
html.dark {
  --color-bg: hsl(0, 0%, 9%);
  --color-surface: hsl(0, 0%, 14%);
  --color-primary: hsl(220, 70%, 62%);
  --color-primary-hover: hsl(220, 70%, 52%);
  --color-text: hsl(0, 0%, 88%);
  --color-muted: hsl(0, 0%, 52%);
  --color-glass: hsl(0, 0%, 16%);
  --color-border: rgba(255, 255, 255, 0.07);
  --color-card: hsl(0, 0%, 16%);
  --color-danger: hsl(0, 75%, 60%);
  --color-danger-hover: hsl(0, 75%, 50%);
}
html.light {
  --color-bg: hsl(0, 0%, 100%);
  --color-surface: rgba(255, 255, 255, 0.95);
  --color-primary: hsl(220, 80%, 50%);
  --color-primary-hover: hsl(220, 80%, 40%);
  --color-text: hsl(0, 0%, 8%);
  --color-muted: hsl(0, 0%, 30%);
  --color-glass: rgba(255, 255, 255, 0.85);
  --color-border: rgba(0, 0, 0, 0.10);
  --color-card: rgba(248, 248, 248, 0.95);
  --color-danger: hsl(0, 72%, 51%);
  --color-danger-hover: hsl(0, 72%, 41%);
}

/* Global resets and base styles */
:root {
  --sidebar-width: 230px;
  --sidebar-collapsed-width: 60px;
  --input-height: 42px;
  --max-content-width: 1400px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: 'Inter', sans-serif;
  background-color: var(--color-bg);
  background-image: none;
  color: var(--color-text);
  line-height: 1.5;
}

/* Dezenter Gradient nur im Dunkelmodus */
html.dark body {
  background-image:
    radial-gradient(ellipse at 70% 10%, hsla(220, 70%, 50%, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 5% 90%, hsla(260, 70%, 50%, 0.07) 0%, transparent 50%);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-primary-hover);
}

/* Smooth scroll for in‑page navigation */
html {
  scroll-behavior: smooth;
}