/* ═══════════════════════════════════════════════
   StudyHub Design System — Colors & Typography
   ═══════════════════════════════════════════════ */

/* Google Fonts: Poppins (display) + Inter (body) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* ─── TYPOGRAPHY ─── */
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* ─── ADMIN — Dark Analytical (Indigo/Violet) ─── */
  --admin-primary: #6366F1;
  --admin-primary-light: #818CF8;
  --admin-secondary: #8B5CF6;
  --admin-accent: #F59E0B;
  --admin-success: #10B981;
  --admin-danger: #EF4444;
  --admin-bg: #0F1729;
  --admin-surface: #1E2640;
  --admin-surface2: #252D47;
  --admin-border: rgba(99,102,241,0.2);
  --admin-text: #F1F5F9;
  --admin-text-muted: #94A3B8;

  /* ─── PROF — Light Mint/Lavender ─── */
  --prof-primary: #6ECFB5;
  --prof-primary-dark: #4DB8A0;
  --prof-secondary: #A78BFA;
  --prof-accent: #F5C842;
  --prof-danger: #F87171;
  --prof-bg: #F8F7FF;
  --prof-surface: #FFFFFF;
  --prof-surface2: #F0FDF9;
  --prof-border: #E2E8F0;
  --prof-text: #1A1A2E;
  --prof-text-muted: #64748B;

  /* ─── STUDENT — Gamified Violet/Pink ─── */
  --stud-primary: #8B7CF6;
  --stud-primary-dark: #7C3AED;
  --stud-secondary: #E879A0;
  --stud-accent: #F5C842;
  --stud-success: #6ECFB5;
  --stud-danger: #F87171;
  --stud-bg: #FAF8FF;
  --stud-surface: #FFFFFF;
  --stud-surface2: #F5F0FF;
  --stud-border: #EDE9FE;
  --stud-text: #1A1A2E;
  --stud-text-muted: #7C6B9B;

  /* ─── SPACING ─── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* ─── RADIUS ─── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ─── SHADOWS ─── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.14);
  --shadow-colored-admin: 0 8px 24px rgba(99,102,241,0.25);
  --shadow-colored-prof: 0 8px 24px rgba(110,207,181,0.25);
  --shadow-colored-stud: 0 8px 24px rgba(139,124,246,0.25);

  /* ─── SEMANTIC TYPE ─── */
  /* H1: Poppins 32px/800 */
  /* H2: Poppins 24px/700 */
  /* H3: Poppins 18px/600 */
  /* Body: Inter 15px/400, line-height 1.6 */
  /* Small: Inter 13px/400, line-height 1.5 */
  /* Label: Poppins 11px/700 uppercase tracking 0.08em */
  /* Data: Poppins 28px/800 (KPI numbers) */
}

/* ─── SEMANTIC TYPE CLASSES ─── */
.t-h1 { font-family: var(--font-display); font-size: 32px; font-weight: 800; line-height: 1.2; }
.t-h2 { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1.3; }
.t-h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.4; }
.t-body { font-family: var(--font-body); font-size: 15px; font-weight: 400; line-height: 1.6; }
.t-small { font-family: var(--font-body); font-size: 13px; font-weight: 400; line-height: 1.5; }
.t-label { font-family: var(--font-display); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.t-data { font-family: var(--font-display); font-size: 28px; font-weight: 800; }