/* ============================================================
   CRATER — Color tokens
   Volcanic red, warm ink, stark white. Three-color brand.
   ============================================================ */
:root {
  /* ---- Brand core ---- */
  --crater-red:       #EF3D2D;  /* the fire — primary accent          */
  --crater-red-hot:   #FF5A43;  /* hover — brighter ember             */
  --crater-red-deep:  #CB2C1D;  /* press — cooled lava                */
  --crater-red-ember: #8E1B11;  /* deepest red, on-dark accents       */
  --crater-red-wash:  #FCE3DE;  /* faint red tint surface             */

  --crater-black:     #141210;  /* warm near-black — the ground       */
  --white:            #FFFFFF;

  /* ---- Warm ink neutral scale ---- */
  --ink-950: #0C0B09;
  --ink-900: #141210;
  --ink-800: #221F1B;
  --ink-700: #35302A;
  --ink-600: #4D463E;
  --ink-500: #6E675D;
  --ink-400: #968D80;
  --ink-300: #BCB3A6;
  --ink-200: #DCD5C9;
  --ink-150: #E8E2D8;
  --ink-100: #F1ECE4;
  --ink-050: #F8F5EF;

  /* ---- Semantic — light surface (default) ---- */
  --bg:             var(--ink-050);
  --surface:        var(--white);
  --surface-sunk:   var(--ink-100);
  --surface-inverse:var(--crater-black);

  --text:           var(--ink-900);
  --text-muted:     var(--ink-500);
  --text-faint:     var(--ink-400);
  --text-inverse:   var(--white);

  --accent:         var(--crater-red);
  --accent-hover:   var(--crater-red-hot);
  --accent-active:  var(--crater-red-deep);
  --on-accent:      var(--white);

  --border:         var(--ink-200);
  --border-strong:  var(--ink-900);
  --hairline:       var(--ink-150);

  --focus-ring:     var(--crater-red);

  /* ---- Status (kept terse; brand rarely uses green/amber) ---- */
  --positive: #2E7D5B;
  --warning:  #E0922B;
  --danger:   var(--crater-red-deep);
}

/* ---- Dark scope: opt in with [data-theme="dark"] ---- */
[data-theme="dark"] {
  --bg:            var(--crater-black);
  --surface:       var(--ink-900);
  --surface-sunk:  var(--ink-950);
  --surface-inverse: var(--white);

  --text:          var(--ink-050);
  --text-muted:    var(--ink-300);
  --text-faint:    var(--ink-500);
  --text-inverse:  var(--crater-black);

  --accent:        var(--crater-red);
  --accent-hover:  var(--crater-red-hot);
  --accent-active: var(--crater-red-deep);

  --border:        var(--ink-700);
  --border-strong: var(--ink-050);
  --hairline:      var(--ink-800);
}