/* Red Online Marketing — Design Tokens */

@font-face { font-family: 'Poppins'; font-weight: 300; font-style: normal; src: url('../fonts/Poppins-Light.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 400; font-style: normal; src: url('../fonts/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 400; font-style: italic; src: url('../fonts/Poppins-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-style: normal; src: url('../fonts/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-style: normal; src: url('../fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-style: normal; src: url('../fonts/Poppins-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-style: italic; src: url('../fonts/Poppins-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 800; font-style: normal; src: url('../fonts/Poppins-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 900; font-style: normal; src: url('../fonts/Poppins-Black.ttf') format('truetype'); }

:root {
  /* Brand colors — from Red brandbook */
  --red-1: #fad4cb;
  --red-2: #e72d3e;          /* PRIMARY RED */
  --red-3: #c32934;
  --red-4: #7a1b1c;

  --turquoise-1: #d8ebea;
  --turquoise-2: #00aeac;    /* PRIMARY TURQUOISE */
  --turquoise-3: #009593;
  --turquoise-4: #005e5c;

  --black: #222121;
  --gray: #a1a1a1;
  --light-gray: #f4f4f4;
  --white: #ffffff;

  /* Semantic */
  --fg-1: var(--black);
  --fg-2: #4a4949;
  --fg-muted: var(--gray);
  --bg-1: var(--white);
  --bg-2: var(--light-gray);
  --accent: var(--red-2);
  --accent-2: var(--turquoise-2);

  /* Type */
  --font-sans: 'Poppins', Arial, Helvetica, sans-serif;

  /* Radii / spacing */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
}

html, body { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-1); }

/* Headings — bold, tight tracking */
h1, .h1 { font-family: var(--font-sans); font-weight: 800; font-size: 56px; line-height: 1.05; letter-spacing: -0.02em; color: var(--fg-1); }
h2, .h2 { font-weight: 700; font-size: 36px; line-height: 1.1; letter-spacing: -0.01em; }
h3, .h3 { font-weight: 700; font-size: 24px; line-height: 1.2; }
h4, .h4 { font-weight: 600; font-size: 18px; line-height: 1.3; }

p, .body { font-weight: 400; font-size: 15px; line-height: 1.55; color: var(--fg-2); }
.intro { font-weight: 500; font-size: 18px; line-height: 1.4; color: var(--fg-1); }
.caption { font-weight: 500; font-size: 11px; line-height: 1.3; color: var(--fg-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.tagline { font-weight: 700; color: var(--accent); }
.kicker { font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; }