/* ============================================
   GLIIMU DESIGN SYSTEM v1.0
   ============================================ */

:root {
  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --fs-xs: 0.75rem;   --fs-sm: 0.875rem; --fs-base: 1rem;
  --fs-md: 1.125rem;  --fs-lg: 1.25rem;  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem; --fs-3xl: 2.25rem; --fs-4xl: 3rem;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;
  --fw-bold: 700;   --fw-extrabold: 800;
  --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.02em; --ls-widest: 0.1em;

  /* Spacing & Radius */
  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem;
  --radius-sm:0.375rem; --radius-md:0.5rem; --radius-lg:0.75rem;
  --radius-xl:1rem; --radius-2xl:1.5rem; --radius-full:9999px;
  
  /* Transitions */
  --transition-fast:150ms cubic-bezier(.4,0,.2,1);
  --transition-base:250ms cubic-bezier(.4,0,.2,1);
}

/* Light Mode (default) */
:root, [data-theme="light"] {
  --bg-primary:#FFFFFF; --bg-secondary:#F8FAFC; --bg-tertiary:#F1F5F9; --bg-elevated:#FFFFFF;
  --surface:#FFFFFF; --surface-hover:#F8FAFC; --surface-border:#E2E8F0;
  --text-primary:#0F172A; --text-secondary:#475569; --text-tertiary:#64748B;
  --text-muted:#94A3B8; --text-inverse:#FFFFFF;
  --brand-primary:#6366F1; --brand-primary-hover:#4F46E5; --brand-primary-active:#4338CA;
  --brand-primary-light:#EEF2FF; --brand-primary-soft:rgba(99,102,241,.1);
  --brand-accent:#8B5CF6; --brand-accent-hover:#7C3AED; --brand-accent-light:#F5F3FF;
  --success:#10B981; --success-light:#D1FAE5; --success-text:#065F46;
  --warning:#F59E0B; --warning-light:#FEF3C7; --warning-text:#92400E;
  --error:#EF4444;   --error-light:#FEE2E2;   --error-text:#991B1B;
  --info:#3B82F6;    --info-light:#DBEAFE;    --info-text:#1E40AF;
  --gold:#F59E0B; --gold-light:#FEF3C7; --star:#FBBF24; --fire:#F97316;
  --border:#E2E8F0; --border-strong:#CBD5E1; --border-focus:#6366F1;
  --shadow-sm:0 1px 3px 0 rgba(15,23,42,.1),0 1px 2px -1px rgba(15,23,42,.1);
  --shadow-md:0 4px 6px -1px rgba(15,23,42,.1),0 2px 4px -2px rgba(15,23,42,.1);
  --shadow-lg:0 10px 15px -3px rgba(15,23,42,.1),0 4px 6px -4px rgba(15,23,42,.1);
  --shadow-xl:0 20px 25px -5px rgba(15,23,42,.1),0 8px 10px -6px rgba(15,23,42,.1);
  --gradient-primary:linear-gradient(135deg,#6366F1 0%,#8B5CF6 100%);
  --gradient-success:linear-gradient(135deg,#10B981 0%,#06B6D4 100%);
  --gradient-gold:linear-gradient(135deg,#F59E0B 0%,#F97316 100%);
}

/* Dark Mode */
[data-theme="dark"] {
  --bg-primary:#0A0F1E; --bg-secondary:#111827; --bg-tertiary:#1E293B; --bg-elevated:#1E293B;
  --surface:#111827; --surface-hover:#1E293B; --surface-border:#1E293B;
  --text-primary:#F8FAFC; --text-secondary:#CBD5E1; --text-tertiary:#94A3B8;
  --text-muted:#64748B; --text-inverse:#0F172A;
  --brand-primary:#818CF8; --brand-primary-hover:#A5B4FC; --brand-primary-active:#6366F1;
  --brand-primary-light:rgba(129,140,248,.15); --brand-primary-soft:rgba(129,140,248,.1);
  --brand-accent:#A78BFA; --brand-accent-hover:#C4B5FD; --brand-accent-light:rgba(167,139,250,.15);
  --success:#34D399; --success-light:rgba(52,211,153,.15); --success-text:#6EE7B7;
  --warning:#FBBF24; --warning-light:rgba(251,191,36,.15); --warning-text:#FCD34D;
  --error:#F87171;   --error-light:rgba(248,113,113,.15);  --error-text:#FCA5A5;
  --info:#60A5FA;    --info-light:rgba(96,165,250,.15);    --info-text:#93C5FD;
  --gold:#FBBF24; --gold-light:rgba(251,191,36,.15); --star:#FCD34D; --fire:#FB923C;
  --border:#1E293B; --border-strong:#334155; --border-focus:#818CF8;
  --shadow-sm:0 1px 3px 0 rgba(0,0,0,.4);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.4);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.5);
  --shadow-xl:0 20px 25px -5px rgba(0,0,0,.5);
  --gradient-primary:linear-gradient(135deg,#818CF8 0%,#A78BFA 100%);
  --gradient-success:linear-gradient(135deg,#34D399 0%,#22D3EE 100%);
  --gradient-gold:linear-gradient(135deg,#FBBF24 0%,#FB923C 100%);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { max-width: 100%; overflow-x: clip; }
img, video, canvas, iframe { max-width: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--text-primary);
  background: var(--bg-primary);
  transition: background-color var(--transition-base), color var(--transition-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}/* GLIIMU DESIGN SYSTEM - Paste your provided CSS variables here */