/* GENERATED FILE — do not edit.
 * Source: content/theme.json  ·  Generator: scripts/tokens.mjs
 * Palette: Pure White & Electric Blue; Charcoal dark
 *
 * Every color, font, space, and radius on the AdVio site resolves to one
 * of these. A hex code anywhere else in the CSS is a bug.
 */

:root {
  color-scheme: light;
  /* Color */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-ink: #202124;
  --color-ink-dark: #202124;
  --color-ink-soft: #5f6368;
  --color-accent: #0866ff;
  --color-accent-ink: #ffffff;
  --color-accent-soft: #e8f0fe;
  --color-accent-soft-ink: #174ea6;
  --color-accent-deep: #0052d6;
  --color-line: #dadce0;
  --color-hero-ink: var(--color-ink);
  --color-hero-body: var(--color-ink-soft);
  --color-hero-label: var(--color-ink-soft);
  --color-hero-deep: #ffffff;
  --color-hero-mid: #0866ff;
  --color-page-mid: #ffffff;
  --color-mist-light: #f8f9fa;
  --color-mist: #f1f3f4;
  --color-cream-light: #ffffff;
  --color-bg-deep: #f1f3f4;
  --color-surface-deep: #f8f9fa;
  --color-film: #000000;
  --color-line-on-dark: rgba(32, 33, 36, 0.24);
  --color-fluid: rgba(8, 102, 255, 0.06);
  --color-fluid-light: rgba(8, 102, 255, 0.06);
  --color-copy-halo: var(--color-bg);
  --color-button-bg: #0866ff;
  --color-button-ink: #ffffff;
  --color-theme-icon: var(--color-ink);
  --color-button-hover: #0052d6;

  /* Page and surface backgrounds */
  --gradient-deep: linear-gradient(160deg, var(--color-hero-deep) 0%, var(--color-page-mid) 100%);
  --gradient-fog: none;
  --gradient-glass: linear-gradient(160deg, color-mix(in srgb, var(--color-film) 26%, transparent) 0%, color-mix(in srgb, var(--color-film) 15%, transparent) 100%);
  --gradient-canvas: var(--color-bg);
  --gradient-tint: none;
  --gradient-surface: linear-gradient(160deg, color-mix(in srgb, var(--color-surface) 92%, transparent) 0%, color-mix(in srgb, var(--color-surface) 74%, transparent) 100%);
  --gradient-soft: linear-gradient(168deg, color-mix(in srgb, var(--color-surface) 62%, transparent) 0%, color-mix(in srgb, var(--color-surface) 38%, transparent) 100%);

  /* Type */
  --font-display: Optima, Candara, 'Gill Sans', 'Trebuchet MS', system-ui, -apple-system, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Space scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 5rem;

  /* Page layout */
  --layout-campaign-maxw: 104rem;
  --layout-campaign-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);

  /* Theme control */
  --control-theme-size: 2.75rem;
  --control-theme-icon-size: 1.25rem;
  --control-theme-radius: 50%;
  --control-theme-stroke: 1.8;

  /* Shape and measure */
  --radius: 16px;
  --radius-lg: 20px;
  --maxw: 1120px;
  --header-h: 3.5rem;
  --road-opacity: 1;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* Dark colors */
  --color-bg: #121212;
  --color-surface: #202124;
  --color-ink: #ffffff;
  --color-ink-soft: rgba(255, 255, 255, 0.80);
  --color-accent: #8ab4f8;
  --color-accent-ink: #202124;
  --color-accent-deep: #aecbfa;
  --color-line: #3c4043;
  --color-hero-ink: #ffffff;
  --color-hero-body: rgba(255, 255, 255, 0.80);
  --color-hero-label: rgba(255, 255, 255, 0.62);
  --color-hero-deep: #121212;
  --color-page-mid: #000000;
  --color-line-on-dark: rgba(255, 255, 255, 0.24);
  --color-fluid: rgba(138, 180, 248, 0.12);
  --color-fluid-light: rgba(138, 180, 248, 0.12);
  --color-copy-halo: #000000;
  --color-button-bg: #0866ff;
  --color-button-ink: #ffffff;

  /* Dark gradients */
  --gradient-canvas: var(--gradient-deep);
  --gradient-fog: linear-gradient(to top, color-mix(in srgb, var(--color-hero-ink) 20%, transparent) 0%, color-mix(in srgb, var(--color-hero-ink) 11%, transparent) 38%, color-mix(in srgb, var(--color-hero-ink) 4%, transparent) 70%, transparent 100%);
}