/* JOY Design Tokens — web layer.
   Single source of truth for all brand colors.
   No hardcoded hex values in any other marketing file. */

:root {
  /* ── Brand: coral = identity (logo, icons, buttons, closing band) ── */
  --joy-coral:         #FF6B6B;   /* exact app brand color */
  --joy-coral-text:    #C73232;   /* coral text on light backgrounds (AA compliant) */
  --joy-coral-deep:    #BF3636;   /* hover state; use where white text is required */
  --joy-coral-tint:    #FFE9E0;   /* session flow band background */
  --joy-coral-soft:    #FFF0EE;   /* very light coral wash */

  /* ── Brand: teal = step circles, session icons, italic hero accent ── */
  --joy-teal:          #7AC9C4;
  --joy-teal-deep:     #0D7A75;   /* darkened for text on light (4.6:1 on cream — AA ✓) */
  --joy-teal-soft:     #E4F4F3;

  /* ── Feedback ── */
  --joy-success:       #1F7A44;   /* comparison checkmarks, confirmations */
  --joy-success-soft:  #E7F5EC;

  /* ── Surfaces ── */
  --joy-cream:         #FFFBF5;
  --joy-peach:         #FFF3E4;
  --joy-ink:           #1A1A1A;
  --joy-ink-muted:     #6B6560;   /* eyebrow labels, secondary UI */
  --joy-charcoal:      #202328;   /* dark band backgrounds */
  --bg:                #FAFAF7;
  --card:              #FFFFFF;

  /* ── Text ── */
  --text:              #111827;   /* headings, ~17:1 on white */
  --text-body:         #374151;   /* body copy, 8.3:1 on cream */
  --text-light:        #4B5563;   /* captions, 6.9:1 on white */

  /* ── Borders ── */
  --border:            #E5E7EB;
  --border-warm:       #F0D8CC;
}