/* ==========================================================================
   North — Design tokens
   Every colour, font, size and spacing value lives here.
   Change the brand in one place; everything else reads from these.
   ========================================================================== */

:root {
  /* Brand colour */
  --red:          #ad0000;   /* North red — primary brand colour */
  --red-deep:     #870000;   /* hover / pressed */
  --red-tint:     #f6e5e3;   /* very light wash of red */
  --red-bright:   #ff5a4f;   /* red for text on ink; #ad0000 is too dark there */

  /* Neutrals — warm, like snow and slate */
  --paper:        #f7f5f2;   /* page background */
  --paper-2:      #eeeae4;   /* alternate section background */
  --ink:          #141312;   /* body text, dark sections */
  --ink-2:        #2a2826;
  --muted:        #5c5853;   /* secondary text on paper */
  --muted-dark:   #a39e98;   /* secondary text on ink */
  --line:         rgba(20, 19, 18, 0.14);
  --line-dark:    rgba(255, 255, 255, 0.16);
  --white:        #ffffff;

  /* Type */
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid type scale */
  --fs-xs:   0.8125rem;                          /* 13px — mono labels */
  --fs-sm:   0.9375rem;                          /* 15px */
  --fs-base: 1.0625rem;                          /* 17px */
  --fs-md:   clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-lg:   clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --fs-xl:   clamp(2.25rem, 1.6rem + 2.8vw, 4rem);
  --fs-hero: clamp(2.75rem, 1.5rem + 5.4vw, 6.5rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-pad: clamp(4rem, 3rem + 5vw, 8rem);

  /* Layout */
  --container: 1200px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --header-h: 72px;

  /* Misc */
  --radius: 4px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 200ms;
}