/* ================================================================
   TOKENS.CSS — Design System Variables
   THIS IS YOUR MAIN CUSTOMISATION FILE.
   Change values here and they update everywhere on the site.
================================================================ */
:root {
  /* COLORS — --color-accent repaints the whole site */
  --color-bg:          #F0EDE6;
  --color-surface:     #F7F4EE;
  --color-paper:       #E8E4DC;
  --color-ink:         #141210;
  --color-mid:         #3A3835;
  --color-grey:        #6B6860;
  --color-rule:        #C8C4BC;
  --color-accent:      #C8221A;   /* ← change this to repaint everything */
  --color-accent-dark: #9E1A14;
  --color-accent-pale: #F0D8D6;
  --color-green:       #4A8A3A;

  /* FONTS — also update the Google Fonts link in index.html */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Barlow Condensed', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  /* TYPE SCALE */
  --text-xs:   9px;
  --text-sm:   11px;
  --text-md:   14px;
  --text-base: 16px;
  --text-lg:   20px;
  --text-xl:   clamp(28px, 3.5vw, 44px);
  --text-2xl:  clamp(36px, 4.5vw, 60px);
  --text-hero: clamp(72px, 9vw, 136px);

  /* SPACING */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  52px;
  --space-2xl: 72px;

  /* BORDERS */
  --border-thin:  1px solid var(--color-rule);
  --border-heavy: 2px solid var(--color-ink);

  /* TRANSITIONS */
  --ease-fast:   .12s ease;
  --ease-normal: .22s ease;
  --ease-slow:   .5s ease;

  /* LAYOUT */
  --nav-height:    52px;
  --sidebar-w:     320px;
  --section-pad:   var(--space-xl) var(--space-lg);
}