/* ─────────────────────────────────────────────────────────────
   Design tokens — the single source of truth for the visual system.
   These mirror the palette already used across the site (see :root in
   /css/dev-davorperhaj.webflow.css) but with clearer, semantic names.
   New components should reference these instead of hard-coded values.
   ───────────────────────────────────────────────────────────── */
:root {
  /* Brand / accent */
  --color-accent: #5e00ff;
  --color-accent-hover: #7e33ff;
  --color-accent-soft: #9d65ff;

  /* Text */
  --color-text: #11002e;
  --color-text-muted: #b3b0b8;
  --color-text-on-dark: #8977aa;

  /* Surfaces */
  --color-bg: #ffffff;
  --color-bg-dark: #140431;

  /* Type */
  --font-sans: "Lato", system-ui, sans-serif;

  /* Spacing scale (the design's 8px rhythm) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;
  --space-16: 128px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 16px;
  --radius-lg: 32px;
}