/* ============================================================================
   HEART MIC — BRAND TOKENS  (single source of truth)
   ----------------------------------------------------------------------------
   DO NOT HAND-EDIT. These custom properties are synced verbatim from the
   "Heart Mic Brand System" design project in Claude Design
   (projectId 3cfbbfbe-5892-4995-8ca7-715fa1839865, owner: Max).

   To change a colour / font / radius / spacing value: edit it in Claude Design,
   then re-sync this file — never tweak values here. site.css and every page
   consume ONLY these tokens, so the design system stays the one origin.
   Last sync: 2026-07-14
   ============================================================================ */

/* --- Webfonts: free on Google Fonts. Bricolage = display, Hanken = text --- */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- COLOR: Signature (the heart-mic rose) ---- */
  --rose-500: #C33C5B;   /* the heart-mic red. THE brand colour. */
  --rose-600: #A62E4A;   /* darker — rose TEXT on cream (AA) + hover */
  --rose-700: #8B2540;   /* press */
  --rose-100: #F6DBE1;   /* soft tint — fills, chips */

  /* ---- COLOR: Warm neutrals ---- */
  --cream-50:  #FBF4EA;  /* page background */
  --cream-100: #F4E8D8;  /* raised surface / card */
  --cream-200: #EADBC6;  /* hairline / divider on cream */
  --ink-900:   #201A16;  /* primary text (warm near-black) */
  --ink-600:   #6E635A;  /* muted / secondary text */
  --white:     #FFFFFF;

  /* ---- COLOR: Lane sub-palette (tagging only, never as page fields) ---- */
  --lane-solo:   #E0982B; /* "taken & solo" — amber */
  --lane-single: #C33C5B; /* "single" — rose (the default lane) */
  --lane-couple: #7A3E5C; /* "a couple" — warm berry */

  /* ---- COLOR: Semantic aliases ---- */
  --bg-page:       var(--cream-50);
  --surface-card:  var(--cream-100);
  --border-hair:   var(--cream-200);
  --text-body:     var(--ink-900);
  --text-muted:    var(--ink-600);
  --text-on-rose:  var(--white);   /* ~5.1:1 — AA on the rose signature */
  --accent:        var(--rose-500);
  --accent-strong: var(--rose-600);

  /* ---- TYPE: families ---- */
  --font-display: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  --font-text:    'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;

  /* weights */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;
  --w-black:   800;

  /* editorial scale */
  --fs-display: 64px;
  --fs-h1: 40px;
  --fs-h2: 28px;
  --fs-h3: 20px;
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-caption: 12px;

  --lh-tight: 1.02;
  --lh-snug: 1.15;
  --lh-body: 1.5;
  --ls-tight: -0.02em;
  --ls-caps: 0.08em;

  /* ---- SPACING: 4pt base ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --clearspace: var(--space-6); /* sponsor clear space = heart-mic glyph height */

  /* ---- RADIUS: soft, friendly, never sharp-corporate ---- */
  --radius-sm: 6px;
  --radius-md: 12px;   /* chips, tags */
  --radius-lg: 20px;   /* cards */
  --radius-pill: 999px;

  /* ---- ELEVATION: warm, low, diffuse. Never crisp/tech ---- */
  --shadow-sm: 0 1px 2px rgba(60,40,30,.10);
  --shadow-md: 0 6px 20px rgba(60,40,30,.12);
  --shadow-lg: 0 18px 48px rgba(60,40,30,.16);
}