/* ============================================================
   heeybaby — Color Tokens
   Warm, calm duotone palette: soft rose + deep navy on cream.
   Base values + semantic aliases.
   ============================================================ */

:root {
  /* ── Brand base ─────────────────────────────────────────── */
  --hb-pink:        #FDA4AF;  /* signature rose — the brand heart */
  --hb-pink-600:    #FB8C9A;  /* hover / pressed rose */
  --hb-pink-300:    #FECDD3;  /* light rose */
  --hb-pink-100:    #FDEAEC;  /* rose wash */
  --hb-navy:        #1B3A5C;  /* ink / primary */
  --hb-navy-700:    #142D4A;  /* hover navy */
  --hb-navy-500:    #2D5A82;  /* lighter navy */

  /* ── Neutrals / surfaces ────────────────────────────────── */
  --hb-white:       #FFFFFF;
  --hb-cream:       #FFF5EE;  /* primary warm surface */
  --hb-cream-200:   #FBEFE6;  /* deeper cream section */
  --hb-sand:        #FDEBD0;  /* warm accent surface */
  --hb-rose-tint:   #F9D4D4;  /* soft pink accent surface */

  /* ── Text ───────────────────────────────────────────────── */
  --hb-ink:         #1B3A5C;  /* primary text (navy) */
  --hb-ink-soft:    #4A6A84;  /* secondary text */
  --hb-ink-muted:   #8FA8BC;  /* muted / captions */
  --hb-on-dark:     #FFFFFF;  /* text on navy/pink */

  /* ── Lines & borders ────────────────────────────────────── */
  --hb-border:      #E8DDD4;
  --hb-border-soft: #F0E8E0;

  /* ── Semantic feedback ──────────────────────────────────── */
  --hb-success:     #6BBF8A;
  --hb-success-bg:  #E8F5ED;
  --hb-error:       #E07070;
  --hb-error-bg:    #FDE8E8;
  --hb-warning:     #E5A84B;
  --hb-warning-bg:  #FEF3DC;

  /* ── Semantic aliases (use these in components) ─────────── */
  --color-bg:            var(--hb-white);
  --color-surface:       var(--hb-cream);
  --color-surface-warm:  var(--hb-sand);
  --color-surface-rose:  var(--hb-pink-100);
  --color-card:          var(--hb-white);

  --color-text:          var(--hb-ink);
  --color-text-soft:     var(--hb-ink-soft);
  --color-text-muted:    var(--hb-ink-muted);
  --color-text-on-dark:  var(--hb-on-dark);

  --color-primary:        var(--hb-navy);
  --color-primary-hover:  var(--hb-navy-700);
  --color-accent:         var(--hb-pink);
  --color-accent-hover:   var(--hb-pink-600);

  --color-border:        var(--hb-border);
  --color-border-soft:   var(--hb-border-soft);

  --color-focus-ring:    color-mix(in oklab, var(--hb-pink) 60%, white);
}