/* Atlas Corporation design tokens. GEGENEREERD door Style Dictionary uit tokens/src (canon: atlas_corp_design).
   Niet met de hand bewerken. Kern = atlascorporation.org (donker). Sub-merken onder [data-atlas-brand]. */
:root {
  --atlas-color-bg-0: #05080f;
  --atlas-color-bg-1: #080c18;
  --atlas-color-bg-2: #0c1428;
  --atlas-color-panel-2: #0a1224;
  --atlas-color-panel-3: #0b1222;
  --atlas-color-panel-4: #0f1a33;
  --atlas-color-panel-base: #080e1c;
  --atlas-color-border-base: rgba(255,255,255,.08);
  --atlas-color-border-strong: rgba(255,255,255,.14);
  --atlas-color-border-brand: rgba(47,140,255,.35);
  --atlas-color-border-hairline: rgba(255,255,255,.06);
  --atlas-color-text-1: rgba(255,255,255,.92);
  --atlas-color-text-2: rgba(255,255,255,.72);
  --atlas-color-text-3: rgba(255,255,255,.6);
  --atlas-color-text-4: rgba(255,255,255,.62);
  --atlas-color-brand-400: #4EA0FF;
  --atlas-color-brand-500: #1F6FE0;
  --atlas-color-brand-600: #145ED2;
  --atlas-color-brand-dark: #0b3d78;
  --atlas-color-brand-cc4: #1F6FEB;
  --atlas-color-brand-glow: #2E80FF;
  --atlas-color-gold-base: #D4A24C;
  --atlas-color-gold-light: #E8C46A;
  --atlas-color-gold-dim: rgba(212,162,76,.35);
  --atlas-color-gold-bg: rgba(212,162,76,.08);
  --atlas-color-state-success: #2EE59D;
  --atlas-color-state-warning: #F1D38C;
  --atlas-color-state-danger: #FF5C7A;
  --atlas-color-state-info: #77A7FF;
  --atlas-color-extra-orange: #FF7A00;
  --atlas-color-extra-eu-blue: #003399;
  --atlas-color-extra-circuit-glow: rgba(46,128,255,.22);
  --atlas-color-extra-panel-hover: rgba(46,128,255,.06);
  --atlas-gradient-cta: linear-gradient(108deg,#1A6AEE 0%,#2E80FF 50%,#2565CC 100%);
  --atlas-gradient-glass: linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  --atlas-gradient-footer-line: linear-gradient(90deg,transparent,#1F6FE0 30%,#4EA0FF 50%,#1F6FE0 70%,transparent);
  --atlas-gradient-aurora: radial-gradient(900px 500px at 15% 8%,rgba(46,128,255,.22),transparent 60%),radial-gradient(700px 500px at 85% 18%,rgba(20,94,210,.18),transparent 62%),radial-gradient(600px 400px at 45% 85%,rgba(58,160,255,.15),transparent 65%);
  --atlas-cta-border: rgba(78,160,255,.4);
  --atlas-cta-glow: rgba(46,128,255,.28);
  --atlas-font-family-sans: "Atlas DM Sans", "DM Sans", "Atlas Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --atlas-font-family-display: "Atlas Space Grotesk", "Space Grotesk", "Atlas DM Sans", sans-serif;
  --atlas-font-family-mono: "Atlas JetBrains Mono", "JetBrains Mono", "Cascadia Code", monospace;
  --atlas-font-weight-regular: 400;
  --atlas-font-weight-medium: 500;
  --atlas-font-weight-semibold: 600;
  --atlas-font-weight-bold: 700;
  --atlas-font-weight-extrabold: 800;
  --atlas-font-weight-black: 900;
  --atlas-font-tracking-hero: -0.035em;
  --atlas-font-tracking-heading: -0.015em;
  --atlas-font-tracking-wide: .12em;
  --atlas-font-tracking-wider: .13em;
  --atlas-font-tracking-kicker: .19em;
  --atlas-font-tracking-footer: .14em;
  --atlas-font-tracking-table: .08em;
  --atlas-font-size-display-xl: 64px;
  --atlas-font-size-display-lg: 48px;
  --atlas-font-size-display-md: 34px;
  --atlas-font-size-h1: 32px;
  --atlas-font-size-h2: 24px;
  --atlas-font-size-h3: 18px;
  --atlas-font-size-h4: 15px;
  --atlas-font-size-body-lg: 18px;
  --atlas-font-size-body: 16px;
  --atlas-font-size-body-sm: 14px;
  --atlas-font-size-label: 13px;
  --atlas-font-size-kicker: 12px;
  --atlas-font-size-code: 13px;
  --atlas-font-size-eyebrow: 11px;
  --atlas-font-line-display-xl: 1.02;
  --atlas-font-line-display-lg: 1.05;
  --atlas-font-line-display-md: 1.1;
  --atlas-font-line-h1: 1.15;
  --atlas-font-line-h2: 1.25;
  --atlas-font-line-h3: 1.3;
  --atlas-font-line-h4: 1.4;
  --atlas-font-line-body-lg: 1.65;
  --atlas-font-line-body: 1.65;
  --atlas-font-line-body-sm: 1.6;
  --atlas-font-line-label: 1.4;
  --atlas-font-line-kicker: 1.3;
  --atlas-font-line-code: 1.55;
  --atlas-font-fluid-hero-h1: clamp(42px, 4.6vw, 78px);
  --atlas-font-fluid-section-title: clamp(30px, 4vw, 52px);
  --atlas-font-fluid-lead: clamp(15px, 1.5vw, 18px);
  --atlas-space-1: 4px;
  --atlas-space-2: 8px;
  --atlas-space-3: 12px;
  --atlas-space-4: 16px;
  --atlas-space-5: 24px;
  --atlas-space-6: 32px;
  --atlas-space-7: 48px;
  --atlas-space-8: 64px;
  --atlas-space-9: 96px;
  --atlas-space-10: 120px;
  --atlas-radius-input: 4px;
  --atlas-radius-card: 5px;
  --atlas-radius-modal: 6px;
  --atlas-radius-cta: 8px;
  --atlas-radius-pill: 9999px;
  --atlas-shadow-sm: 0 8px 22px rgba(0,0,0,.36);
  --atlas-shadow-md: 0 16px 44px rgba(0,0,0,.48);
  --atlas-shadow-lg: 0 20px 60px rgba(0,0,0,.55);
  --atlas-shadow-glow: 0 0 0 3px rgba(46,128,255,.22);
  --atlas-shadow-glow-lg: 0 0 20px rgba(46,128,255,.3);
  --atlas-shadow-btn: 0 0 18px rgba(46,128,255,.28);
  --atlas-shadow-btn-hover: 0 0 28px rgba(46,128,255,.45);
  --atlas-layout-container: 1180px;
  --atlas-layout-section-padding: 96px;
  --atlas-breakpoint-xs: 480px;
  --atlas-breakpoint-sm: 640px;
  --atlas-breakpoint-md: 768px;
  --atlas-breakpoint-lg: 1024px;
  --atlas-breakpoint-xl: 1280px;
}

[data-atlas-brand="works"] {
  --works-color-navy-50: #F4F7FB;
  --works-color-navy-500: #2E80FF;
  --works-color-navy-600: #2456A0;
  --works-color-navy-700: #1B477F;
  --works-color-navy-800: #143560;
  --works-color-navy-900: #0E2A47;
  --works-color-navy-base: #0b1f4d;
  --works-color-navy-hi: #13346b;
  --works-color-blue-600: #2f6fe0;
  --works-color-blue-base: #3B82F6;
  --works-color-blue-logo: #0066CC;
  --works-color-ink-1: #0E1726;
  --works-color-ink-2: #2A3648;
  --works-color-ink-3: #5B6678;
  --works-color-ink-4: #8A95A6;
  --works-color-ink-deep: #0a1530;
  --works-color-line-1: #E6EBF2;
  --works-color-line-2: #D4DDEA;
  --works-color-paper: #FFFFFF;
  --works-color-cream: #FAFBFD;
  --works-color-orange: #E76A1E;
  --works-color-green: #1F8A52;
  --works-font-sans: Inter, sans-serif;
  --works-font-display: "Space Grotesk", sans-serif;
  --works-font-mono: "JetBrains Mono", monospace;
  --works-shadow-card: 0 1px 0 rgba(14,42,71,.04), 0 4px 12px rgba(14,42,71,.04);
}

[data-atlas-brand="agency"] {
  --agency-color-bg: #FBFDFF;
  --agency-color-ink: #0A1628;
  --agency-color-ink-80: rgba(10,22,40,.78);
  --agency-color-ink-60: rgba(10,22,40,.6);
  --agency-color-line: rgba(10,22,40,.08);
  --agency-color-surface: #F1F6FC;
  --agency-color-surface-2: #E6F0FA;
  --agency-color-blue: #0EA5FF;
  --agency-color-blue-deep: #0284c7;
  --agency-color-blue-bright: #5EE0FF;
  --agency-color-blue-text: #0369a1;
  --agency-color-warm: #E76A1E;
  --agency-color-green: #1F8A52;
  --agency-font-display: "Inter Tight", sans-serif;
  --agency-font-sans: Inter, sans-serif;
  --agency-font-mono: "JetBrains Mono", monospace;
  --agency-ease: cubic-bezier(.2,.8,.2,1);
  --agency-container: 1280px;
}

[data-atlas-brand="pos"] {
  --pos-color-primary: #0EA5FF;
  --pos-color-secondary: #0A1628;
  --pos-color-link-hover: #5EE0FF;
  --pos-color-muted: #9DB4CC;
  --pos-color-favicon-navy: #0A1628;
  --pos-color-favicon-amber: #F59E0B;
  --pos-color-tile: #0E1626;
  --pos-color-tile-blue: #3B9EFF;
  --pos-color-tile-amber: #FFB347;
}

[data-atlas-brand="academy"] {
  --academy-color-bg: #080c18;
  --academy-color-surface: #0b1222;
  --academy-color-surface-2: #0f1a33;
  --academy-color-surface-3: #15223f;
  --academy-color-border: rgba(255,255,255,.09);
  --academy-color-border-strong: rgba(255,255,255,.16);
  --academy-color-brand: #1F6FE0;
  --academy-color-brand-dark: #1858B8;
  --academy-color-brand-light: #4EA0FF;
  --academy-color-link: #6CB2FF;
  --academy-color-link-hover: #A9D2FF;
  --academy-color-cyan: #5EE0FF;
  --academy-color-gold: #D4A24C;
  --academy-color-gold-light: #E8C46A;
  --academy-color-green: #2EE59D;
  --academy-color-red: #FF6B6B;
  --academy-color-focus-ring: rgba(94,224,255,.55);
  --academy-font-sans: "DM Sans", sans-serif;
  --academy-font-display: "Space Grotesk", sans-serif;
}

[data-atlas-brand="backend"] {
  --backend-color-navbar-from: #0c1626;
  --backend-color-navbar-to: #1b3a5b;
  --backend-color-navbar-text: #eaf0f7;
  --backend-color-primary: #2f6fe0;
  --backend-color-primary-hover: #2560c8;
  --backend-color-heading: #1b3a5b;
}