/* cutie+fi · color tokens
   Distribution rule: 70% white · 20% pale/soft · 10% saturated pink.
   Ink is text-only — never a large surface (the "how it works" dark band is the one exception). */

:root {
  /* ---- Brand base palette ---- */
  --pink:       #FF0083;   /* primary — CTAs, mark, headline accent, character outlines */
  --pink-hover: #E60074;   /* button hover */
  --pink-soft:  #FFE5F0;   /* section bg, illustration body fills, chips */
  --pink-pale:  #FFF5FA;   /* hero backdrop, voices section */
  --ink:        #0B0E2A;   /* all text, dark section, character outlines */
  --ink-soft:   #1F2440;   /* hovered ink surfaces, secondary dark */
  --gray-mid:   #6B7280;   /* secondary text, descriptions */
  --gray-soft:  #F4F5F9;   /* alternating section bg, footer */
  --white:      #FFFFFF;   /* canvas, button text on pink */

  /* ---- Illustration palette — skin (body fills are skin, never brand color) ---- */
  --skin-light:  #FFDAB8;  /* light peach */
  --skin-medium: #E0B088;  /* medium */
  --skin-brown:  #B0815B;  /* warm brown */
  --skin-deep:   #6E4A2E;  /* deep brown */

  /* ---- Illustration palette — clothing (one character, one accent) ---- */
  --cloth-pink:   #FF0083;
  --cloth-navy:   #1F2D5C;
  --cloth-yellow: #F5C842;
  --cloth-blue:   #A8C5E8;

  /* ---- Illustration palette — hair ---- */
  --hair-ink:    #1A1A2E;
  --hair-brown:  #3D2415;
  --hair-warm:   #6B3E1F;
  --hair-auburn: #8B3A1A;

  /* ---- Semantic aliases ---- */
  --text-strong:      var(--ink);
  --text-body:        var(--ink);
  --text-secondary:   var(--gray-mid);
  --text-on-dark:     var(--white);
  --text-on-pink:     var(--white);
  --text-accent:      var(--pink);

  --surface-canvas:   var(--white);
  --surface-card:     var(--white);
  --surface-soft:     var(--gray-soft);
  --surface-pink:     var(--pink-soft);
  --surface-pale:     var(--pink-pale);
  --surface-dark:     var(--ink);

  --action-primary:        var(--pink);
  --action-primary-hover:  var(--pink-hover);

  --border-card:      rgba(11, 14, 42, 0.06);
  --border-strong:    rgba(11, 14, 42, 0.15);
  --border-pink:      rgba(255, 0, 131, 0.20);
  --border-on-dark:   rgba(255, 255, 255, 0.08);

  --star:             #FFB800;  /* testimonial rating stars */
  --pink-on-dark:     #FFB8DC;  /* pink text legible on the ink band */
}