/* ==========================================================================
   UnrealAgent Design System (2025 Refactor)
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     1. Color Palette (One Truth)
     ------------------------------------------------------------------------ */
  /* Brand Colors */
  --brand-primary: #6366f1;       /* Indigo 500 */
  --brand-primary-dark: #4f46e5;  /* Indigo 600 */
  --brand-primary-light: #818cf8; /* Indigo 400 */
  
  --brand-accent: #22d3ee;        /* Cyan 400 */
  --brand-accent-glow: rgba(34, 211, 238, 0.6);

  /* Neutrals (Slate-based for tech feel) */
  --bg-deep: #020617;     /* Slate 950 - Main Background */
  --bg-surface: #0f172a;  /* Slate 900 - Card Surface */
  --bg-surface-2: #1e293b;/* Slate 800 - Hover Surface */
  
  --text-main: #f8fafc;   /* Slate 50 - Primary Text */
  --text-muted: #94a3b8;  /* Slate 400 - Secondary Text */
  --text-faint: #475569;  /* Slate 600 - Tertiary/Borders */

  /* Semantics */
  --status-success: #10b981;
  --status-warning: #f59e0b;
  --status-error: #ef4444;

  /* ------------------------------------------------------------------------
     2. Typography (Scale & Weights)
     ------------------------------------------------------------------------ */
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Desktop Type Scale */
  --text-display: 56px;   /* Hero Title */
  --text-h1: 42px;        /* Section Title */
  --text-h2: 32px;        /* Module Title */
  --text-h3: 24px;        /* Card Title */
  --text-body: 16px;      /* Standard Body */
  --text-small: 14px;     /* UI Elements */
  --text-tiny: 12px;      /* Metadata */

  /* ------------------------------------------------------------------------
     3. Spacing & Layout
     ------------------------------------------------------------------------ */
  --container-width: 1280px;
  --section-spacing: 120px; /* Consistent vertical rhythm */
  --header-spacing: 48px;   /* Space between header and content */
  
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* ------------------------------------------------------------------------
     4. Effects (Glassmorphism & Depth)
     ------------------------------------------------------------------------ */
  /* Glass */
  --glass-surface: rgba(15, 23, 42, 0.6);
  --glass-border: 1px solid rgba(255, 255, 255, 0.08);
  --glass-highlight: 1px solid rgba(255, 255, 255, 0.15);
  --glass-blur: blur(12px);

  /* Shadows */
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.15);
}

/* Mobile Overrides */
@media (max-width: 768px) {
  :root {
    --text-display: 40px;
    --text-h1: 32px;
    --text-h2: 26px;
    --section-spacing: 80px;
  }
}

/* ==========================================================================
   Utility Classes (The "Glue")
   ========================================================================== */

/* Universal Section Container */
.section-wrapper {
  position: relative;
  padding: var(--section-spacing) 0;
  overflow: hidden;
}

/* Standardized Header Group */
.section-header-group {
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--header-spacing);
}

.module-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #a5b4fc;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 24px;
}

.section-title-main {
  font-size: var(--text-h1);
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.section-subtitle-main {
  font-size: 18px;
  color: var(--text-muted);
  line-height: 1.6;
}