/* Pontuador — Color tokens
 * Warm, sunny travel palette built around the brand coral #fe5e3e.
 * All hues lean warm (orange / amber / sand). No cool grays. */

:root {
  /* ---- Primary: Coral (brand) ---------------------------------- */
  --coral-50:  #fff3f0;
  --coral-100: #ffe4dc;
  --coral-200: #ffc8b8;
  --coral-300: #ffa288;
  --coral-400: #ff7d5c;
  --coral-500: #fe5e3e; /* ← brand core */
  --coral-600: #ed4320;
  --coral-700: #c63214;
  --coral-800: #9d2a15;
  --coral-900: #7c2615;

  /* ---- Secondary: Amber (sunset / highlight) ------------------- */
  --amber-50:  #fff8ec;
  --amber-100: #ffedca;
  --amber-200: #ffd98f;
  --amber-300: #ffc154;
  --amber-400: #ffac2b;
  --amber-500: #f9931a; /* warm gold accent */
  --amber-600: #db7209;
  --amber-700: #b6530c;

  /* ---- Warm neutrals: Sand / Stone ----------------------------- */
  --sand-50:  #fdfbf9;
  --sand-100: #f8f2ec;
  --sand-200: #efe5da;
  --sand-300: #ded0c2;
  --sand-400: #c0ab9a;
  --sand-500: #998573;
  --sand-600: #71614f;  /* renamed-warm body text on light */
  --sand-700: #50443a;
  --sand-800: #342a23;
  --sand-900: #211a15;  /* warm near-black (ink) */

  /* ---- Pure white & a true white tint for surfaces ------------- */
  --white: #ffffff;

  /* ---- Semantic status (warm-tuned) ---------------------------- */
  --success-500: #2fa36b;
  --success-100: #d8f0e3;
  --warning-500: #f5a623;
  --warning-100: #fdeccc;
  --danger-500:  #e23b2e;
  --danger-100:  #fbdcd8;
  --info-500:    #2e8bd6;
  --info-100:    #d6ebfa;

  /* ================================================================
     Semantic aliases — reference these in components
     ================================================================ */

  /* Brand */
  --brand:           var(--coral-500);
  --brand-hover:     var(--coral-600);
  --brand-active:    var(--coral-700);
  --brand-subtle:    var(--coral-100);
  --brand-tint:      var(--coral-50);
  --accent:          var(--amber-400);

  /* Text */
  --text-strong:     var(--sand-900);  /* headings */
  --text-body:       var(--sand-700);  /* paragraphs */
  --text-muted:      var(--sand-500);  /* captions, meta */
  --text-on-brand:   var(--white);
  --text-on-dark:    var(--sand-50);

  /* Surfaces */
  --surface-page:    var(--sand-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--sand-100);
  --surface-ink:     var(--sand-900);  /* dark sections / footer */

  /* Borders */
  --border-subtle:   var(--sand-200);
  --border-strong:   var(--sand-300);
  --border-brand:    var(--coral-300);

  /* Focus ring */
  --ring: color-mix(in srgb, var(--coral-500) 45%, transparent);
}