/* Design tokens — the single source of truth for colour, type and spacing.
   Nothing else in the stylesheet set should contain a raw hex value or a
   hard-coded pixel size that belongs here. */

:root {
  /* --- Brand palette --------------------------------------------------- */
  --color-blue: #2f80ed;
  --color-blue-hover: #1c6fdb;
  --color-blue-active: #1660c4;
  --color-blue-soft: rgba(47, 128, 237, 0.14);

  /* --- Neutrals --------------------------------------------------------- */
  --color-ink: #14181d;
  --color-ink-muted: #5f6b78;
  --color-ink-faint: #8b96a3;

  --color-surface: #ffffff;
  --color-surface-alt: #f1f3f6;
  --color-surface-sunken: #e7eaee;

  --color-dark: #0d1218;
  --color-dark-alt: #131a22;
  --color-dark-line: rgba(255, 255, 255, 0.09);
  --color-on-dark: #ffffff;
  --color-on-dark-muted: #b3bdc9;

  --color-border: #d8dde3;
  --color-danger: #c0392b;
  --color-success: #1e7e57;

  /* --- Typography ------------------------------------------------------- */
  --font-sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans",
    system-ui, -apple-system, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;
  --text-4xl: 3.75rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 800;

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.6;

  --tracking-wide: 0.06em;
  --tracking-wider: 0.09em;

  /* --- Spacing 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: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;

  /* --- Layout ----------------------------------------------------------- */
  --container-max: 1180px;
  --container-pad: var(--space-5);
  --header-height: 84px;

  /* --- Shape and depth --------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --shadow-card: 0 18px 48px rgba(10, 18, 28, 0.16);
  --shadow-soft: 0 2px 10px rgba(10, 18, 28, 0.08);

  --transition-fast: 140ms ease;
  --transition-base: 220ms ease;

  --focus-ring: 3px solid var(--color-blue);
  --focus-offset: 2px;

  /* --- Page zoom --------------------------------------------------------
     The whole page is scaled down on ordinary desktop screens so more of it
     is visible at once, and returns to full size on 2K and wider displays
     where there is room for it.

     Phones and tablets are deliberately left at 1: scaling body text below
     roughly 16px there costs legibility rather than buying screen space.

     Anything sized against the viewport (vh) must be divided by this value
     to compensate — see .page and .hero. */
  --page-zoom: 1;
}

@media (min-width: 1024px) {
  :root {
    --page-zoom: 0.7;
  }
}

@media (min-width: 2560px) {
  :root {
    --page-zoom: 1;
  }
}

@media (max-width: 720px) {
  :root {
    --text-3xl: 2.125rem;
    --text-4xl: 2.5rem;
    --text-2xl: 1.75rem;
    --header-height: 72px;
    --container-pad: var(--space-4);
  }
}