/* ==============================================
   INTELLEX FABRICA — Brand Tokens
   Single source of truth for all products.
   Edit here → applies everywhere.
   ============================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Rajdhani:wght@400;600;700&family=IBM+Plex+Mono:wght@300;400;500&display=swap');

:root {
  /* --- Backgrounds (darkest → lightest) --- */
  --bg:  #060c18;
  --bg0: #060c18;
  --bg1: #0a0d1a;
  --bg2: #0f1428;
  --bg3: #141936;

  /* --- Brand Blue-Purple --- */
  --p1: #6666ff;
  --p2: #4444cc;
  --p3: #2222aa;

  /* --- Accents --- */
  --acc:  #a3aaff;
  --acc2: #c8aaff;
  --acc3: #a3a3ff;

  /* --- Orange (CTA / Warning) --- */
  --hab:       #f98513;
  --hab-dark:  #e07610;
  --hab-light: #ffaa55;
  --hab-dim:   rgba(249, 133, 19, 0.12);

  /* --- Borders --- */
  --border:  rgba(102, 102, 255, 0.15);
  --border2: rgba(102, 102, 255, 0.30);
  --steel:   rgba(102, 102, 255, 0.22);

  /* --- Text --- */
  --text:     #e8e0f5;
  --text-mid: rgba(232, 224, 245, 0.6);
  --text-dim: rgba(232, 224, 245, 0.2);
  --muted:    rgba(232, 224, 245, 0.6);  /* alias → --text-mid */
  --dim:      rgba(232, 224, 245, 0.2);  /* alias → --text-dim */

  /* --- Semantic (status / alerts) --- */
  --warn:       #f98513;
  --danger:     #e04040;
  --good:       #1a8a50;
  --good-light: #3de080;

  /* --- Typography --- */
  --sans:    'Inter', sans-serif;
  --mono:    'IBM Plex Mono', monospace;
  --display: 'Rajdhani', sans-serif;

  /* --- RGB decompositions (for color-mix / rgba math) --- */
  --bg-rgb:   6, 12, 24;
  --p1-rgb:   102, 102, 255;
  --p2-rgb:   68, 68, 204;
  --p3-rgb:   34, 34, 170;
  --hab-rgb:  249, 133, 19;
  --acc-rgb:  163, 170, 255;
  --text-rgb: 232, 224, 245;

  /* --- Data-viz palette (diagram layers) --- */
  --viz-iot:  #22d3ee;
  --viz-ops:  #34d399;
  --viz-qual: #fb923c;
  --viz-anly: #e879f9;
  --viz-raw:  #92b1f5;   /* raw material node */
  --viz-mach: #56d49a;   /* machine parameter node */
}

/* --- Global base --- */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background-color: var(--bg);
  background-image:
    linear-gradient(color-mix(in srgb, var(--p1) 10%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--p1) 4%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  color: var(--text);
  font-family: var(--sans);
  margin: 0;
}