/* ============================================================
   Belong — Color tokens
   Forest (structure) · Apricot (signal) · Stone (surfaces).
   Flat — NO gradient. Apricot is a signal, never a fill plane.
   ============================================================ */

:root {
  /* — Structure: Forest (replaces Navy) — */
  --navy:           #0C2C2A;   /* Teal-Pine: structure, wordmark, marketing panels */
  --navy-deep:      #08201E;   /* deepest surface */
  --navy-mid:       #1E443E;   /* border/line on dark (forest-line) */
  --forest-panel:   #143733;   /* raised card on dark */

  /* — Signal: Apricot (replaces Lime). SIGNAL ONLY, never a fill plane. — */
  --lime:           #F39245;   /* apricot signal */
  --lime-f:         #FAE7D3;   /* faint fill */
  --lime-b:         rgba(243,146,69,.30); /* faint border */
  --clay:           #C96E2C;   /* deeper apricot: hover, text-on-light, links */

  /* — Surfaces: Stone, neutral-warm (no green cast) — */
  --paper:          #EFEFEB;
  --bg:             #EFEFEB;   /* alias */
  --bg1:            #F0EFE9;   /* section tint — between paper & bg2 */
  --bg2:            #F2EFE7;
  --surface:        #FFFFFF;   /* cards = pure white */

  /* — Borders (firmer on light Stone) — */
  --border:         #DCDCD5;
  --border-mid:     #D2D2CB;

  /* — Text on light — */
  --ink:            #26221E;
  --text:           #26221E;   /* alias */
  --text-secondary: #3E3A36;
  --text-muted:     #6F756B;
  --text-faint:     #8A8F86;

  /* — Text on Forest — */
  --on-dark:        #F2EFE7;   /* cream-d */
  --on-dark-muted:  #8CA8A1;   /* muted-d */

  /* — Semantic — */
  --danger:         #C0392B;
  --danger-f:       #F7E2DF;
  --success:        #1A6B4A;
  --success-f:      #DCEDE5;
  --info:           #1E443E;

  /* — Semantic surface aliases (use these in product UI) — */
  --surface-page:   var(--paper);
  --surface-sunken: var(--bg2);
  --surface-card:   var(--surface);
  --surface-dark:   var(--navy);
  --surface-raised-dark: var(--forest-panel);
  --line:           var(--border);
  --line-strong:    var(--border-mid);

  /* — Semantic text aliases — */
  --text-body-color: var(--ink);
  --text-link:       var(--clay);
  --signal:          var(--lime);
  --signal-hover:    var(--clay);
}

/* ============================================================
   Semantic brand aliases (FINAL naming).  Prefer these in new work;
   legacy --navy/--lime kept above for back-compat with existing screens.
   ============================================================ */
:root {
  --forest:        var(--navy);
  --forest-deep:   var(--navy-deep);
  --forest-line:   var(--navy-mid);
  --forest-panel-: var(--forest-panel);
  --apricot:       var(--lime);
  --apricot-faint: var(--lime-f);
  --apricot-border:var(--lime-b);
  --apricot-wash:  rgba(243,146,69,.07);  /* subtle highlight surface — prepared cards / accent stats / drafts */
  --apricot-deep:  var(--clay);
  --stone:         var(--paper);
  --stone-sunken:  var(--bg2);
  --stone-card:    var(--surface);
}