/* ===================================================================
   NETWRIX BRAND SYSTEM · DESIGN TOKENS
   The single source of truth. Import this file before any component CSS.
   =================================================================== */

/* -------- Typefaces ----------------------------------------------- */
@font-face { font-family: "Hubot Sans"; src: url("assets/fonts/HubotSans-Regular.ttf")  format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hubot Sans"; src: url("assets/fonts/HubotSans-Medium.ttf")   format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Hubot Sans"; src: url("assets/fonts/HubotSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Hubot Sans"; src: url("assets/fonts/HubotSans-Bold.ttf")     format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: "Syne"; src: url("assets/fonts/Syne-Regular.ttf")  format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Syne"; src: url("assets/fonts/Syne-Medium.ttf")   format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Syne"; src: url("assets/fonts/Syne-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* === COLOR · CORE BRAND ========================================= */
  /* Each family carries a full 100–900 scale; the bare name (e.g.
     --vigilant-blue) is the 500 step. Soft/mist/deep aliases below
     are kept for readability at common usage points. */

  /* Vigilant Blue — primary action, brand voice, CTAs */
  --vigilant-blue-100:    #EFEEFC;
  --vigilant-blue-200:    #D2D0F5;
  --vigilant-blue-300:    #A9A6EC;
  --vigilant-blue-400:    #857FE3;
  --vigilant-blue:        #5851DB;   /* 500 */
  --vigilant-blue-500:    #5851DB;
  --vigilant-blue-600:    #4942B7;
  --vigilant-blue-700:    #3B358F;
  --vigilant-blue-800:    #2D2868;
  --vigilant-blue-900:    #1F1B45;
  --vigilant-blue-soft:   var(--vigilant-blue-300);
  --vigilant-blue-mist:   var(--vigilant-blue-200);

  /* Nightwatch — surveillance, depth, the night the brand watches */
  --nightwatch-100:       #E5E3F0;
  --nightwatch-200:       #A3A1AF;
  --nightwatch-300:       #787386;
  --nightwatch-400:       #48445E;
  --nightwatch:           #1A1536;   /* 500 */
  --nightwatch-500:       #1A1536;
  --nightwatch-600:       #15112B;
  --nightwatch-700:       #15112B;
  --nightwatch-800:       #0F0C20;
  --nightwatch-900:       #07061A;
  --nightwatch-soft:      var(--nightwatch-400);

  /* Beacon Green — signal, success, "we caught it" */
  --beacon-green-100:     #E2FCEB;
  --beacon-green-200:     #B8F8CD;
  --beacon-green-300:     #8AF4AD;
  --beacon-green-400:     #65F394;
  --beacon-green:         #41F27C;   /* 500 */
  --beacon-green-500:     #41F27C;
  --beacon-green-600:     #1FB453;
  --beacon-green-700:     #168A3F;
  --beacon-green-800:     #0E612C;
  --beacon-green-900:     #073818;
  --beacon-green-deep:    var(--beacon-green-600);

  /* Signal Yellow — alert, attention, watch this */
  --signal-yellow-100:    #FEF6DA;
  --signal-yellow-200:    #FCE9A1;
  --signal-yellow-300:    #FADC68;
  --signal-yellow-400:    #F7C82F;
  --signal-yellow:        #F4B400;   /* 500 */
  --signal-yellow-500:    #F4B400;
  --signal-yellow-600:    #C18F00;
  --signal-yellow-700:    #8E6900;
  --signal-yellow-800:    #5C4400;
  --signal-yellow-900:    #2A1F00;

  /* Flashpoint Orange — urgency, hot path, escalation */
  --flashpoint-orange-100:#FFE6DC;
  --flashpoint-orange-200:#FFC4AC;
  --flashpoint-orange-300:#FFA17C;
  --flashpoint-orange-400:#FF8657;
  --flashpoint-orange:    #FF6B35;   /* 500 */
  --flashpoint-orange-500:#FF6B35;
  --flashpoint-orange-600:#CC4F1F;
  --flashpoint-orange-700:#993813;
  --flashpoint-orange-800:#66220A;
  --flashpoint-orange-900:#330F03;

  /* Datawave Blue — secondary informational, tags, data viz */
  --datawave-blue-100:    #D3ECF2;
  --datawave-blue-200:    #A6D8E4;
  --datawave-blue-300:    #7AC5D7;
  --datawave-blue-400:    #4DB1C9;
  --datawave-blue:        #219EBC;   /* 500 */
  --datawave-blue-500:    #219EBC;
  --datawave-blue-600:    #1A7E96;
  --datawave-blue-700:    #145F71;
  --datawave-blue-800:    #0D3F4B;
  --datawave-blue-900:    #072026;

  /* === COLOR · NEUTRALS (Access White scale) ===================== */
  --cream-50:             #FCFAF5;   /* page bg, on-dark text */
  --cream-100:            #F5F2EB;
  --cream-200:            #E2E1DC;   /* hairlines, dividers light */
  --cream-300:            #DCD7CB;   /* tag/chip outlines on cream */
  --stone-300:            #CAC8C4;
  --stone-400:            #B1AFAC;
  --stone-500:            #979693;
  --stone-600:            #7E7D7B;
  --stone-700:            #656462;
  --charcoal-800:         #4C4B4A;
  --stone-800:            #4C4B4A;   /* alias for charcoal-800, scale-style */
  --charcoal-900:         #323231;   /* body text */
  --ink:                  #0A0918;   /* near-black for max contrast */

  /* === SEMANTIC · LIGHT THEME ==================================== */
  --bg:                   var(--cream-50);
  --bg-elevated:          #FFFFFF;
  --bg-sunken:            var(--cream-100);
  --surface-watch:        var(--nightwatch);    /* dark accent surface */
  --text-primary:         var(--nightwatch);
  --text-secondary:       var(--charcoal-800);
  --text-muted:           var(--stone-600);
  --text-on-dark:         var(--cream-50);
  --border-subtle:        var(--cream-200);
  --border-strong:        var(--charcoal-900);

  --accent:               var(--vigilant-blue);
  --accent-on:            var(--cream-50);
  --signal:               var(--beacon-green);
  --warn:                 var(--signal-yellow);
  --hot:                  var(--flashpoint-orange);

  /* === SEMANTIC · ON-DARK OVERLAYS =============================== */
  /* Cream-50 at canonical opacities for use on Nightwatch surfaces. */
  --text-on-dark-strong:  rgba(252, 250, 245, 0.78);  /* body text on dark */
  --text-on-dark-muted:   rgba(252, 250, 245, 0.55);  /* secondary / captions */
  --text-on-dark-faint:   rgba(252, 250, 245, 0.30);  /* tertiary / placeholders */
  --border-on-dark:       rgba(252, 250, 245, 0.14);  /* hairlines on dark */
  --surface-on-dark-tint: rgba(252, 250, 245, 0.08);  /* subtle fills on dark */

  /* === SEMANTIC · CODE BLOCKS ==================================== */
  /* Syntax tokens for documentation code samples. */
  --code-bg:              var(--nightwatch);
  --code-fg:              #E7E4F5;
  --code-keyword:         #BFB9F4;
  --code-string:          var(--beacon-green);
  --code-comment:         #6E6A8A;

  /* === TYPOGRAPHY ================================================ */
  --font-display:         "Hubot Sans", "Inter", system-ui, sans-serif;
  --font-body:            "Hubot Sans", "Inter", system-ui, sans-serif;
  --font-label:           "Syne", "Hubot Sans", system-ui, sans-serif;
  --font-mono:            ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Display scale — Hubot Sans, tight leading */
  --fs-display:           70px;     --lh-display: 1.05;
  --fs-h1:                56px;     --lh-h1:      1.08;
  --fs-h2:                40px;     --lh-h2:      1.12;
  --fs-h3:                32px;     --lh-h3:      1.18;

  /* Body scale */
  --fs-lead:              24px;     --lh-lead:    1.35;
  --fs-body-lg:           21px;     --lh-body-lg: 1.45;
  --fs-body:              16px;     --lh-body:    1.55;
  --fs-small:             14px;     --lh-small:   1.5;

  /* Syne — labels & UI */
  --fs-label-lg:          18px;
  --fs-label:             14px;
  --fs-tag:               12px;     /* uppercase */

  /* === SHAPE & MOTION ============================================ */
  --r-sharp:              0;         /* charts, watchtower frames */
  --r-xs:                 4px;       /* code chips, inline pills, hairline rounds */
  --r-sm:                 8px;       /* small surfaces: code blocks, dense canvases */
  --r-md:                 12px;      /* mid surfaces: impl cards, compact panels */
  --r-card:               16px;      /* cards, tiles, panels */
  --r-pill:               999px;     /* all buttons, CTAs, pills */

  /* Shadows — job-based names */
  --shadow-patrol:        0 1px 2px rgba(26, 21, 54, 0.06), 0 1px 3px rgba(26, 21, 54, 0.04);
  --shadow-surface:       0 4px 12px rgba(26, 21, 54, 0.08);
  --shadow-raised:        0 6px 16px rgba(26, 21, 54, 0.10), 0 2px 4px rgba(26, 21, 54, 0.06);
  --shadow-alert:         0 12px 32px rgba(26, 21, 54, 0.18), 0 4px 8px rgba(26, 21, 54, 0.08);

  --ease-watch:           cubic-bezier(.2, .8, .2, 1);
  --dur-fast:             140ms;
  --dur-base:             220ms;
  --dur-slow:             420ms;

  /* === SPACING (4-step) =========================================== */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;
}

/* ---- Base reset ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ---- Type primitives ----------------------------------------- */
.t-display { font: 400 var(--fs-display)/var(--lh-display) var(--font-display); letter-spacing: -0.02em; }
.t-h1      { font: 500 var(--fs-h1)/var(--lh-h1) var(--font-display); letter-spacing: -0.02em; }
.t-h2      { font: 500 var(--fs-h2)/var(--lh-h2) var(--font-display); letter-spacing: -0.015em; }
.t-h3      { font: 600 var(--fs-h3)/var(--lh-h3) var(--font-display); letter-spacing: -0.01em; }
.t-lead    { font: 400 var(--fs-lead)/var(--lh-lead) var(--font-body); }
.t-body-lg { font: 400 var(--fs-body-lg)/var(--lh-body-lg) var(--font-body); }
.t-body    { font: 400 var(--fs-body)/var(--lh-body) var(--font-body); }
.t-small   { font: 400 var(--fs-small)/var(--lh-small) var(--font-body); color: var(--text-muted); }

.t-label   { font: 500 var(--fs-label)/1.4 var(--font-label); letter-spacing: 0.01em; }
.t-tag     { font: 500 var(--fs-tag)/1.4 var(--font-label); letter-spacing: 0.12em; text-transform: uppercase; }
.t-mono    { font: 400 var(--fs-small)/var(--lh-small) var(--font-mono); }