/* ==========================================================================
   RootOS Design System: Titanium & Frost Tokens (North American Enterprise)
   Architecture: Synapse High Board / Chief System Architect
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800;900&display=swap');

:root {
  /* 1. Spatial & Atmosphere Tokens */
  --root-bg-dark: #050505;                /* Industrial Deep Black */
  --root-bg-void: #050B14;                /* Cyber Void Abyss */
  --root-card-glass: rgba(18, 24, 33, 0.85); /* Frost Glass Matrix */
  --root-card-glass-hover: rgba(24, 33, 46, 0.95);
  --root-border-glass: rgba(0, 240, 255, 0.18); /* Crystal Neon Border */
  --root-border-subtle: rgba(255, 255, 255, 0.08);
  --root-glass-glow: 0 0 35px rgba(0, 240, 255, 0.12);

  /* 2. Neon Spectrum & Accents */
  --root-cyan: #00F0FF;                   /* Cybernetic Radiant Blue */
  --root-cyan-glow: rgba(0, 240, 255, 0.45);
  --root-cyan-dim: rgba(0, 240, 255, 0.08);
  --root-teal: #45A29E;                   /* Tempered Strategic Teal */
  --root-gold: #D4AF37;                   /* Classical Sovereign Gold (CTA) */
  --root-gold-hover: #F4D06F;
  --root-gold-glow: rgba(212, 175, 55, 0.35);

  /* 3. Typography & Monochromatic Spectrum */
  --root-text-white: #FFFFFF;
  --root-text-titanium: #E2E8F0;
  --root-text-muted: #94A3B8;
  --root-text-dark: #0F172A;

  /* 4. Motion Physics & Dynamic Easing */
  --transition-smooth: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-snap: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.15s ease-out;

  /* 5. Geometry & Boundary Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* 6. Typography Font Families */
  --font-sans: 'Inter', 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Fira Code', monospace;

  /* 7. Status Colors */
  --root-success: #10B981;
  --root-danger: #EF4444;
  --root-warning: #F59E0B;
}

/* Base resets & Dark theme baseline (Strictly LTR for North American Market) */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  background-color: var(--root-bg-dark);
  color: var(--root-text-titanium);
  font-family: var(--font-sans);
  direction: ltr;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--root-bg-dark);
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(0, 240, 255, 0.05) 0%, transparent 70%),
    radial-gradient(circle at 100% 50%, rgba(69, 162, 158, 0.04) 0%, transparent 60%);
  background-attachment: fixed;
  color: var(--root-text-titanium);
  overflow-x: hidden;
  min-height: 100vh;
  line-height: 1.7;
}

/* Headings Baseline */
h1, h2, h3, h4, h5, h6 {
  color: var(--root-text-white);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

/* Code & Numbers */
code, pre, .mono-num {
  font-family: var(--font-mono);
}

/* Selection aesthetics */
::selection {
  background: var(--root-cyan);
  color: var(--root-bg-dark);
}