/* Monoframe — Color tokens
   A cool, hueless neutral ramp. Color is reserved for tiny dots, hovers, and
   active states only. Shadow color base is #14161C (rgba(20,22,28,…)). */

:root {
  /* ---- Surfaces (light → raised) ---- */
  --bg-canvas:       #E8E9EC;  /* app background */
  --bg-sunken:       #EFF0F3;  /* recessed wells, secondary button fill */
  --surface-card:    #F7F8FA;  /* quiet card fill */
  --surface-raised:  #FCFCFD;  /* primary white card / popover */
  --surface-fill:    #F2F3F5;  /* icon-button rest, idle chips */

  /* ---- Lines ---- */
  --line-divider:    #E6E8EC;  /* hairline inside surfaces */
  --line-border:     #DCDEE3;  /* card & control borders */
  --line-strong:     #D2D5DC;  /* outline-button border, emphasis */

  /* ---- Ink (text / fills, dark → faint) ---- */
  --ink-1:           #26282E;  /* primary text, graphite fills */
  --ink-1-hover:     #15171B;  /* primary button hover (darkest) */
  --ink-2:           #5A5E68;  /* body / secondary text */
  --ink-3:           #8D929C;  /* muted text, captions */
  --ink-meta:        #9398A1;  /* mono meta labels */
  --ink-4:           #B6BAC2;  /* faint text, axis labels */
  --ink-disabled:    #C2C6CE;  /* disabled glyphs, neutral dots */
  --ink-faint:       #E2E4E9;  /* faintest line, dashed gridlines */
  --on-ink:          #FCFCFD;  /* text/icons on graphite */

  /* ---- Accent (functional only; default Blue) ---- */
  --accent:          #4C6FE5;
  --accent-ink:      #4C6FE5;  /* accent text on light */
  --accent-on-fill:  #FCFCFD;  /* text on accent fill */
  --accent-soft:     rgba(76,111,229,.10);
  --accent-border:   rgba(76,111,229,.42);
  --accent-glow:     0 0 0 4px rgba(76,111,229,.12);

  /* ---- Highlight / Alert (one warm color for attention + button hover) ---- */
  --highlight:        #F2762E;
  --highlight-soft:   rgba(242,118,46,.12);
  --highlight-border: rgba(242,118,46,.5);

  /* ---- Semantic (tiny dots & status only) ---- */
  --sem-critical:    #E0584E;
  --sem-warning:     #E0A23C;
  --sem-positive:    #2FA56A;
  --sem-neutral:     #C2C6CE;
  --sem-info:        var(--accent);

  /* ---- Selection ---- */
  --selection-bg:    #26282E;
  --selection-fg:    #FCFCFD;
}

/* Alternate accent presets — set [data-accent] on :root or any scope.
   Each only remaps the --accent-* group; the neutral ramp never changes. */
:root[data-accent="green"] {
  --accent: #1FA567; --accent-ink: #1FA567; --accent-on-fill: #FCFCFD;
  --accent-soft: rgba(31,165,103,.12); --accent-border: rgba(31,165,103,.42);
  --accent-glow: 0 0 0 4px rgba(31,165,103,.12);
}
:root[data-accent="amber"] {
  --accent: #D66D2C; --accent-ink: #B0521A; --accent-on-fill: #FCFCFD;
  --accent-soft: rgba(214,109,44,.12); --accent-border: rgba(214,109,44,.45);
  --accent-glow: 0 0 0 4px rgba(214,109,44,.14);
}
:root[data-accent="violet"] {
  --accent: #7A5AF0; --accent-ink: #7A5AF0; --accent-on-fill: #FCFCFD;
  --accent-soft: rgba(122,90,240,.12); --accent-border: rgba(122,90,240,.42);
  --accent-glow: 0 0 0 4px rgba(122,90,240,.12);
}