/* ============================================================
   GeniuxLab Design System — Colors & Typography Tokens
   ============================================================ */

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

/* ── Base Color Palette ─────────────────────────────────── */
:root {
  /* Primary — Electric Indigo */
  --color-primary-50:  #EEF2FF;
  --color-primary-100: #E0E7FF;
  --color-primary-200: #C7D2FE;
  --color-primary-300: #A5B4FC;
  --color-primary-400: #818CF8;
  --color-primary-500: #6366F1;
  --color-primary-600: #4F46E5;
  --color-primary-700: #4338CA;
  --color-primary-800: #3730A3;
  --color-primary-900: #312E81;

  /* Cyan — Innovation */
  --color-cyan-50:  #ECFEFF;
  --color-cyan-100: #CFFAFE;
  --color-cyan-200: #A5F3FC;
  --color-cyan-300: #67E8F9;
  --color-cyan-400: #22D3EE;
  --color-cyan-500: #06B6D4;
  --color-cyan-600: #0891B2;
  --color-cyan-700: #0E7490;
  --color-cyan-800: #155E75;
  --color-cyan-900: #164E63;

  /* Amber — Curiosity & Rewards */
  --color-amber-50:  #FFFBEB;
  --color-amber-100: #FEF3C7;
  --color-amber-200: #FDE68A;
  --color-amber-300: #FCD34D;
  --color-amber-400: #FBBF24;
  --color-amber-500: #F59E0B;
  --color-amber-600: #D97706;
  --color-amber-700: #B45309;
  --color-amber-800: #92400E;
  --color-amber-900: #78350F;

  /* Emerald — Progress & Success */
  --color-emerald-50:  #ECFDF5;
  --color-emerald-100: #D1FAE5;
  --color-emerald-200: #A7F3D0;
  --color-emerald-300: #6EE7B7;
  --color-emerald-400: #34D399;
  --color-emerald-500: #10B981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065F46;
  --color-emerald-900: #064E3B;

  /* Pink — Creativity */
  --color-pink-50:  #FDF2F8;
  --color-pink-100: #FCE7F3;
  --color-pink-200: #FBCFE8;
  --color-pink-300: #F9A8D4;
  --color-pink-400: #F472B6;
  --color-pink-500: #EC4899;
  --color-pink-600: #DB2777;
  --color-pink-700: #BE185D;
  --color-pink-800: #9D174D;
  --color-pink-900: #831843;

  /* Slate — Neutrals */
  --color-slate-50:  #F8FAFC;
  --color-slate-100: #F1F5F9;
  --color-slate-200: #E2E8F0;
  --color-slate-300: #CBD5E1;
  --color-slate-400: #94A3B8;
  --color-slate-500: #64748B;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1E293B;
  --color-slate-900: #0F172A;

  /* ── Semantic Color Tokens ──────────────────────────────── */
  --color-bg:           #FFFFFF;
  --color-bg-subtle:    var(--color-slate-50);
  --color-bg-muted:     var(--color-slate-100);
  --color-surface:      #FFFFFF;
  --color-surface-raised: #FFFFFF;

  --color-fg:           var(--color-slate-900);
  --color-fg-secondary: var(--color-slate-600);
  --color-fg-muted:     var(--color-slate-400);
  --color-fg-inverted:  #FFFFFF;

  --color-border:       var(--color-slate-200);
  --color-border-strong: var(--color-slate-300);

  --color-brand:        var(--color-primary-600);
  --color-brand-light:  var(--color-primary-50);
  --color-brand-dark:   var(--color-primary-700);

  --color-accent:       var(--color-cyan-500);
  --color-accent-light: var(--color-cyan-50);

  --color-reward:       var(--color-amber-500);
  --color-reward-light: var(--color-amber-50);

  --color-success:      var(--color-emerald-500);
  --color-success-light: var(--color-emerald-50);

  --color-error:        #EF4444;
  --color-error-light:  #FEF2F2;

  --color-warning:      var(--color-amber-500);
  --color-warning-light: var(--color-amber-50);

  /* Module subject colors */
  --color-module-code:    var(--color-primary-600);   /* Programming */
  --color-module-robot:   var(--color-cyan-500);      /* Robotics */
  --color-module-math:    var(--color-emerald-500);   /* Math */
  --color-module-maker:   var(--color-pink-500);      /* Maker/Creative */
  --color-module-game:    var(--color-amber-500);     /* Game Design */

  /* ── Typography Tokens ──────────────────────────────────── */
  --font-display:  'Nunito', sans-serif;
  --font-body:     'Outfit', sans-serif;
  --font-mono:     'JetBrains Mono', monospace;

  /* Font weights */
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;
  --fw-black:      900;

  /* Type scale — fluid using clamp() */
  --text-xs:    0.75rem;      /* 12px */
  --text-sm:    0.875rem;     /* 14px */
  --text-base:  1rem;         /* 16px */
  --text-lg:    1.125rem;     /* 18px */
  --text-xl:    1.25rem;      /* 20px */
  --text-2xl:   1.5rem;       /* 24px */
  --text-3xl:   1.875rem;     /* 30px */
  --text-4xl:   2.25rem;      /* 36px */
  --text-5xl:   3rem;         /* 48px */
  --text-6xl:   3.75rem;      /* 60px */
  --text-7xl:   4.5rem;       /* 72px */

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.625;
  --lh-loose:   2;

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-normal:  0em;
  --ls-wide:    0.025em;
  --ls-wider:   0.05em;
  --ls-widest:  0.1em;

  /* ── Spacing Scale ──────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-12:  48px;
  --space-16:  64px;
  --space-24:  96px;
  --space-32:  128px;

  /* ── Border Radius ──────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows / Elevation ────────────────────────────────── */
  --shadow-0: none;
  --shadow-1: 0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-4: 0 24px 64px rgba(0,0,0,0.16), 0 8px 16px rgba(0,0,0,0.08);
  --shadow-brand: 0 8px 24px rgba(79,70,229,0.28);
  --shadow-lifted: 0 20px 40px -8px rgba(79,70,229,0.18);

  /* ── Animation ──────────────────────────────────────────── */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);

  --dur-fast:   150ms;
  --dur-normal: 250ms;
  --dur-slow:   400ms;

  /* ── Layout ─────────────────────────────────────────────── */
  --max-width:       1280px;
  --sidebar-width:   240px;
  --nav-height:      64px;

  /* ── Z-index scale ──────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-modal:   300;
  --z-toast:   400;
}

/* ── Semantic Element Styles ─────────────────────────────── */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-fg);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
}

h5, h6 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
}

p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--color-fg-secondary);
}

small {
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

code, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg-muted);
  border-radius: var(--radius-sm);
}

code {
  padding: 2px 6px;
}

pre {
  padding: var(--space-4);
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

a {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-standard);
}

a:hover {
  color: var(--color-brand-dark);
}

/* ── Utility Classes ─────────────────────────────────────── */
.text-display { font-family: var(--font-display); }
.text-body    { font-family: var(--font-body); }
.text-mono    { font-family: var(--font-mono); }

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }
.text-4xl  { font-size: var(--text-4xl); }
.text-5xl  { font-size: var(--text-5xl); }

.font-black     { font-weight: var(--fw-black); }
.font-extrabold { font-weight: var(--fw-extrabold); }
.font-bold      { font-weight: var(--fw-bold); }
.font-semibold  { font-weight: var(--fw-semibold); }
.font-medium    { font-weight: var(--fw-medium); }
.font-regular   { font-weight: var(--fw-regular); }

.text-primary   { color: var(--color-brand); }
.text-secondary { color: var(--color-fg-secondary); }
.text-muted     { color: var(--color-fg-muted); }
.text-success   { color: var(--color-success); }
.text-error     { color: var(--color-error); }
.text-reward    { color: var(--color-reward); }