/* ============================================================
   NCLEX Pro LMS — Design System
   Dark glassmorphism theme with electric blue / teal palette
   ============================================================ */

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

/* ── CSS Custom Properties (Design Tokens) ───────────────── */
:root {
  /* Colors */
  --color-bg-darkest:   #060B18;
  --color-bg-dark:      #0A0F1E;
  --color-bg-mid:       #0F1729;
  --color-bg-card:      #141C30;
  --color-bg-elevated:  #1A2340;
  --color-bg-hover:     #1E2A4A;

  --color-primary:      #4F8EF7;
  --color-primary-dark: #2D6FE0;
  --color-primary-glow: rgba(79, 142, 247, 0.25);
  --color-accent:       #00D4B4;
  --color-accent-dark:  #00A88E;
  --color-accent-glow:  rgba(0, 212, 180, 0.2);
  --color-warning:      #FFB830;
  --color-warning-glow: rgba(255, 184, 48, 0.2);
  --color-danger:       #F76B6B;
  --color-danger-glow:  rgba(247, 107, 107, 0.2);
  --color-success:      #3DD598;
  --color-success-glow: rgba(61, 213, 152, 0.2);
  --color-purple:       #A78BFA;

  /* Text */
  --text-primary:   #F0F4FF;
  --text-secondary: #9BA8C4;
  --text-muted:     #5A6785;
  --text-inverse:   #0A0F1E;

  /* Borders */
  --border-color:       rgba(255,255,255,0.07);
  --border-color-hover: rgba(255,255,255,0.15);
  --border-primary:     rgba(79, 142, 247, 0.3);
  --border-accent:      rgba(0, 212, 180, 0.3);

  /* Glass */
  --glass-bg:     rgba(20, 28, 48, 0.7);
  --glass-blur:   blur(20px);
  --glass-border: 1px solid rgba(255,255,255,0.08);

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.5);
  --shadow-xl:  0 16px 60px rgba(0,0,0,0.6);
  --shadow-primary: 0 4px 20px rgba(79,142,247,0.3);
  --shadow-accent:  0 4px 20px rgba(0,212,180,0.25);

  /* Radius */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Typography */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Transitions */
  --transition-fast:   all 0.15s ease;
  --transition-normal: all 0.25s ease;
  --transition-slow:   all 0.4s ease;

  /* Sidebar */
  --sidebar-width: 260px;
  --topbar-height: 64px;
}

/* ── Reset & Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; text-size-adjust: none; }

body {
  font-family: var(--font-body);
  background-color: var(--color-bg-dark);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Animated mesh background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(79,142,247,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(0,212,180,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 60% 40%, rgba(167,139,250,0.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* ── Typography ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-primary);
  line-height: 1.25;
  font-weight: 700;
}

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; font-weight: 600; }
h5 { font-size: 1rem; font-weight: 600; }
h6 { font-size: 0.875rem; font-weight: 600; }

p { color: var(--text-secondary); margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--color-primary); text-decoration: none; transition: var(--transition-fast); }
a:hover { color: #7EAAFF; }

strong, b { font-weight: 600; color: var(--text-primary); }
small { font-size: 0.8rem; color: var(--text-muted); }
code {
  font-family: var(--font-mono);
  background: rgba(79,142,247,0.1);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.85em;
  color: var(--color-primary);
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg-dark); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

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

/* ── Focus Ring ──────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}