/* FILE: css/base.css — Reset, CSS variables, typography */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Rajdhani:wght@400;500;600;700&family=Orbitron:wght@400;700;900&display=swap');

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

/* ── Design Tokens ──────────────────────────────────────────────────────────── */
:root {
  /* Panel surfaces */
  --c-panel-dark:    #111214;
  --c-panel-mid:     #1a1d21;
  --c-panel-light:   #242830;
  --c-panel-raised:  #2d3138;
  --c-trim:          #3a3f48;
  --c-trim-bright:   #52585f;
  --c-aluminum:      #7a8290;

  /* Status colors */
  --c-green:         #00e676;
  --c-green-dim:     #00913d;
  --c-green-glow:    rgba(0,230,118,0.25);
  --c-amber:         #ffab00;
  --c-amber-dim:     #b37a00;
  --c-amber-glow:    rgba(255,171,0,0.25);
  --c-red:           #ff1744;
  --c-red-dim:       #c0001f;
  --c-red-glow:      rgba(255,23,68,0.25);
  --c-blue:          #00b0ff;
  --c-blue-dim:      #0077b3;
  --c-orange:        #ff6d00;
  --c-orange-dim:    #b34c00;
  --c-gray:          #555d6b;
  --c-gray-dim:      #383e47;
  --c-cyan:          #00e5ff;
  --c-purple:        #d500f9;
  --c-white:         #e8eaf0;
  --c-text-dim:      #8b93a0;
  --c-text-muted:    #555d6b;

  /* Semantic aliases */
  --c-energized:     var(--c-amber);
  --c-nominal:       var(--c-green);
  --c-trip:          var(--c-red);
  --c-coolant:       var(--c-blue);
  --c-hv:            var(--c-orange);
  --c-deenergized:   var(--c-gray);
  --c-steam:         #bdd9f2;
  --c-hot:           #ff5722;
  --c-cold:          #29b6f6;

  /* Typography */
  --font-mono:    'Share Tech Mono', 'Courier New', monospace;
  --font-display: 'Orbitron', 'Rajdhani', sans-serif;
  --font-label:   'Rajdhani', 'Arial Narrow', sans-serif;
  --font-ui:      'Rajdhani', system-ui, sans-serif;

  /* Font sizes */
  --fs-tiny:   0.65rem;
  --fs-xs:     0.72rem;
  --fs-sm:     0.80rem;
  --fs-base:   0.875rem;
  --fs-md:     1.0rem;
  --fs-lg:     1.125rem;
  --fs-xl:     1.35rem;
  --fs-2xl:    1.75rem;
  --fs-3xl:    2.25rem;
  --fs-4xl:    3.0rem;

  /* Spacing */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  /* Borders */
  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px;
  --border-panel: 1px solid var(--c-trim);
  --border-bright: 1px solid var(--c-trim-bright);

  /* Shadows */
  --shadow-panel: 0 2px 8px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow-raised: 0 4px 12px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.4);
  --shadow-inset:  inset 0 2px 6px rgba(0,0,0,0.5), inset 0 1px 2px rgba(0,0,0,0.3);
  --shadow-glow-green:  0 0 8px var(--c-green-glow);
  --shadow-glow-amber:  0 0 8px var(--c-amber-glow);
  --shadow-glow-red:    0 0 8px var(--c-red-glow);
}

/* ── Typography ────────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  color: var(--c-white);
  background: var(--c-panel-dark);
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.01em;
}

.font-mono    { font-family: var(--font-mono); }
.font-display { font-family: var(--font-display); letter-spacing: 0.08em; }
.font-label   { font-family: var(--font-label); font-weight: 600; letter-spacing: 0.05em; }

/* Numeric readout — always monospace */
.readout, .value, .numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Label styles */
.label-xs  { font-size: var(--fs-xs);  color: var(--c-text-dim);  text-transform: uppercase; letter-spacing: 0.06em; }
.label-sm  { font-size: var(--fs-sm);  color: var(--c-text-dim);  text-transform: uppercase; letter-spacing: 0.05em; }
.label-md  { font-size: var(--fs-md);  font-weight: 600; }
.panel-title {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-aluminum);
}
.section-title {
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-trim-bright);
  border-bottom: 1px solid var(--c-trim);
  padding-bottom: 2px;
  margin-bottom: var(--sp-2);
}

/* Status text colors */
.text-green  { color: var(--c-green); }
.text-amber  { color: var(--c-amber); }
.text-red    { color: var(--c-red);   }
.text-blue   { color: var(--c-blue);  }
.text-orange { color: var(--c-orange);}
.text-gray   { color: var(--c-gray);  }
.text-dim    { color: var(--c-text-dim); }
.text-muted  { color: var(--c-text-muted); }
.text-white  { color: var(--c-white); }
.text-cyan   { color: var(--c-cyan);  }

/* ── Utility classes ────────────────────────────────────────────────────────── */
.hidden   { display: none !important; }
.invisible{ visibility: hidden; }
.flex     { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.gap-1    { gap: var(--sp-1); }
.gap-2    { gap: var(--sp-2); }
.gap-3    { gap: var(--sp-3); }
.gap-4    { gap: var(--sp-4); }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.relative { position: relative; }
.absolute { position: absolute; }
.overflow-hidden { overflow: hidden; }
.pointer { cursor: pointer; }
.no-select { user-select: none; }
.italic { font-style: italic; }