/* ============================================================
   DevEx Research — Color tokens
   Dark, terminal-inflected base. One signal (voltage yellow),
   one technical accent (cyan), one rare human accent (amber).
   USAGE RULE: never use all three accents in one viewport.
   ============================================================ */

:root {
  /* --- Base palette (raw values) --- */
  --black:        #08080f;   /* page base */
  --ink-900:      #0b0b14;
  --ink-850:      #0f0f1a;   /* surface */
  --ink-800:      #12121e;   /* surface raised / border-faint */
  --ink-700:      #1a1a2e;   /* border */
  --ink-600:      #26263c;   /* border strong / hairline hover */
  --bone:         #f0ece4;   /* primary text — warm off-white */
  --bone-dim:     #cbc7bf;
  --muted:        #8a8a96;   /* secondary text */
  --muted-2:      #44444f;   /* tertiary / metadata / disabled */
  --muted-3:      #2c2c38;

  /* --- Accents (raw) --- */
  --signal:       #e8ff00;   /* voltage yellow — primary signal */
  --signal-dim:   #b8c900;
  --signal-glow:  rgba(232,255,0,0.16);
  --cyan:         #00d4ff;    /* secondary — links, data, technical */
  --cyan-dim:     #00a6c7;
  --cyan-glow:    rgba(0,212,255,0.14);
  --amber:        #ff9e2c;    /* rare — human / craft / relational */
  --amber-dim:    #d97f12;
  --amber-glow:   rgba(255,158,44,0.16);

  /* --- Status (derived, used sparingly) --- */
  --danger:       #ff5050;
  --success:      #5cd6a0;

  /* ============================================================
     Semantic aliases — reference these in components, not raw.
     ============================================================ */
  --bg:               var(--black);
  --bg-deep:          #050508;            /* code blocks, wells */
  --surface:          var(--ink-850);
  --surface-raised:   var(--ink-800);
  --surface-card:     var(--ink-850);

  --border:           var(--ink-700);
  --border-faint:     var(--ink-800);
  --border-strong:    var(--ink-600);

  --text:             var(--bone);
  --text-strong:      #ffffff;
  --text-body:        var(--muted);
  --text-muted:       var(--muted);
  --text-faint:       var(--muted-2);

  --accent:           var(--signal);      /* primary signal */
  --accent-press:     var(--signal-dim);
  --link:             var(--cyan);
  --link-press:       var(--cyan-dim);
  --human:            var(--amber);       /* relational moments only */

  --focus-ring:       var(--cyan);
  --selection-bg:     var(--signal);
  --selection-text:   var(--black);
}

::selection { background: var(--selection-bg); color: var(--selection-text); }