/* ============================================================
   AXIAL — Color tokens
   The product is a dark "blueprint" verification surface.
   Base palette = deep navy canvas. Status colors carry meaning:
   green = verified/pass, amber = marginal, red = fail.
   ============================================================ */

:root {
  /* ---- Blueprint navy ramp (canvas → raised surfaces) ---- */
  --navy-950: #050A12; /* deepest, app shell behind canvas */
  --navy-900: #070D18; /* canvas — the 3D model / blueprint base */
  --navy-850: #0B1220; /* sunken panels */
  --navy-800: #111A2B; /* card / primary surface */
  --navy-750: #15203400;/* (reserved) */
  --navy-700: #18233A; /* raised surface, inputs */
  --navy-600: #1F2D49; /* hover surface */
  --navy-500: #2A3B5C; /* strong border / divider on dark */
  --navy-400: #3A4D72; /* faint strokes */

  /* ---- Ink (text on dark) ---- */
  --white:      #FFFFFF;
  --slate-100:  #E8EEF8; /* primary text */
  --slate-200:  #C7D2E5;
  --slate-300:  #9FAEC8; /* secondary text */
  --slate-400:  #738299; /* muted / captions */
  --slate-500:  #4E5B73; /* faint / disabled */

  /* ---- Hairlines ---- */
  --line-soft:   rgba(255,255,255,0.06);
  --line:        rgba(255,255,255,0.10);
  --line-strong: rgba(255,255,255,0.16);

  /* ---- Axial brand: structural green (verified) ---- */
  --green-300: #4FE3A8;
  --green-400: #1FCB8C; /* member highlight on model */
  --green-500: #0FA977; /* BRAND signature */
  --green-600: #16834A; /* solid fills, badges */
  --green-700: #0E6B3D;
  --green-tint: rgba(15,169,119,0.12);
  --green-glow: rgba(31,203,140,0.35);

  /* ---- Amber: marginal / partial / warning ---- */
  --amber-400: #F2B43A;
  --amber-500: #E0A21A;
  --amber-600: #D08A00; /* deck "partial" fill */
  --amber-tint: rgba(224,162,26,0.14);

  /* ---- Red: fail / critical limit ---- */
  --red-400: #F47174;
  --red-500: #EF4444; /* fail icon */
  --red-600: #D84041; /* fail text / solid */
  --red-700: #B22F30;
  --red-tint: rgba(239,68,68,0.12);
  --red-glow: rgba(239,68,68,0.40);

  /* ---- Steel blue: links / info / blueprint accent ---- */
  --steel-300: #7FB0FF;
  --steel-400: #4C8DFF;
  --steel-500: #2E7DF6;
  --steel-tint: rgba(46,125,246,0.14);

  /* ---- Blueprint grid line ---- */
  --grid-line:       rgba(80,120,180,0.10);
  --grid-line-major: rgba(80,120,180,0.18);

  /* ============================================================
     SEMANTIC ALIASES — author against these
     ============================================================ */
  --canvas:           var(--navy-900);
  --app-shell:        var(--navy-950);
  --surface:          var(--navy-800);
  --surface-sunken:   var(--navy-850);
  --surface-raised:   var(--navy-700);
  --surface-hover:    var(--navy-600);
  --surface-overlay:  rgba(17,26,43,0.92);

  --border:           var(--line);
  --border-soft:      var(--line-soft);
  --border-strong:    var(--line-strong);

  --text-primary:     var(--slate-100);
  --text-secondary:   var(--slate-300);
  --text-muted:       var(--slate-400);
  --text-faint:       var(--slate-500);
  --text-on-brand:    #042417;

  --brand:            var(--green-500);
  --brand-bright:     var(--green-400);
  --brand-strong:     var(--green-600);
  --brand-tint:       var(--green-tint);

  --accent:           var(--steel-500);
  --accent-tint:      var(--steel-tint);
  --link:             var(--steel-400);

  /* Verification status */
  --status-pass:      var(--green-500);
  --status-pass-bg:   var(--green-tint);
  --status-marginal:  var(--amber-500);
  --status-marginal-bg: var(--amber-tint);
  --status-fail:      var(--red-500);
  --status-fail-bg:   var(--red-tint);

  /* Utilisation severity gradient (0% → 100%+) */
  --util-gradient: linear-gradient(90deg, var(--green-500) 0%, var(--amber-500) 70%, var(--red-500) 100%); /* @kind other */
}