/* MONO Boulder — Color
   Cool-leaning, natural-material palette: warm paper + cool concrete, one warm
   plywood counterpoint (birch), plant green, and a single cool signal (cobalt).
   Glass & light are expressed through translucency + ice tints, not extra hues. */

:root {
  /* ---- Ink & paper (warm neutrals) ---- */
  --ink:        #1A1B19;   /* signage ink, near-black warm */
  --ink-soft:   #2C2E29;
  --paper:      #F4F1EA;   /* primary page — warm off-white */
  --paper-lift: #FBF9F4;   /* raised card surface */
  --paper-dim:  #EAE6DC;   /* sunken / inset */

  /* ---- Concrete (cool grey ramp) ---- */
  --concrete-100: #ECEDEA;
  --concrete-200: #DBDCD7;
  --concrete-300: #C2C4BD;
  --concrete-400: #9DA097;
  --concrete-500: #7B7E75;
  --concrete-600: #5B5E55;
  --concrete-700: #43463F;
  --concrete-800: #2C2E29;

  /* ---- Birch / plywood (the one warm accent material) ---- */
  --birch-tint: #F1E6D4;
  --birch:      #DCBE93;
  --birch-deep: #B4905C;

  /* ---- Plant (foliage green) ---- */
  --sage-tint:  #E3E8D9;
  --sage:       #92A37C;
  --moss:       #5C6E4E;

  /* ---- Cobalt (cool secondary accent) ---- */
  --cobalt-tint: #DDE2F7;
  --cobalt:      #2C46C8;
  --cobalt-deep: #1E31A0;
  --ice:         #CFDEE2;   /* pale glass blue-grey */

  /* ---- Signal yellow (attention / marker — the support color) ---- */
  --signal:        #E9E70A;   /* highlighter + accent blocks */
  --signal-bright: #F2F00F;   /* hover / max punch */
  --signal-deep:   #C9C700;   /* pressed / borders on light */
  --signal-tint:   #F7F6B0;   /* faint wash */

  /* ---- Hold colors (functional route/grade coding) ---- */
  --hold-white:  #F3F1EC;
  --hold-yellow: #E8B93B;
  --hold-green:  #4E9A5A;
  --hold-blue:   #2E77C2;
  --hold-red:    #D24B3E;
  --hold-purple: #7A5AC0;
  --hold-pink:   #D96BA0;
  --hold-black:  #24251F;

  /* ================= Semantic aliases ================= */
  /* Direction: black + white + warm paper, with YELLOW as the one loud
     support color. Yellow never carries white text — it sits BEHIND ink
     (highlighter) or as a solid attention block. Ink is the primary action
     color; cobalt is a quiet cool secondary. */
  --text-strong:   var(--ink);
  --text-body:     var(--concrete-800);
  --text-muted:    var(--concrete-500);
  --text-faint:    var(--concrete-400);
  --text-invert:   var(--paper);
  --text-onaccent: #FFFFFF;

  --surface-page:   var(--paper);
  --surface-card:   var(--paper-lift);
  --surface-sunken: var(--paper-dim);
  --surface-ink:    var(--ink);
  --surface-birch:  var(--birch);
  --surface-glass:  rgba(244, 241, 234, 0.62); /* frosted glass (pair with blur) */

  --border:        #D7D3C9;   /* warm hairline */
  --border-strong: var(--concrete-300);
  --border-ink:    var(--ink);

  --accent:          var(--cobalt);
  --accent-hover:    var(--cobalt-deep);
  --accent-tint:     var(--cobalt-tint);
  --accent-contrast: #FFFFFF;

  /* Yellow support color roles */
  --marker:          var(--signal);   /* highlighter behind active/emphasis text */
  --attention:       var(--signal);   /* solid block: cart, count, hot badge */
  --attention-hover: var(--signal-bright);
  --on-attention:    var(--ink);      /* text on yellow is always ink */

  --focus-ring: var(--ink);

  --success: var(--moss);
  --success-tint: var(--sage-tint);
  --warning: var(--birch-deep);
  --warning-tint: var(--birch-tint);
  --danger:  var(--hold-red);
  --danger-tint: #F6DED9;
  --info:    var(--cobalt);
  --info-tint: var(--cobalt-tint);
}