/* ═══════════════════════════════════════════════════════════
   OHTTEK — Design Tokens
   UI Agent: All visual values live here. Never hardcode in components.
═══════════════════════════════════════════════════════════ */

:root {
  /* ── Surface scale (dark default) ─── */
  --bg:        #1e1e24;
  --s1:        #26262e;
  --s2:        #2e2e38;
  --s3:        #363642;
  --s4:        #40404e;
  --border:    #4a4a5a;
  --border-l:  #585868;

  /* ── Text scale ─── */
  --tx:   #f4f4fa;
  --tx2:  #aaaacc;
  --tx3:  #6e6e90;

  /* ── Accent (white on dark, near-black on light) ─── */
  --ac:      #ffffff;
  --ac-d:    #cccccc;
  --ac-bg:   rgba(255,255,255,.07);
  --ac-glow: rgba(255,255,255,.12);

  /* ── Status colours ─── */
  --green:  #34d399; --green-bg:  rgba(52,211,153,.1);
  --amber:  #fbbf24; --amber-bg:  rgba(251,191,36,.1);
  --red:    #f87171; --red-bg:    rgba(248,113,113,.1);
  --blue:   #60a5fa; --blue-bg:   rgba(96,165,250,.1);
  --purple: #c084fc; --purple-bg: rgba(192,132,252,.1);
  --teal:   #2dd4bf; --teal-bg:   rgba(45,212,191,.1);

  /* ── Layout ─── */
  --sb-w:             220px;
  --sb-w-collapsed:   56px;
  --tb-h:             54px;
  --r:     10px;
  --r-lg:  16px;

  /* ── Typography ─── */
  --font-display: 'Syne', sans-serif;
  --font-body:    'Instrument Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  font-family: var(--font-body);
  font-size: 14px;
  color-scheme: dark;
}

/* ── Light theme ─── */
body.light {
  --bg:        #f0f0f4;
  --s1:        #ffffff;
  --s2:        #f5f5f8;
  --s3:        #eaeaee;
  --s4:        #dedee4;
  --border:    #d0d0d8;
  --border-l:  #c0c0cc;

  --tx:   #111118;
  --tx2:  #555566;
  --tx3:  #9090a8;

  --ac:      #111118;
  --ac-d:    #333344;
  --ac-bg:   rgba(0,0,0,.06);
  --ac-glow: rgba(0,0,0,.08);

  --green-bg:  rgba(52,211,153,.15);
  --amber-bg:  rgba(251,191,36,.15);
  --red-bg:    rgba(248,113,113,.15);
  --blue-bg:   rgba(96,165,250,.15);
  --purple-bg: rgba(192,132,252,.15);
  --teal-bg:   rgba(45,212,191,.15);

  color-scheme: light;
}