/* ============================================================
   OBSTEC · Color tokens
   Dark-first. The brand lives on near-black (#080A0D), with a
   single vivid signal red (#E31C36, sampled from the logo) and a
   machined-silver secondary. Status colors carry real meaning in
   the product (printers, tunnels, agents online/offline).
   ============================================================ */

:root {
  /* ---- Raw neutrals (dark scale) ---------------------------- */
  --obs-black:      #060709;
  --obs-ink-950:    #080A0D;   /* page background — brand theme-color */
  --obs-ink-900:    #0C0F14;
  --obs-ink-850:    #0F1318;   /* raised card */
  --obs-ink-800:    #141921;   /* overlay / input */
  --obs-ink-750:    #1A212B;   /* inset well */
  --obs-ink-700:    #232C38;   /* hover surface */
  --obs-ink-600:    #2E3845;   /* strong border */
  --obs-ink-500:    #3C4756;

  /* ---- Neutral text ----------------------------------------- */
  --obs-white:      #FBFCFD;
  --obs-gray-100:   #EDEFF2;
  --obs-gray-300:   #AEB6C1;
  --obs-gray-400:   #828B97;
  --obs-gray-500:   #626B77;
  --obs-gray-600:   #454D58;

  /* ---- Machined silver (brand secondary / the logo ring) ---- */
  --obs-silver-100: #E8E9EB;
  --obs-silver-200: #CFD1D4;
  --obs-silver-400: #9A989A;   /* sampled ring tone */
  --obs-silver-600: #6E7174;
  --obs-silver-800: #494B4E;

  /* ---- Signal red (brand primary) --------------------------- */
  --obs-red-300:    #FF5567;   /* glow / hover-lift */
  --obs-red-400:    #F12B43;
  --obs-red-500:    #E31C36;   /* PRIMARY brand red — sampled */
  --obs-red-600:    #C01228;
  --obs-red-700:    #920C1E;
  --obs-red-900:    #2A0509;   /* tint wash on dark */

  /* ---- Semantic / status hues ------------------------------- */
  --obs-green-500:  #2FBF71;   /* online / healthy */
  --obs-green-900:  #06241A;
  --obs-amber-500:  #F2B23E;   /* idle / attention */
  --obs-amber-900:  #2A1F08;
  --obs-blue-500:   #3B9EFF;   /* printing / active / info */
  --obs-blue-900:   #08203A;
  --obs-red-status: #F12B43;   /* error / fault */

  /* ============================================================
     Semantic aliases — reference THESE in components.
     ============================================================ */

  /* Surfaces */
  --surface-page:     var(--obs-ink-950);
  --surface-sunken:   var(--obs-black);
  --surface-card:     var(--obs-ink-850);
  --surface-raised:   var(--obs-ink-800);
  --surface-overlay:  var(--obs-ink-800);
  --surface-inset:    var(--obs-ink-750);
  --surface-hover:    var(--obs-ink-700);

  /* Borders / dividers */
  --border-subtle:    #1A212B;
  --border-default:   #232C38;
  --border-strong:    var(--obs-ink-600);
  --border-metal:     var(--obs-silver-800);

  /* Text */
  --text-primary:     var(--obs-gray-100);
  --text-secondary:   var(--obs-gray-300);
  --text-muted:       var(--obs-gray-400);
  --text-faint:       var(--obs-gray-500);
  --text-on-accent:   var(--obs-white);
  --text-link:        var(--obs-blue-500);

  /* Accent (brand red) */
  --accent:           var(--obs-red-500);
  --accent-hover:     var(--obs-red-400);
  --accent-press:     var(--obs-red-600);
  --accent-tint:      var(--obs-red-900);
  --accent-contrast:  var(--obs-white);

  /* Focus */
  --focus-ring:       var(--obs-red-400);
  --focus-ring-alpha: rgba(241, 43, 67, 0.40);

  /* Status (product semantics) */
  --status-online:    var(--obs-green-500);
  --status-online-bg: var(--obs-green-900);
  --status-printing:  var(--obs-blue-500);
  --status-printing-bg: var(--obs-blue-900);
  --status-idle:      var(--obs-amber-500);
  --status-idle-bg:   var(--obs-amber-900);
  --status-offline:   var(--obs-gray-500);
  --status-offline-bg:#161B22;
  --status-error:     var(--obs-red-status);
  --status-error-bg:  var(--obs-red-900);

  /* Feedback (forms / toasts) */
  --success:          var(--obs-green-500);
  --warning:          var(--obs-amber-500);
  --danger:           var(--obs-red-status);
  --info:             var(--obs-blue-500);
}