/* ==========================================================================
   Design tokens
   Single source of truth for colour, type, and layout values.
   ========================================================================== */

:root {
  /* Dark surfaces (header, hero, footer) */
  --bg: #0b0c0e;
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.65);
  --text-dim: rgba(255, 255, 255, 0.4);
  --border: rgba(255, 255, 255, 0.12);
  --border-light: rgba(255, 255, 255, 0.06);

  /* Light surfaces (content sections) */
  --surface-light: #ffffff;
  --surface-light-hover: #fafafa;
  --surface-light-media: #f4f4f5;
  --ink: #111215;
  --ink-muted: #52525b;
  --ink-subtle: #71717a;
  --line-faint: #eaeaea;
  --line: #e4e4e7;
  --line-strong: #d4d4d8;

  /* Typography */
  --font-main: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-logo: "Plus Jakarta Sans", sans-serif;

  /* Header text (menu links and brand tag share this style) */
  --nav-font-size: 0.8rem;
  --nav-letter-spacing: 0.05em;
  --nav-color: var(--text-muted);

  /* Layout */
  --container-max: 1300px;
  --gutter: 4vw;
  --header-height: 84px;
  --anchor-gap: 2rem; /* breathing space under the header after a menu jump */

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
}