/* ════════════════════════════════════════════════════════════════════
   DESIGN TOKENS — Dennis Kasper · denniskasper.de
   Eine Quelle der Wahrheit für Farben, Typografie, Abstände, Effekte
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Basis: warmes Anthrazit statt totem Grau ── */
  --bg:           #161513;
  --bg-soft:      #1d1c19;
  --bg-elevated:  #242220;
  --bg-elevated-2:#2c2925;

  /* ── Text ── */
  --text:         #f3efe8;
  --text-soft:    #c9c2b6;
  --text-muted:   #8c8478;
  --text-faint:   #5c564c;

  /* ── Primärakzent: warmes Gold (bestehend) ── */
  --gold:         #c9a868;
  --gold-bright:  #e0c084;
  --gold-dim:     rgba(201,168,104,0.12);
  --gold-mid:     rgba(201,168,104,0.24);
  --gold-line:    rgba(201,168,104,0.32);

  /* ── Sekundärakzent: gedämpftes Terrakotta — für Wärme & Leben ── */
  --rust:         #c2704d;
  --rust-bright:  #d98a64;
  --rust-dim:     rgba(194,112,77,0.12);
  --rust-line:    rgba(194,112,77,0.30);

  /* ── Tertiärakzent: gedecktes Salbeigrün — für "gesund/lebendig" Momente ── */
  --sage:         #7c9473;
  --sage-bright:  #97b08c;
  --sage-dim:     rgba(124,148,115,0.12);
  --sage-line:    rgba(124,148,115,0.30);

  /* ── Funktional ── */
  --border:       rgba(243,239,232,0.08);
  --border-mid:   rgba(243,239,232,0.14);
  --border-bright:rgba(243,239,232,0.22);
  --danger:       #d4685c;
  --success:      #7c9473;

  /* ── Radii ── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* ── Schatten — geben Tiefe statt Flachheit ── */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.20);
  --shadow-md:  0 8px 28px rgba(0,0,0,0.30);
  --shadow-lg:  0 24px 64px -12px rgba(0,0,0,0.45);
  --shadow-gold-glow: 0 0 0 1px var(--gold-line), 0 12px 40px -8px rgba(201,168,104,0.25);

  /* ── Typografie ── */
  --font-serif: 'DM Serif Display', Georgia, serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ── Bewegung ── */
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast:    180ms;
  --dur-base:    320ms;
  --dur-slow:    560ms;

  /* ── Layout ── */
  --container-max: 1140px;
  --container-narrow: 760px;
  --nav-height: 68px;
}

/* ════════════════════════════════════════════════════════════════════
   RESET & BASE
   ════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  position: relative;
}

/* Subtle living background texture — radial glows that breathe */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 800px 600px at 15% -10%, rgba(201,168,104,0.07), transparent 60%),
    radial-gradient(ellipse 700px 500px at 110% 30%, rgba(194,112,77,0.05), transparent 55%),
    radial-gradient(ellipse 600px 500px at 0% 80%, rgba(124,148,115,0.04), transparent 55%);
}

main, nav, footer { position: relative; z-index: 1; }

a { color: inherit; }
img { max-width: 100%; display: block; }

::selection {
  background: var(--gold-mid);
  color: var(--text);
}

/* Custom scrollbar — small detail that adds polish */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg-elevated-2); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}