/* MATESHIP MATTERS! — design tokens
   Source: podcast cover direction 3 "Four Mates" (design/podcast-cover/final/).
   Contrast notes are WCAG ratios; AA body text needs 4.5, large text (24px+, or 19px+ bold) needs 3. */


:root {
  /* Brand colours — the four mates */
  --mm-teal:  #4A9A97;   /* original podcast teal. Graphics + large display text only (2.9:1 on cream) */
  --mm-sun:   #F5B83D;   /* accents on dark; the "!" */
  --mm-coral: #FF6B57;   /* accents on dark (5.1:1 on night) */
  --mm-aqua:  #93D4CF;   /* secondary text on dark (8.6:1 on night) */
  --mm-blue:  #4B8EA1;   /* Aidan's speaker colour (from his speaker graphic). Shapes only */

  /* Grounds */
  --mm-night: #0E2F2E;   /* primary dark ground */
  --mm-ink:   #123F3D;   /* raised dark surfaces, body text on light (10.1:1 on cream) */
  --mm-cream: #F6EEE1;   /* primary light ground; text on dark (12.4:1 on night) */
  --mm-white: #FFFFFF;

  /* Text-safe variants for light grounds */
  --mm-teal-text:  #2B6E6B;  /* links/labels on cream (5.1:1) */
  --mm-coral-text: #B23A28;  /* emphasis on cream (5.2:1) */

  /* Overlap tints (what the circles make where they meet: screen blend on night) */
  --mm-tint-teal-sun:   #F8E3B0;
  --mm-tint-coral-teal: #FFC4BA;
  --mm-tint-centre:     #FFF8E7;

  /* Type */
  --mm-font-display: "Fraunces", Georgia, serif;
  --mm-font-body: "Archivo", system-ui, sans-serif;
  --mm-display-settings: "SOFT" 100, "WONK" 0, "opsz" 144;  /* use with weight 900 for the wordmark */
  --mm-label-stretch: 118%;      /* Archivo expanded for small caps labels, letter-spacing .2em */

  /* Fluid type scale (360px → 1440px) */
  --mm-step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.95rem);
  --mm-step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --mm-step-1:  clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --mm-step-2:  clamp(1.6rem, 1.4rem + 0.9vw, 2.1rem);
  --mm-step-3:  clamp(2rem, 1.6rem + 1.8vw, 3.2rem);
  --mm-step-4:  clamp(2.6rem, 1.8rem + 3.6vw, 5.2rem);
  --mm-step-5:  clamp(3.2rem, 2rem + 5.6vw, 7.5rem);   /* hero wordmark */

  /* Space (8px base) */
  --mm-space-1: 0.25rem;
  --mm-space-2: 0.5rem;
  --mm-space-3: 1rem;
  --mm-space-4: 1.5rem;
  --mm-space-5: 2rem;
  --mm-space-6: 3rem;
  --mm-space-7: 4.5rem;
  --mm-space-8: 7rem;
  --mm-gutter: clamp(1rem, 4vw, 3rem);
  --mm-max: 1200px;

  /* Shape */
  --mm-radius-s: 8px;
  --mm-radius-m: 16px;
  --mm-radius-pill: 999px;
  --mm-shadow: 0 10px 30px rgb(14 47 46 / 0.18);
}