/* 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);
  /* Logo height plus the breathing room either side of it. Grow the two
     together, or the bar crops the mark. */
  --header-height: 162px;

  /* --- 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 page is scaled so that roughly the same amount of design occupies
     the screen whatever its size: small laptops zoom out to fit more in,
     large displays zoom back up so the site does not shrink into the middle.

     The ladder rises with viewport width, starting at 0.56 where the desktop
     layout begins and reaching 0.98 on 4K. The first step is deliberately
     aligned with the layout breakpoint (801px) so scale and layout switch
     together and no width falls between them.

     Phones and tablets stay 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, .hero, .admin__layout and .signin. */
  --page-zoom: 1;
}

/* Small laptops, and larger screens running OS display scaling. */
@media (min-width: 801px) {
  :root {
    --page-zoom: 0.56;
  }
}

@media (min-width: 1280px) {
  :root {
    --page-zoom: 0.63;
  }
}

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

/* 1080p and above: scale back up as the screen grows. */
@media (min-width: 1920px) {
  :root {
    --page-zoom: 0.84;
  }
}

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

@media (min-width: 3840px) {
  :root {
    --page-zoom: 0.98;
  }
}

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