/* ============================================================
   MESA STRATA — COLOR
   Balance ≈ 80% canvas + ink, ≈ 20% terracotta.
   Forbidden: gold, any second accent, gradients, drop shadows,
   3D, bevels, glows, texture-as-effect.
   ============================================================ */

:root {
  /* ---- Base palette (the only five) ---- */
  --ms-bone:        #F2EFE9;  /* Warm Bone / Cream — canvas */
  --ms-ink:         #111111;  /* Primary ink — text, rules, dark field */
  --ms-terracotta:  #C8462C;  /* Terracotta Signal — accent / signal */
  --ms-warm-gray:   #6B6660;  /* Warm Gray — captions, secondary */
  --ms-near-black:  #111111;  /* Dark field = Ink */

  /* ---- Tonal support (derived, used sparingly for rules/fills) ---- */
  --ms-bone-200:    #E7E2D8;  /* hairline fills, table zebra on bone */
  --ms-bone-300:    #DAD4C7;  /* faint dividers on bone */
  --ms-ink-700:     #2A2A28;  /* raised surface on dark field */
  --ms-ink-600:     #3A3A37;  /* dark-field hairline */
  --ms-terracotta-pressed: #A8381F; /* press / active state only */

  /* ---- Semantic aliases — LIGHT (default, bone canvas) ---- */
  --surface-canvas:   var(--ms-bone);
  --surface-raised:   #FBF9F5;   /* card / panel sitting on bone */
  --surface-sunken:   var(--ms-bone-200);
  --surface-inverse:  var(--ms-ink);

  --text-primary:     var(--ms-ink);
  --text-secondary:   var(--ms-warm-gray);
  --text-on-inverse:  var(--ms-bone);
  --text-accent:      var(--ms-terracotta);

  --rule-strong:      var(--ms-ink);        /* 1px title rule */
  --rule-hairline:    var(--ms-bone-300);   /* faint dividers */
  --rule-accent:      var(--ms-terracotta); /* plateau rules */

  --signal:           var(--ms-terracotta);
  --signal-pressed:   var(--ms-terracotta-pressed);

  --focus-ring:       var(--ms-terracotta);
}

/* ---- Dark field scope — near-black ground, bone letters ---- */
.ms-dark {
  --surface-canvas:   var(--ms-ink);
  --surface-raised:   var(--ms-ink-700);
  --surface-sunken:   #0B0B0B;
  --surface-inverse:  var(--ms-bone);

  --text-primary:     var(--ms-bone);
  --text-secondary:   #A39E96;
  --text-on-inverse:  var(--ms-ink);
  --text-accent:      var(--ms-terracotta);

  --rule-strong:      var(--ms-bone);
  --rule-hairline:    var(--ms-ink-600);
  --rule-accent:      var(--ms-terracotta);
}