/* Atlas Agency design tokens, versie 1.0 (3 oktober 2026). Bron: tokens.json, gemeten op atlasagency.nl. */
:root {
  --ag-color-blue-deep: #0284C7;
  --ag-color-blue: #0EA5FF;
  --ag-color-mist: #EEF5FC;
  --ag-color-white: #FFFFFF;
  --ag-color-ink: #0A1628;
  --ag-color-ink-2: #0F2240;
  --ag-color-blue-text: #0272B0;
  --ag-color-blue-hover: #38B6FF;
  --ag-color-logo-blue: #0066CC;
  --ag-color-line: rgba(10, 22, 40, 0.10);
  --ag-color-muted: rgba(10, 22, 40, 0.68);
  --ag-color-on-ink-muted: rgba(255, 255, 255, 0.78);
  --ag-color-icon-tile: rgba(14, 165, 255, 0.16);
  --ag-font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --ag-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ag-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ag-radius-card: 20px;
  --ag-radius-media: 16px;
  --ag-radius-icon-tile: 14px;
  --ag-radius-browser: 12px;
  --ag-radius-input: 12px;
  --ag-radius-pill: 999px;
  --ag-shadow-card: 0 1px 2px rgba(10, 22, 40, 0.04), 0 10px 30px -12px rgba(10, 22, 40, 0.12);
  --ag-shadow-card-hover: 0 2px 4px rgba(10, 22, 40, 0.05), 0 24px 48px -16px rgba(10, 22, 40, 0.22);
  --ag-shadow-btn-primary: 0 8px 24px -8px rgba(14, 165, 255, 0.6);
  --ag-shadow-media: 0 30px 60px -24px rgba(10, 22, 40, 0.35);
  --ag-shadow-browser: 0 24px 60px -12px rgba(10, 22, 40, 0.28);
  --ag-space-container: 1140px;
  --ag-space-gutter: 15px;
  --ag-space-section: 96px;
  --ag-space-section-sm: 64px;
  --ag-space-section-cta: 112px;
  --ag-space-hero: 128px;
  --ag-space-head-gap: 48px;
  --ag-space-head-max: 46rem;
  --ag-motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ag-motion-fast: 0.18s;
  --ag-motion-base: 0.25s;
}