/* Wauters Detailing design tokens as CSS variables (from the design system's tokens.json).
   Change a value here and every artboard follows. */
:root {
  --bg: #0d0d0f;
  --bg-hero: #12151a;
  --bg-hero-glow: #0d1829;
  --glow-base: #070708;
  --glow-navy: #122443;
  --glow-navy-soft: #132037;
  --glow-haze: #25272d;
  --glow-smoke: #222222;
  --glow-shade: #141419;
  --card: #111113;
  --card-raised: #18181c;
  --card-featured: #0c1220;
  --surface-navy: #0d1520;
  --surface-light: #f0f0f2;
  --border: #2a2a2e;
  --border-card: #1e1e22;
  --white: #ffffff;
  --white-body: #fafbfd;
  --grey-mid: #8f8890;
  --grey-dim: #505055;
  --blue: #3983fe;
  --blue-hover: #5a9bff;
  --blue-dim: rgba(57, 131, 254, 0.12);
  --blue-border: rgba(57, 131, 254, 0.5);
  --success: #4caf50;
  --danger: #e74c3c;

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;

  --grid-line: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-44: 44px;
  --space-48: 48px;
  --space-56: 56px;
  --space-100: 100px;

  --radius-none: 0;
  --radius-swatch: 2px;
  --radius-round: 50%;

  --content-max: 1200px;
  --nav-height: 44px;
  --bullet: 6px;
  --eyebrow-line: 28px;
  --logo-min: 80px;
}