@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@400;600&display=swap');

/* ==========================================================================
   Design Tokens — The Road Two Spoons
   Editorial travel magazine aesthetic: photography forward, light and airy
   ========================================================================== */

:root {

  /* Colours
     ====================================================================== */
  --color-bg:          #FAFAF8;
  --color-surface:     #F0EFED;
  --color-text:        #2b2b2b;
  --color-text-muted:  #6b6b6b;
  --color-accent:      #2BB1B4;
  --color-accent-dark: #26989a;
  --color-border:      #E5E4E2;
  --color-white:       #ffffff;
  --color-overlay:     rgba(0, 0, 0, 0.4);

  /* Typography — Families
     ====================================================================== */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Typography — Fluid Scale
     ====================================================================== */
  --text-display: clamp(2.5rem, 5vw, 4.5rem);
  --text-h1:      clamp(2rem, 4vw, 3.5rem);
  --text-h2:      clamp(1.5rem, 3vw, 2.25rem);
  --text-h3:      clamp(1.25rem, 2vw, 1.75rem);
  --text-body:    clamp(1rem, 1.1vw, 1.125rem);
  --text-small:   0.875rem;
  --text-xs:      0.75rem;

  /* Typography — Line Heights
     ====================================================================== */
  --leading-tight:   1.15;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  /* Typography — Weights
     ====================================================================== */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* Spacing — 8px base
     ====================================================================== */
  --space-1:  0.25rem;  /*   4px */
  --space-2:  0.5rem;   /*   8px */
  --space-3:  0.75rem;  /*  12px */
  --space-4:  1rem;     /*  16px */
  --space-5:  1.5rem;   /*  24px */
  --space-6:  2rem;     /*  32px */
  --space-7:  3rem;     /*  48px */
  --space-8:  4rem;     /*  64px */
  --space-9:  6rem;     /*  96px */
  --space-10: 8rem;     /* 128px */

  /* Layout
     ====================================================================== */
  --width-container: 1200px;
  --width-content:   780px;
  --width-breakout:  1020px;

  /* Radii
     ====================================================================== */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 100px;

  /* Shadows
     ====================================================================== */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);

  /* Transitions
     ====================================================================== */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}