// Atlas Agency design tokens, versie 1.0 (3 oktober 2026). Bron: tokens.json.
$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;