/* ============================================================
   StudyHub Design Tokens
   ============================================================ */

:root {
  /* ── Primary Blue ── */
  --primary-50:  #EFF6FF;
  --primary-100: #DBEAFE;
  --primary-200: #BFDBFE;
  --primary-300: #93C5FD;
  --primary-400: #60A5FA;
  --primary-500: #3B82F6;
  --primary-600: #2563EB;
  --primary-700: #1D4ED8;
  --primary-800: #1E40AF;
  --primary-900: #1E3A8A;

  --primary:        var(--primary-600);
  --primary-light:  var(--primary-400);
  --primary-dark:   var(--primary-800);
  --primary-hover:  var(--primary-700);
  --primary-active: var(--primary-800);

  /* ── Neutral / Gray ── */
  --gray-50:  #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1E293B;
  --gray-900: #0F172A;

  /* ── Semantic Colors ── */
  --success-50:  #F0FDF4;
  --success-100: #DCFCE7;
  --success-500: #22C55E;
  --success-600: #16A34A;
  --success-700: #15803D;

  --warning-50:  #FFFBEB;
  --warning-100: #FEF3C7;
  --warning-500: #F59E0B;
  --warning-600: #D97706;

  --error-50:  #FEF2F2;
  --error-100: #FEE2E2;
  --error-500: #EF4444;
  --error-600: #DC2626;
  --error-700: #B91C1C;

  --info-50:  #EFF6FF;
  --info-500: #3B82F6;

  /* ── Surfaces ── */
  --bg-body:       #F0F4FF;
  --bg-card:       #FFFFFF;
  --bg-card-hover: #F8FAFC;
  --bg-overlay:    rgba(15, 23, 42, 0.5);
  --bg-skeleton:   #E2E8F0;

  /* ── Text ── */
  --text-primary:   #0F172A;
  --text-secondary: #475569;
  --text-tertiary:  #94A3B8;
  --text-inverse:   #FFFFFF;
  --text-link:      var(--primary-600);

  /* ── Borders ── */
  --border-light:  #E2E8F0;
  --border-medium: #CBD5E1;
  --border-focus:  var(--primary-500);

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --shadow-blue: 0 4px 14px rgba(37, 99, 235, 0.25);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);

  /* ── Radii ── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Spacing (8px grid) ── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Typography ── */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.875rem;   /* 14px */
  --text-md:   0.9375rem;  /* 15px */
  --text-lg:   1rem;       /* 16px */
  --text-xl:   1.125rem;   /* 18px */
  --text-2xl:  1.25rem;    /* 20px */
  --text-3xl:  1.5rem;     /* 24px */
  --text-4xl:  1.875rem;   /* 30px */
  --text-5xl:  2.25rem;    /* 36px */

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-extrabold:800;

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   350ms ease;
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index Scale ── */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-fixed:     300;
  --z-overlay:   400;
  --z-drawer:    500;
  --z-modal:     600;
  --z-toast:     700;
  --z-tooltip:   800;

  /* ── Layout ── */
  --header-height:    56px;
  --bottom-nav-height: 64px;
  --drawer-width:     280px;
  --max-content-width: 1200px;
  --sidebar-width:    260px;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast:   0ms;
    --transition-normal: 0ms;
    --transition-slow:   0ms;
    --transition-spring: 0ms;
  }
}