/* ==========================================
   STObonus — Premium Dark Design Tokens
   Inspired by BMW / Audi European Service Centers
   ========================================== */

:root {
  /* ── Full Dark Premium Palette ──────────── */
  --bg: #0B0F19;
  --bg-card: #131825;
  --bg-alt: #0F1320;
  --bg-dark: #070A12;
  --bg-dark-card: #121826;
  --bg-dark-alt: #1A2033;
  --bg-elevated: #1A2035;
  --bg-surface: rgba(255, 255, 255, .03);

  --text: #E8ECF4;
  --text-muted: #7B8698;
  --text-light: rgba(255, 255, 255, .7);
  --text-dim: rgba(255, 255, 255, .4);

  --accent: #2563EB;
  --accent-hover: #3B82F6;
  --accent-light: rgba(37, 99, 235, .12);
  --accent-rgb: 37, 99, 235;
  --accent-soft: rgba(37, 99, 235, .06);
  --accent-glow: rgba(37, 99, 235, .2);

  --gold: #C9A84C;
  --gold-light: rgba(201, 168, 76, .1);

  --border: rgba(255, 255, 255, .07);
  --border-hover: rgba(255, 255, 255, .12);
  --border-light: rgba(255, 255, 255, .05);

  /* ── Shadows — dark mode ─────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .2);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, .25);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, .3);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .1);
  --shadow-glow: 0 0 40px rgba(37, 99, 235, .15);

  /* ── Typography — Premium European feel ──── */
  --font: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size: 16px;
  --line-height: 1.65;
  --letter-tight: -0.025em;
  --letter-normal: -0.01em;

  /* ── Border radius — refined ────────── */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* ── Layout — breathing room ────────── */
  --container: 1200px;
  --gap: 28px;
  --section-py: 100px;
  --header-h: 76px;

  /* ── Transition — smoother ───────────── */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --speed: .3s;
  --speed-slow: .5s;
}