/* ============================================================
   TECH IN SPADES — COLOR & TYPE FOUNDATIONS
   Aesthetic: TRON (1982) + 80s cyber grid. Dark void only.
   Dual faction: cyan (PROGRAM) + orange (MCP).
   Fonts loaded from Google Fonts CDN — see @import below.
   ============================================================ */

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

:root {
  /* ---- VOID / GRID SURFACES (neutrals) ---- */
  --void:        #080c12;  /* base canvas — never lighter */
  --grid:        #0a1628;  /* grid backdrop */
  --surface:     #0d1a2e;  /* card / panel surface */
  --panel:       #122240;  /* raised panel */
  --raised:      #1e3354;  /* hover / active surface */
  --line:        #2e4d75;  /* hard divider */
  --line-soft:   #4a6d99;  /* secondary divider */

  /* ---- CYAN FACTION · PROGRAM (primary) ---- */
  --cyan-900: #004d66;
  --cyan-700: #007799;
  --cyan-500: #00b8cc;   /* cyan-dim */
  --cyan:     #00e5ff;   /* BASE — primary CTA, active, system */
  --cyan-300: #80f2ff;
  --cyan-100: #ccfbff;
  --cyan-glow: rgba(0, 229, 255, 0.18);

  /* ---- ORANGE FACTION · MCP (energy / tension) ---- */
  --orange-900: #4d1f00;
  --orange-700: #7a3300;
  --orange-500: #cc5200;  /* orange-dim */
  --orange:     #ff6600;  /* BASE — warning, energy, antagonist */
  --orange-300: #ff9966;
  --orange-100: #ffe5d4;
  --orange-glow: rgba(255, 102, 0, 0.18);

  /* ---- TEXT ---- */
  --fg1: #e8f4f8;  /* primary text */
  --fg2: #7ab3c4;  /* secondary text */
  --fg3: #4a6d99;  /* tertiary / muted */
  --fg-mono: #00e5ff; /* monospace accent */

  /* ---- SEMANTIC STATUS ---- */
  --ok:    #00e5ff;  /* online / active → cyan */
  --warn:  #ff6600;  /* warning / critical → orange */
  --info:  #80f2ff;
  --idle:  #4a6d99;

  /* ---- EXPRESSIVE / SOCIAL SPADE TINTS (logo variants only) ---- */
  --spade-blue:   #1f8fff;  /* fb variant */
  --spade-coral:  #ee5f52;  /* ig variant */
  --spade-violet: #c0289a;  /* ig variant */

  /* ---- BORDERS ---- */
  --border-cyan:   rgba(0, 229, 255, 0.25);
  --border-orange: rgba(255, 102, 0, 0.25);
  --border-neutral: rgba(255, 255, 255, 0.10);

  /* ---- RADII (hard edges — 2–4px max) ---- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-pill: 999px; /* faction dots / status only */

  /* ---- SPACING SCALE ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 40px;
  --s-6: 64px;

  /* ---- FONTS ---- */
  --font-display: 'Rajdhani', sans-serif;  /* uppercase, tracked */
  --font-mono:    'Share Tech Mono', monospace;

  /* ---- GRID TEXTURE (use as background-image on a positioned layer) ---- */
  --grid-lines:
    linear-gradient(rgba(0,229,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,0.07) 1px, transparent 1px);
  --grid-size: 40px 40px;
}

/* ============================================================
   SEMANTIC TYPE RAMP
   Display = Rajdhani uppercase tracked. Mono = Share Tech Mono.
   ============================================================ */

.ds-h1 {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--cyan);
}
.ds-h2 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--fg1);
}
.ds-h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg1);
}
.ds-eyebrow,
.ds-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--cyan-500);
}
.ds-body {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--fg1);
}
.ds-mono,
.ds-code {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--cyan-500);
  line-height: 1.7;
}
.ds-caption {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg2);
}