/* APOLLO VPN — design tokens
   Colour space: OKLCH. Every neutral is tinted toward the brand hue (275).
   Strategy: "committed dark" — 82% void, 13% blue/violet structure, 5% neon accent. */

:root {
  color-scheme: dark;

  /* ---------- Surfaces ---------- */
  --void:        oklch(0.062 0.020 276);   /* #03040A */
  --surface-0:   oklch(0.098 0.028 273);   /* #060814 */
  --surface-1:   oklch(0.125 0.030 272);   /* #090B18 */
  --surface-2:   oklch(0.163 0.032 272);
  --surface-3:   oklch(0.215 0.036 272);

  /* Glass */
  --glass:       oklch(0.14 0.030 272 / 0.55);
  --glass-hi:    oklch(0.19 0.036 272 / 0.68);
  --glass-lo:    oklch(0.10 0.026 274 / 0.72);

  /* ---------- Lines ---------- */
  --line:        oklch(0.30 0.035 272 / 0.42);
  --line-soft:   oklch(0.28 0.030 272 / 0.24);
  --line-hi:     oklch(0.46 0.070 276 / 0.55);

  /* ---------- Ink ---------- */
  --ink:         oklch(0.972 0.008 270);
  --ink-2:       oklch(0.800 0.018 272);
  --ink-3:       oklch(0.640 0.024 272);
  --ink-4:       oklch(0.500 0.026 272);

  /* ---------- Accents ---------- */
  --blue:        oklch(0.700 0.180 248);
  --blue-deep:   oklch(0.520 0.170 256);
  --violet:      oklch(0.665 0.235 296);
  --violet-deep: oklch(0.470 0.200 298);
  --cyan:        oklch(0.820 0.135 210);

  --accent:      var(--violet);
  --accent-2:    var(--blue);

  /* Semantic */
  --ok:          oklch(0.760 0.170 162);
  --warn:        oklch(0.820 0.150 82);
  --danger:      oklch(0.660 0.200 22);

  /* Tints */
  --violet-a12:  oklch(0.665 0.235 296 / 0.12);
  --violet-a20:  oklch(0.665 0.235 296 / 0.20);
  --blue-a12:    oklch(0.700 0.180 248 / 0.12);
  --blue-a20:    oklch(0.700 0.180 248 / 0.20);
  --ok-a14:      oklch(0.760 0.170 162 / 0.14);

  /* ---------- Typography ---------- */
  --font-display: "Manrope", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, monospace;

  /* Scale — 1.28 ratio, clamped for fluidity */
  --t-hero:  clamp(2.5rem, 1.1rem + 5.4vw, 5.25rem);
  --t-h1:    clamp(2.1rem, 1.2rem + 3.4vw, 3.75rem);
  --t-h2:    clamp(1.6rem, 1.1rem + 1.9vw, 2.6rem);
  --t-h3:    clamp(1.2rem, 1.0rem + 0.8vw, 1.55rem);
  --t-lead:  clamp(1rem, 0.95rem + 0.35vw, 1.175rem);
  --t-body:  0.9688rem;
  --t-sm:    0.875rem;
  --t-xs:    0.8125rem;
  --t-micro: 0.6875rem;

  /* ---------- Space ---------- */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px; --s-10: 128px; --s-11: 176px;

  --gutter: clamp(20px, 4.2vw, 64px);
  --maxw: 1240px;
  --maxw-narrow: 760px;

  /* ---------- Radii ---------- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* ---------- Elevation ---------- */
  --sh-1: 0 1px 2px oklch(0.02 0 0 / 0.5);
  --sh-2: 0 8px 24px -8px oklch(0.02 0 0 / 0.7);
  --sh-3: 0 24px 64px -20px oklch(0.02 0 0 / 0.85);
  --glow-violet: 0 0 0 1px oklch(0.665 0.235 296 / 0.28), 0 12px 40px -12px oklch(0.665 0.235 296 / 0.55);
  --glow-blue:   0 0 0 1px oklch(0.700 0.180 248 / 0.26), 0 12px 40px -14px oklch(0.700 0.180 248 / 0.50);

  /* ---------- Motion ----------
     Custom curves only. Built-in CSS easings are too weak to read as intentional. */
  --ease-out:     cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-sm:  cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:  cubic-bezier(0.32, 0.72, 0, 1);

  --d-press:  120ms;
  --d-tip:    150ms;
  --d-menu:   200ms;
  --d-modal:  260ms;
  --d-page:   380ms;

  --header-h: 68px;
}

@media (max-width: 760px) {
  :root { --header-h: 60px; }
}