/* ── Nattal colour system ─────────────────────────────────────────
   Warm, elegant, calm. A dusty nude-rose leads; sand, sage,
   lavender and lilac support. Everything sits on a warm white.
   Values are the exact HSL from the production app (index.css).
------------------------------------------------------------------ */
:root {
  /* Primary */
  --warm-white:    #FBF6F1;             /* app background          */
  --nude-rose:     #c47b83;             /* brand primary  hsl(353,38%,63%) */
  --dark-gray:     hsl(300, 4%, 61%);   /* #9D989D — muted text     */

  /* Secondary */
  --old-rose:      #E4CED1;             /* borders/dividers — rose-tinted */
  --sage-light:    hsl(54, 15%, 70%);   /* #BCBAA6 — soft green tint  */
  --lavender-gray: hsl(259, 30%, 86%);  /* #DAD1EA — soft accent      */

  /* Accent */
  --terracotta:    #B95B66;             /* hover / pressed — deeper rose */
  --lilac:         hsl(287, 22%, 62%);  /* #A184AB — cool accent      */
  --pink-sand:     #F9ECED;             /* tinted surface — rose wash */
  --text-dark:     #333333;             /* primary text            */

  /* Neutral scale (derived, warm-leaning greys) */
  --white:         hsl(0, 0%, 100%);
  --gray-50:       hsl(210, 20%, 98%);
  --gray-100:      hsl(220, 14%, 96%);
  --gray-200:      hsl(220, 13%, 91%);
  --gray-400:      hsl(218, 11%, 65%);
  --gray-600:      hsl(215, 14%, 34%);
  --gray-900:      #333333;

  /* Semantic status (from production usage) */
  --success:       hsl(160, 84%, 39%);  /* emerald-500 — on-track  */
  --success-soft:  hsl(152, 76%, 96%);
  --warning:       hsl(45, 93%, 47%);   /* amber — at term / overdue */
  --warning-soft:  hsl(48, 100%, 96%);
  --info:          hsl(217, 91%, 60%);  /* blue — pending exams    */
  --info-soft:     hsl(214, 95%, 96%);
  --danger:        hsl(0, 84%, 60%);    /* destructive             */
  --danger-soft:   hsl(0, 86%, 97%);

  /* ── Semantic aliases (use these in components) ── */
  --bg-app:            var(--warm-white);
  --surface-card:      var(--white);
  --surface-muted:     var(--pink-sand);
  --surface-tinted:    var(--pink-sand);
  --border-default:    var(--old-rose);
  --border-strong:     var(--nude-rose);
  --text-body:         var(--text-dark);
  --text-muted:        var(--dark-gray);
  --text-on-primary:   var(--white);
  --brand-primary:     var(--nude-rose);
  --brand-primary-hover: var(--terracotta);
  --ring:              var(--nude-rose);
}