/* Glas-Bender Visuals — Color tokens
   A monochrome, image-forward system. Photography supplies the colour;
   the interface stays ink-on-paper so images never compete with chrome. */

:root {
  /* ---- Ink (near-black, from the logo) ---- */
  --ink-900: #0a0a0a;   /* logo black / primary actions */
  --ink-800: #161616;
  --ink-700: #232323;
  --ink-600: #333333;

  /* ---- Neutral grays (warm-leaning) ---- */
  --gray-500: #6b6864;  /* secondary text */
  --gray-400: #8d8a85;  /* muted text, metadata */
  --gray-300: #b8b4ae;  /* disabled, hairlines on dark */
  --gray-200: #ddd9d2;  /* borders */
  --gray-150: #e8e5df;  /* subtle dividers */
  --gray-100: #f1efea;  /* hover wash / inset fills */

  /* ---- Paper (warm off-white) & white ---- */
  --paper:    #faf9f6;  /* default page background */
  --white:    #ffffff;

  /* ---- Functional / semantic (kept muted, utility only) ---- */
  --positive: #2f6f4f;
  --positive-wash: #e8f0ea;
  --critical: #b23b32;
  --critical-wash: #f6e9e7;
  --notice:   #9a6b1e;
  --notice-wash: #f5ecda;

  /* ========== Semantic aliases ========== */
  --bg-page:        var(--paper);
  --bg-surface:     var(--white);
  --bg-inset:       var(--gray-100);
  --bg-inverse:     var(--ink-900);

  --text-strong:    var(--ink-900);
  --text-body:      var(--ink-700);
  --text-muted:     var(--gray-500);
  --text-faint:     var(--gray-400);
  --text-on-ink:    var(--paper);

  --border-default: var(--gray-200);
  --border-strong:  var(--ink-900);
  --border-subtle:  var(--gray-150);

  --action:         var(--ink-900);
  --action-hover:   var(--ink-700);
  --action-text:    var(--white);

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