/* ============================================================
   ER STUDIO — COLOR TOKENS
   Anchored to the logo ink (#384038, a slate green-charcoal).
   Warm gallery neutrals + restrained wood accents.
   ============================================================ */

:root {
  /* ---- Base neutrals: warm "stone" scale with a slight green cast,
     tuned to sit beside the charcoal-green logo ---- */
  --stone-50:  #F7F4ED;
  --stone-100: #EFEBE1;
  --stone-200: #E0DBCF;
  --stone-300: #C9C4B7;
  --stone-400: #A8A89B;
  --stone-500: #87887C;
  --stone-600: #686A60;
  --stone-700: #4E544B;
  --stone-800: #384038; /* ER logo ink */
  --stone-900: #2A302A;
  --stone-950: #1E231D;

  /* ---- Paper / surfaces ---- */
  --paper:      #F4F0E8; /* warm gallery off-white — default page ground */
  --paper-dim:  #ECE7DB; /* recessed paper */
  --white:      #FCFAF4; /* warm white — never pure #FFF */

  /* ---- Brand trio ---- */
  --bone:       #EFE8D8; /* bone — light ground / text on dark */
  --oxblood:    #571709; /* oxblood — primary accent (poster bg) */
  --oxblood-deep: #401006;
  --chartreuse: #D2D92E; /* acid chartreuse — pop */
  --pink:       #F2C3EF; /* orchid pink — pop (Ed.02) */

  /* ---- Wood accents (used sparingly: highlights, interaction) ---- */
  --ochre:      #C39A5E; /* tan / oak */
  --ochre-deep: #9C7740;
  --ochre-soft: #E3D4BB; /* tint for fills/wash */
  --walnut:     #5A4232; /* deep wood */

  /* ---- Status (kept muted + in-palette) ---- */
  --positive:   #5E7355; /* sage */
  --critical:   #A8472F; /* brick */
  --notice:     #B98A3E; /* amber-ochre */

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */
  --bg:            var(--paper);
  --bg-raised:     var(--white);
  --bg-recessed:   var(--paper-dim);
  --bg-inverse:    var(--stone-900);

  --surface-card:  var(--white);
  --surface-sunken: var(--stone-50);

  --text-strong:   var(--stone-800);
  --text-body:     var(--stone-700);
  --text-muted:    var(--stone-600);
  --text-faint:    var(--stone-500);
  --text-inverse:  var(--stone-50);
  --text-on-accent: var(--paper);

  --border-strong: var(--stone-400);
  --border:        var(--stone-300);
  --border-subtle: var(--stone-200);
  --border-hair:   var(--stone-100);

  --accent:        var(--oxblood);
  --accent-hover:  var(--oxblood-deep);
  --accent-wash:   var(--bone);
  --accent-quiet:  var(--walnut);

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

  --link:          var(--stone-800);
  --link-hover:    var(--oxblood);
}