/* ============================================================
   COLORS
   Sampled from the SYNCO Opsroom: cyber-white fibreglass shells,
   signal-orange upholstery, dark-graphite frames, and the four
   illuminated status-board signal colors (blue / red / yellow /
   green). These are operational colors — each one means
   something. Do not use them decoratively.
   ============================================================ */

:root {
  /* --- Brand primaries ------------------------------------ */
  --c-cyber-white:      #F6F4EF;   /* fibreglass shell, light surfaces */
  --c-signal-orange:    #E95C2B;   /* the Cybersyn orange — primary accent */
  --c-graphite:         #232323;   /* frames, dark structure */

  /* --- Signal / data colors (the status boards) ----------- */
  --c-signal-blue:      #2946D3;   /* nominal data, flow lines */
  --c-signal-red:       #D63A3A;   /* intervention / critical */
  --c-signal-yellow:    #F0C83D;   /* attention / caution */
  --c-signal-green:     #4C9B63;   /* operational / nominal-ok */

  /* tints / shades for fills, hovers and bands */
  --c-orange-700:       #C5481E;
  --c-orange-300:       #F2916D;
  --c-orange-100:       #FBE2D7;
  --c-blue-700:         #1E33A6;
  --c-blue-100:         #DBE0F7;
  --c-red-700:          #AE2B2B;
  --c-red-100:          #F7DBDB;
  --c-yellow-700:       #C29A14;
  --c-yellow-100:       #FBF1CE;
  --c-green-700:        #3A7A4D;
  --c-green-100:        #DCEDE2;

  /* --- Neutrals ------------------------------------------- */
  --c-bg-dark:          #1D1D1D;   /* opsroom wall / dark mode field */
  --c-bg-medium:        #2D2D2D;   /* raised panel on dark */
  --c-bg-screen:        #141B3D;   /* CRT screen navy */
  --c-bg-screen-2:      #1E2A5E;   /* CRT screen navy, lighter */
  --c-bg-light:         #EAE8E2;   /* light field */
  --c-paper:            #F6F4EF;   /* default light surface */

  --c-ink-900:          #101010;   /* text primary */
  --c-ink-600:          #555555;   /* text secondary */
  --c-ink-400:          #8A8780;   /* text tertiary / muted */
  --c-line:             #232323;   /* hard geometric borders */
  --c-line-soft:        #C9C6BD;   /* hairline on light */
  --c-line-dark:        #3A3A3A;   /* hairline on dark */

  /* warm wood — the panelled walls, used sparingly as accent */
  --c-wood:             #B07A3C;
  --c-wood-dark:        #7C5326;

  /* ============================================================
     SEMANTIC ALIASES — prefer these in product code.
     ============================================================ */

  /* surfaces */
  --surface-page:       var(--c-paper);
  --surface-panel:      #FFFFFF;
  --surface-sunken:     var(--c-bg-light);
  --surface-screen:     var(--c-bg-screen);   /* dark CRT data surface */
  --surface-inverse:    var(--c-graphite);

  /* text */
  --text-body:          var(--c-ink-900);
  --text-muted:         var(--c-ink-600);
  --text-faint:         var(--c-ink-400);
  --text-on-dark:       var(--c-cyber-white);
  --text-on-accent:     var(--c-cyber-white);
  --text-link:          var(--c-signal-blue);

  /* accent */
  --accent:             var(--c-signal-orange);
  --accent-hover:       var(--c-orange-700);
  --accent-tint:        var(--c-orange-100);

  /* borders */
  --border-strong:      var(--c-line);
  --border-soft:        var(--c-line-soft);

  /* status (cybernetic alert states) */
  --status-operational: var(--c-signal-green);
  --status-attention:   var(--c-signal-yellow);
  --status-intervene:   var(--c-signal-red);
  --status-info:        var(--c-signal-blue);

  --status-operational-tint: var(--c-green-100);
  --status-attention-tint:   var(--c-yellow-100);
  --status-intervene-tint:   var(--c-red-100);
  --status-info-tint:        var(--c-blue-100);

  /* focus ring */
  --focus-ring:         var(--c-signal-blue);
}