/* London Free Guide — design tokens
   Brand system v1. Drop this in src/styles/ and import once in the base layout.
   Fonts load from Google Fonts: Oswald, Poppins, Reenie Beanie, Inter. */

:root {
  /* Colour — one red does the lifting, black is the canvas */
  --lfg-red: #E63B2E;          /* primary: headlines accents, badges, dividers, pills, all accents */
  --lfg-black: #0e0e0e;        /* default background for all content */
  --lfg-pure-black: #000000;   /* "A Londoner's Thought" format only */
  --lfg-espresso: #2b1a12;     /* logo wordmark only — CONFIRM exact hex from brand book */
  --lfg-white: #ffffff;        /* primary text and Oswald titles */

  /* White opacity ladder — for hierarchy, drop the alpha, never tint grey */
  --lfg-white-90: rgba(255,255,255,0.90);
  --lfg-white-70: rgba(255,255,255,0.70);
  --lfg-white-50: rgba(255,255,255,0.50);
  --lfg-white-30: rgba(255,255,255,0.30);
  --lfg-white-15: rgba(255,255,255,0.15);
  --lfg-white-08: rgba(255,255,255,0.08);

  /* Type families */
  --lfg-font-head: "Oswald", sans-serif;        /* headlines, uppercase */
  --lfg-font-body: "Poppins", sans-serif;       /* body and supporting */
  --lfg-font-hand: "Reenie Beanie", cursive;    /* handwritten captions, white only */
  --lfg-font-alt:  "Inter", sans-serif;         /* bold overlay hooks */

  /* Type weights */
  --lfg-head-weight: 700;
  --lfg-pill-weight: 700;
  --lfg-badge-weight: 600;
  --lfg-detail-weight: 500;
  --lfg-oneliner-weight: 400;

  /* Headline leading — tight */
  --lfg-head-leading: 0.94;

  /* Type scale */
  --lfg-text-hero: clamp(2.75rem, 6vw, 5rem);
  --lfg-text-h1: clamp(2rem, 4vw, 3.25rem);
  --lfg-text-h2: clamp(1.5rem, 3vw, 2.25rem);
  --lfg-text-h3: 1.25rem;
  --lfg-text-body: 1rem;
  --lfg-text-small: 0.8125rem;

  /* Spacing */
  --lfg-space-xs: 0.5rem;
  --lfg-space-sm: 0.75rem;
  --lfg-space-md: 1rem;
  --lfg-space-lg: 1.5rem;
  --lfg-space-xl: 2.5rem;
  --lfg-space-2xl: 4rem;

  /* Radius */
  --lfg-radius-sm: 8px;
  --lfg-radius-md: 12px;
  --lfg-radius-pill: 999px;

  /* Layout */
  --lfg-maxwidth: 1120px;
}

/* Base resets aligned to the brand */
body {
  background: var(--lfg-black);
  color: var(--lfg-white);
  font-family: var(--lfg-font-body);
  font-weight: var(--lfg-oneliner-weight);
}

h1, h2, h3, .lfg-head {
  font-family: var(--lfg-font-head);
  font-weight: var(--lfg-head-weight);
  text-transform: uppercase;
  line-height: var(--lfg-head-leading);
}

/* Red eyebrow pill — max 4 words, no emoji */
.lfg-pill {
  display: inline-block;
  background: var(--lfg-red);
  color: var(--lfg-white);
  font-family: var(--lfg-font-body);
  font-weight: var(--lfg-pill-weight);
  text-transform: uppercase;
  border-radius: var(--lfg-radius-pill);
  padding: 0.25rem 0.75rem;
  font-size: var(--lfg-text-small);
}

/* Handwritten caption — always full-opacity white */
.lfg-hand {
  font-family: var(--lfg-font-hand);
  color: var(--lfg-white);
  font-size: 1.5rem;
}