/* ==========================================================================
   DESIGN TOKENS
   This file holds every colour, font, spacing and layout value used across
   the site. Change a value here and it updates everywhere it's used.
   ========================================================================== */

:root {

  /* Colour - neutrals (dark theme) */
  --colour-canvas: #0E0D0D;
  --colour-surface: #191716;
  --colour-ink: #F5F1EA;
  --colour-ink-soft: #B0AAA1;
  --colour-line: #2C2825;

  /* Colour - maroon scale (accent identity) */
  --colour-maroon-950: #241115;
  --colour-maroon-900: #34161D;
  --colour-maroon-800: #4A1C28;
  --colour-maroon-700: #652235;
  --colour-maroon-600: #7D2D44;
  --colour-maroon-500: #96405A;
  --colour-maroon-400: #B5647C;
  --colour-maroon-300: #D08FA0;
  --colour-maroon-200: #E8C6CF;
  --colour-maroon-100: #F5E6EA;

  /* On a dark canvas, lighter maroon tones give the contrast needed for
     text and links. Darker maroon tones (700/600) work well as solid
     button backgrounds with light text on top. */
  --colour-accent: var(--colour-maroon-400);
  --colour-accent-strong: var(--colour-maroon-300);
  --colour-accent-solid: var(--colour-maroon-700);
  --colour-accent-solid-hover: var(--colour-maroon-600);

  /* Colour - accessibility (brighter blue needed for AA contrast on black) */
  --colour-focus: #5AA9E6;

  /* Typography
     Single family, multiple weights: bold, confident, modern.
     Hierarchy is created through weight and size, not by mixing typefaces. */
  --font-display: "Montserrat", sans-serif;
  --font-body: "Montserrat", sans-serif;

  --font-size-body: 1rem;
  --font-size-lead: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  --font-size-h3: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  --font-size-h2: clamp(2rem, 1.4rem + 2vw, 3.4rem);
  --font-size-h1: clamp(2.5rem, 1.5rem + 4.5vw, 4.75rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Layout */
  --width-text: 44rem;
  --width-content: 72rem;
  --page-gutter: clamp(1.25rem, 4vw, 4rem);

  /* Borders / radii */
  --border-thin: 1px solid var(--colour-line);
  --border-accent: 1px solid var(--colour-maroon-600);
  --radius-small: 0.2rem;
  --radius-medium: 0.75rem;

  /* Motion */
  --duration-standard: 200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

}