/* ============================================================
   STABLY — COLOR TOKENS
   Deep-tech, but friendly. Bright sky-blue + warm signal-yellow
   over cool slate neutrals. Never fully black; friendly not grim.
   ============================================================ */
:root {
  /* ---- Brand palette (raw) ---- */
  --sky-500: #5E9BFF;   /* primary brand blue (drone / signal) */
  --sky-600: #4F91FF;   /* logo blue, hover/pressed */
  --sky-400: #84B4FF;   /* lighter blue */
  --sky-300: #AECEFF;   /* tint */
  --sky-100: #E4EFFF;   /* wash / selected bg */
  --sky-050: #F2F7FF;   /* faint wash */

  --signal-400: #FFE279; /* warning / highlight yellow */
  --signal-500: #FFD64A; /* stronger yellow */
  --signal-200: #FFF1BE; /* yellow wash */

  /* ---- Slate neutrals ---- */
  --slate-900: #0F172A;  /* ink / deepest */
  --slate-800: #1E293B;
  --slate-700: #334564;  /* secondary ink (brand slate) */
  --slate-500: #64748B;  /* muted text */
  --slate-400: #94A3B8;  /* disabled / placeholder */
  --slate-300: #CBD5E1;  /* borders, dividers */
  --slate-200: #E2E8F0;  /* subtle border / track */
  --slate-100: #F1F5F9;  /* surface raised */
  --slate-050: #F8FAFC;  /* page background */
  --white:     #FFFFFF;

  /* ---- Semantic status ---- */
  --status-online:  #2BB673;  /* drone active / healthy green */
  --status-online-bg: #E3F7EE;
  --status-warning: #FFD64A;  /* attention (uses signal) */
  --status-warning-bg: #FFF6D6;
  --status-offline: #EF5B5B;  /* fault / offline red */
  --status-offline-bg: #FDEAEA;
  --status-idle:    #94A3B8;  /* standby */
  --status-idle-bg: #EEF2F7;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */
  /* Backgrounds / surfaces */
  --bg-page:        var(--slate-050);
  --bg-surface:     var(--white);
  --bg-raised:      var(--slate-100);
  --bg-inset:       var(--slate-050);
  --bg-inverse:     var(--slate-900);
  --bg-selected:    var(--sky-100);

  /* Text */
  --text-strong:    var(--slate-900);
  --text-body:      var(--slate-700);
  --text-muted:     var(--slate-500);
  --text-faint:     var(--slate-400);
  --text-inverse:   var(--white);
  --text-link:      var(--sky-600);
  --text-on-accent: var(--white);

  /* Brand / accent */
  --accent:         var(--sky-500);
  --accent-strong:  var(--sky-600);
  --accent-soft:    var(--sky-100);
  --highlight:      var(--signal-400);

  /* Borders */
  --border-subtle:  var(--slate-200);
  --border-default: var(--slate-300);
  --border-strong:  var(--slate-400);
  --border-focus:   var(--sky-500);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(94, 155, 255, 0.35);
}