:root {
  /* ── Brand palette */
  --black:      #0b0b0b;
  --off-white:  #e6e6e6;
  --shock-red:  #ff2d2d;
  --dark-grey:  #2a2a2a;
  --mid-grey:   #6e6e6e;

  /* ── Typography */
  --font-display: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
  --font-body:    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Type scale */
  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.875rem;   /*  14px */
  --text-base: 1rem;       /*  16px */
  --text-lg:   1.25rem;    /*  20px */
  --text-xl:   1.5rem;     /*  24px */
  --text-2xl:  2rem;       /*  32px */
  --text-3xl:  3rem;       /*  48px */
  --text-4xl:  4.5rem;     /*  72px */
  --text-5xl:  7rem;       /* 112px */

  /* Letter spacing */
  --tracking-normal:  0.05em;
  --tracking-wide:    0.1em;
  --tracking-wider:   0.2em;
  --tracking-widest:  0.35em;

  /* ── Layout */
  --container-max:  1440px;
  --container-wide: 1200px;
  --container-text: 680px;

  --gutter:       1.5rem;
  --gutter-lg:    3rem;

  --section-gap:       6rem;
  --section-gap-sm:    3rem;

  /* ── UI */
  --border-subtle: 1px solid var(--dark-grey);
  --focus-offset:  3px;

  /* ── Z-index layers */
  --z-header:  100;
  --z-overlay: 200;
}

@media (min-width: 1024px) {
  :root {
    --gutter:     3rem;
    --section-gap: 9rem;
  }
}