/* Hey Girlfriend — Design Tokens
   Source of truth: Hey Girlfriend Brand Standards, June 2026 · Version 1.0
   Mirrored from the design system project
   (hey-girlfriend-design-system-019dda08-25bf-71b1-ab47-c7d7963e493e/tokens.css).

   ONE DELIBERATE DIVERGENCE, and it is a decision already made:
   the system names Sofia Pro for body type and falls back to Arial. Sofia Pro
   is an Adobe font and Coté chose Poppins + Roboto instead on 09-12 to cut
   cost. So --hg-font-body resolves to Roboto here, which is what the app
   actually ships, rather than to Arial. Everything else is the system verbatim. */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&family=Roboto:wght@400;500;700&display=swap');

:root {
  /* ── Brand palette · Brand Standards p.32 ──────── */
  --hg-magenta:       #EE2363;  /* PANTONE 7416 C — primary brand */
  --hg-sorbet:        #F8B2B1;  /* PANTONE 719 C  */
  --hg-peach-fuzz:    #FDDBD1;  /* PANTONE 487 C  */
  --hg-cream:         #FBFAF1;  /* PANTONE 9224 C — warm canvas */
  --hg-black-velvet:  #010101;  /* PANTONE 439 C  */
  --hg-white:         #FFFFFF;

  /* Product aliases */
  --hg-coral:        var(--hg-magenta);
  --hg-coral-600:    #CB1852;
  --hg-coral-100:    #FDE3EC;
  --hg-blush:        var(--hg-sorbet);
  --hg-blush-50:     var(--hg-peach-fuzz);
  --hg-ink:          var(--hg-black-velvet);
  --hg-ink-2:        #2A2A30;
  --hg-mute:         #676767;
  --hg-line:         #D9D9D9;

  /* ── Type · Brand Standards p.33–35 ────────────── */
  --hg-font-display: 'Poppins', 'Arial Black', system-ui, sans-serif;
  --hg-font-body:    'Roboto', Arial, Helvetica, system-ui, sans-serif;

  --hg-track-pre:  .075em;  /* tracking 75 */
  --hg-track-body: .005em;  /* tracking 5  */

  --hg-preheader: 700 12px/1.25 var(--hg-font-body);

  /* ── Radius ────────────────────────────────────── */
  --r-button: 24px;
  --r-card:   16px;
  --r-chip:   999px;

  /* ── Elevation ─────────────────────────────────── */
  --shadow-bubble: 0 2px 4px rgba(0,0,0,.05);
  --shadow-card:   0 4px 12px rgba(0,0,0,.06);
  --shadow-pop:    0 12px 32px rgba(0,0,0,.10);
  --shadow-coral:  0 8px 20px rgba(238,35,99,.28);

  /* ── Motion ────────────────────────────────────── */
  --ease-out:    cubic-bezier(.2,.7,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --t-fast: 150ms;
  --t-med:  250ms;
  --t-slow: 400ms;
}

* { box-sizing: border-box; }