/* ================================================================
   DNBX.de — variables.css
   Colors, Typography, Themes, Design Tokens
   ================================================================ */

:root {
  /* Typography */
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* Light Theme */
  --bg: #fafafa;
  --bg-secondary: #f0f0f0;
  --fg: #0a0a0a;
  --fg-secondary: #3a3a3a;
  --muted: #737373;
  --border: rgba(0,0,0,0.07);
  --border-hover: rgba(0,0,0,0.14);
  --card-bg: #ffffff;
  --card-bg-rgb: 255,255,255;
  --nav-bg-rgb: 250,250,250;
  --overlay-bg: rgba(0,0,0,0.45);

  /* Accent */
  --accent-rgb: 22,163,74;
  --accent: rgb(var(--accent-rgb));
  --accent-glow: rgba(var(--accent-rgb), 0.15);

  /* Shape */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.08);

  /* Motion */
  --transition-fast: 0.12s cubic-bezier(0.4,0,0.2,1);
  --transition: 0.18s cubic-bezier(0.4,0,0.2,1);

  /* Layout */
  --nav-height: 64px;
}

[data-theme="dark"] {
  --bg: #0a0a0a;
  --bg-secondary: #0f0f11;
  --fg: #f8f8f8;
  --fg-secondary: #c4c4c8;
  --muted: #8a8a94;
  --border: rgba(255,255,255,0.09);
  --border-hover: rgba(255,255,255,0.18);
  --card-bg: #161618;
  --card-bg-rgb: 22,22,24;
  --nav-bg-rgb: 10,10,10;
  --overlay-bg: rgba(0,0,0,0.72);
  --accent-rgb: 34,197,94;
  --accent: rgb(var(--accent-rgb));
  --accent-glow: rgba(var(--accent-rgb), 0.14);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.6);
}

/* ---------- Base Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
strong { font-weight: 700; }
::selection { background: rgba(var(--accent-rgb), 0.25); color: inherit; }

/* ---------- Custom Scrollbar ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--border-hover) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 4px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ---------- Theme Transition ---------- */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition:
    background-color 0.4s ease,
    color 0.4s ease,
    border-color 0.4s ease,
    fill 0.4s ease,
    stroke 0.4s ease,
    box-shadow 0.4s ease !important;
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; }
  .is-loading .header,
  .is-loading .hero-title,
  .is-loading .hero-subtitle,
  .is-loading .hero-note,
  .is-loading .scroll-indicator { opacity: 1; }
}