/* ============================================================
   Hilo — Color tokens · FILAMENT identity
   Monochrome and premium. The rule, everywhere:
     · Chrome is neutral (near-black rail, paper content, grey ink).
     · The ONE action accent is near-black — buttons, links, active.
     · Chromatic color appears ONLY to carry meaning: live/caution/down
       status, and the vermilion THREAD — the through-line marking
       attention & connection (comment marks, unread, open decisions).
   If a color isn't status, thread, or the action accent, it's a grey.
   ============================================================ */

:root {
  /* ---- the dark rail (workspace sidebar AND admin rail — one rail) ---- */
  --rail:            #0c0d0f;  /* near-black sidebar surface */
  --rail-raise:      #17181b;  /* search field, resting hover */
  --rail-active:     #26272b;  /* selected / pressed wash (solid) */
  --rail-line:       #232427;  /* dividers inside the rail */
  --rail-ink:        #b7b9bf;  /* resting label text */
  --rail-ink-strong: #ffffff;  /* active text, wordmark, headings */
  --rail-mut:        #6c6f77;  /* section labels, metadata, resting dot */

  /* ---- paper content ---- */
  --bg:      #f6f6f7;  /* app background */
  --card:    #ffffff;  /* card / panel surface */
  --sunken:  #f1f1f2;  /* insets, code wells, table headers */

  /* ---- neutral ink ramp ---- */
  --ink:     #101114;  /* primary text — near-black, never pure #000 */
  --ink-2:   #4b4d54;  /* secondary text */
  --ink-3:   #83868f;  /* muted / metadata */
  --ink-4:   #a7a9b0;  /* faint / placeholder */

  /* ---- borders (a hairline system does most of the separating) ---- */
  --line:    #ececed;  /* default hairline divider */
  --line-2:  #dfdfe1;  /* stronger border, input outline */
  --line-3:  #d0d0d3;  /* emphasis border, hovered input */

  /* ---- the single action accent (near-black) ---- */
  --action:        #16171a;  /* primary buttons, active nav, links */
  --action-hover:  #2b2d31;  /* hover — lifts toward grey, never darker */
  --action-ink:    #ffffff;  /* text / icon on the action accent */
  --action-tint:   #eeeef0;  /* neutral selected / hover fill on light */

  /* ---- STATUS — the only chromatic colors in the system ---- */
  --ok:   #1f9d57;  --ok-soft:   #e7f5ec;  --ok-ink:   #14653a; /* alive · approved · online */
  --warn: #b97d12;  --warn-soft: #faf1dd;  --warn-ink: #7c530a; /* caution · incident · revert */
  --bad:  #d1402f;  --bad-soft:  #fbe8e5;  --bad-ink:  #8f2519; /* down · reject · needs-you */

  /* ---- THE THREAD — vermilion, the through-line (Rethreaded) ----
     Reserved for attention & connection: unread counts, comment marks,
     the version thread, the live "working" stitch, open-decision edges.
     Always textural (dash · underline · dot) — NEVER a button fill. */
  --thread:       #c13a2b;
  --thread-soft:  #f7e7e3;  /* comment-highlight fill, soft chips */
  --thread-line:  #e3b7ae;  /* dashed links & stitch edges at rest */
  --thread-ink:   #8f2a1d;  /* text on thread-soft */
  --thread-paper: #fdf8f6;  /* comment-card tint */

  /* avatar treatment hooks (see Avatar — agents are stitched squircles) */
  --avatar-stitch:   #9096a0;      /* agent stitch ring at rest */
  --avatar-dot-ring: var(--card);  /* presence-dot cutout; set to var(--rail) on dark */

  /* ---- meaningful moments ---- */
  --mark:          var(--thread-soft);   /* comment-highlight fill */
  --mark-line:     var(--thread);        /* the marker's underline */
  --comment-paper: var(--thread-paper);  /* comment-card tint */
  --selection:     #e3e3e6;          /* neutral text selection */
  --focus-ring:    rgba(16,17,20,.30); /* keyboard focus ring */
  --scrim:         rgba(8,9,12,.46);   /* modal backdrop */

  /* ============================================================
     Semantic aliases — write consumer code against THESE.
     ============================================================ */
  --text-strong:    var(--ink);
  --text-body:      var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted:     var(--ink-3);
  --text-faint:     var(--ink-4);
  --text-link:      var(--action);
  --text-on-dark:   var(--rail-ink-strong);

  --surface-app:    var(--bg);
  --surface-card:   var(--card);
  --surface-sunken: var(--sunken);
  --surface-rail:   var(--rail);

  --border-hairline: var(--line);
  --border-strong:   var(--line-2);
  --border-focus:    var(--action);

  --accent:      var(--action);
  --accent-ink:  var(--action-ink);
  --accent-tint: var(--action-tint);
}