/* =========================================================================
   BLUEPRINT DESIGN SYSTEM — COLORS & TYPE
   A system for software-architecture diagrams & technical presentations.
   Dark-mode native. High contrast. Neon-technical accents.
   ========================================================================= */

/* --------- FONT FACES ---------------------------------------------------- */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/SpaceGrotesk-400.woff2") format("woff2-variations"),
       url("fonts/SpaceGrotesk-400.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/JetBrainsMono-400.woff2") format("woff2-variations"),
       url("fonts/JetBrainsMono-400.woff2") format("woff2");
}

:root {
  /* =====================================================================
     COLORS — BACKGROUNDS (the "dark room")
     ===================================================================== */
  --bg-void:        #0A0A0A;   /* deepest black — outermost canvas      */
  --bg-base:        #0D1117;   /* slate blue-black — default app background */
  --bg-surface:     #161B22;   /* anthracite — node / card fill         */
  --bg-surface-2:   #1C232C;   /* lifted surface — hovered node         */
  --bg-inset:       #080B10;   /* recessed — code blocks, inputs        */

  /* Grid — very subtle, for scale context only */
  --grid-dot:       #2A2E35;
  --grid-line:      #1F242C;

  /* =====================================================================
     COLORS — BORDERS & DIVIDERS
     ===================================================================== */
  --border-hairline: #222A34;  /* 1px default surface edge              */
  --border-solid:    #2E3744;  /* stronger divider                      */
  --border-muted:    #151B23;  /* barely-there (on surface)             */

  /* =====================================================================
     COLORS — FUNCTIONAL ACCENTS (neon / technical)
     ===================================================================== */
  --accent-cyan:        #00F0FF;   /* sync traffic, active DBs, primary flow */
  --accent-cyan-dim:    #008C96;   /* non-active trail                 */
  --accent-cyan-glow:   rgba(0,240,255,0.18);

  --accent-lime:        #39FF14;   /* async events, pub/sub, success   */
  --accent-lime-dim:    #1F8C0B;
  --accent-lime-glow:   rgba(57,255,20,0.16);

  --accent-orange:      #FF5E00;   /* legacy, bottlenecks, latency     */
  --accent-orange-dim:  #8C3400;
  --accent-orange-glow: rgba(255,94,0,0.18);

  /* Secondary technical (not in the primary brief but needed for kits) */
  --accent-violet:      #B06BFF;   /* identity / auth / secrets         */
  --accent-yellow:      #FFD400;   /* warning / throttle                */
  --accent-red:         #FF2D55;   /* error / failed requests           */

  /* =====================================================================
     COLORS — FOREGROUND / TEXT
     ===================================================================== */
  --fg-1:  #FFFFFF;   /* titles, node names, highest hierarchy */
  --fg-2:  #C9D1D9;   /* body text, labels                     */
  --fg-3:  #8B949E;   /* metadata, secondary                   */
  --fg-4:  #5A6370;   /* hints, placeholders                   */
  --fg-5:  #3B434E;   /* disabled / ghost                      */

  /* =====================================================================
     TYPOGRAPHY — FAMILIES
     ===================================================================== */
  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Fira Code", Menlo, monospace;

  /* =====================================================================
     TYPOGRAPHY — BASE SCALE
     Geometric, precise. Line-heights tight for sans; relaxed for mono.
     ===================================================================== */
  --fs-display:  72px;
  --fs-h1:       48px;
  --fs-h2:       32px;
  --fs-h3:       22px;
  --fs-h4:       16px;
  --fs-body:     14px;
  --fs-meta:     12px;
  --fs-micro:    10px;

  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-normal:  1.45;
  --lh-mono:    1.55;

  --tracking-wide:   0.12em;
  --tracking-normal: 0;
  --tracking-tight: -0.02em;

  /* =====================================================================
     GEOMETRY — radii, borders, spacing
     ===================================================================== */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;       /* maximum radius — anything larger breaks the system */
  --bw-hair: 1px;
  --bw-bold: 2px;
  --bw-thick: 3px;  /* used only for boundary dashed boxes */

  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;

  /* Elevation / depth — NO diffuse drop-shadows. Use rigid offsets. */
  --elev-offset-1: 2px 2px 0 0 var(--border-solid);
  --elev-offset-2: 4px 4px 0 0 var(--border-solid);
  --elev-inner:    inset 0 0 0 1px var(--border-hairline);

  /* Motion */
  --ease-blueprint: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-precise:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:       150ms;
  --dur-base:       280ms;
  --dur-slow:       520ms;
  --dur-draw:       900ms;   /* line-drawing animations */
}

/* =========================================================================
   LIGHT THEME — "blueprint-on-paper"
   Not cheerful; a technical paper mode for print / docs / light prefs.
   ========================================================================= */
html[data-theme="light"] {
  --bg-void:       #ECECE6;
  --bg-base:       #F3F2EC;
  --bg-surface:    #FFFFFF;
  --bg-surface-2:  #F7F5EE;
  --bg-inset:      #E8E6DE;
  --grid-dot:      #CFCDC3;
  --grid-line:     #DDDBD2;
  --border-hairline: #C9C6BA;
  --border-solid:    #A5A294;
  --border-muted:    #DBD9CE;
  --fg-1: #0A0A0A;
  --fg-2: #1F232A;
  --fg-3: #5A6370;
  --fg-4: #8B949E;
  --fg-5: #B8B5A8;
  --accent-cyan:   #0093A6;
  --accent-lime:   #2E8B00;
  --accent-orange: #C84600;
}

/* =========================================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ========================================================================= */

html, body {
  background: var(--bg-base);
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02", "cv11";
}

.display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.h1 { font: 700 var(--fs-h1)/var(--lh-tight) var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.h2 { font: 700 var(--fs-h2)/var(--lh-snug) var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.h3 { font: 600 var(--fs-h3)/var(--lh-snug) var(--font-sans); color: var(--fg-1); }
.h4 { font: 600 var(--fs-h4)/var(--lh-snug) var(--font-sans); color: var(--fg-1); }
.p  { font: 400 var(--fs-body)/var(--lh-normal) var(--font-sans); color: var(--fg-2); }

/* Node title — uppercase, wide-tracked, geometric */
.node-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h4);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-1);
}

/* Eyebrow / section label */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-3);
}

/* Mono — metadata, IPs, ports, tech names, code */
.mono     { font: 400 var(--fs-meta)/var(--lh-mono) var(--font-mono); color: var(--fg-3); }
.mono-md  { font: 400 var(--fs-body)/var(--lh-mono) var(--font-mono); color: var(--fg-2); }
.mono-xs  { font: 400 var(--fs-micro)/var(--lh-mono) var(--font-mono); color: var(--fg-4); }
.code     { font: 400 var(--fs-body)/var(--lh-mono) var(--font-mono); color: var(--accent-cyan); background: var(--bg-inset); padding: 2px 6px; border-radius: var(--r-1); }

/* Numeric emphasis */
.stat {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h1);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}