/* ════════════════════════════════════════════════════════════
   GLOBAL THEME — single source of truth for MaximaLabs
   Loaded FIRST on every page (apex, app, console, lini landings).
   Semantic variables; dark + light themes via [data-theme].
   ════════════════════════════════════════════════════════════ */

:root,
[data-theme="dark"] {
  /* surfaces */
  --bg:          #050816;
  --bg-2:        #08111f;
  --bg-3:        #0b1428;
  --surface:     rgba(15, 23, 42, .88);
  --surface-2:   rgba(30, 41, 59, .72);
  --surface-3:   rgba(15, 23, 42, .55);

  /* text */
  --text:        #f8fafc;
  --text-muted:  #94a3b8;
  --text-dim:    #64748b;

  /* brand / accent */
  --primary:     #38bdf8;
  --primary-2:   #0ea5e9;
  --primary-dim: #0284c7;
  --accent:      #818cf8;

  /* semantic */
  --success:     #10b981;
  --warning:     #f59e0b;
  --danger:      #ef4444;
  --info:        #38bdf8;

  /* borders & shadows */
  --line:        rgba(148, 163, 184, .18);
  --line-2:      rgba(148, 163, 184, .28);
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, .18);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, .24);
  --shadow-lg:   0 20px 60px rgba(0, 0, 0, .32);

  /* typography */
  --font-primary: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;

  /* radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* layout */
  --container: 1200px;
  --header-h: 64px;
}

[data-theme="light"] {
  --bg:          #f8fafc;
  --bg-2:        #ffffff;
  --bg-3:        #f1f5f9;
  --surface:     rgba(255, 255, 255, .96);
  --surface-2:   rgba(241, 245, 249, .96);
  --surface-3:   rgba(226, 232, 240, .75);

  --text:        #0f172a;
  --text-muted:  #475569;
  --text-dim:    #94a3b8;

  --primary:     #0284c7;
  --primary-2:   #0ea5e9;
  --primary-dim: #075985;
  --accent:      #6366f1;

  --line:        rgba(15, 23, 42, .12);
  --line-2:      rgba(15, 23, 42, .22);
  --shadow-sm:   0 1px 2px rgba(15, 23, 42, .08);
  --shadow-md:   0 4px 12px rgba(15, 23, 42, .10);
  --shadow-lg:   0 20px 60px rgba(15, 23, 42, .14);
}

/* Global element defaults — apply to body and common elements */
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--primary);
  text-decoration: none;
}
a:hover { color: var(--primary-2); }

h1, h2, h3, h4, h5, h6 {
  color: var(--text);
  font-weight: 600;
  margin: 0 0 var(--space-3);
}

code, pre {
  font-family: var(--font-mono);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--line-2); }

/* Selection */
::selection {
  background: var(--primary);
  color: var(--bg);
}