/*!
 * Neonatology Academy — Design Tokens v2.0
 * Complete design system: colors, typography, spacing, shadows, component tokens
 * Import this BEFORE any other stylesheet.
 */

/* ── Google Fonts ───────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   ROOT DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */
:root {

  /* ── Brand palette ─────────────────────────────────────────────────────── */
  --neo-brand:          #0f766e;   /* Teal — primary brand */
  --neo-brand-dark:     #115e59;
  --neo-brand-light:    #f0fdfa;
  --neo-brand-mid:      #99f6e4;

  --neo-navy:           #0f172a;   /* Deep navy — headings */
  --neo-navy-mid:       #1e293b;
  --neo-blue:           #1e40af;   /* Royal blue — links, Q-bank */
  --neo-blue-light:     #eff6ff;

  /* ── Neutral scale ──────────────────────────────────────────────────────── */
  --neo-gray-50:        #f8fafc;
  --neo-gray-100:       #f1f5f9;
  --neo-gray-200:       #e2e8f0;
  --neo-gray-300:       #cbd5e1;
  --neo-gray-400:       #94a3b8;
  --neo-gray-500:       #64748b;
  --neo-gray-600:       #475569;
  --neo-gray-700:       #334155;
  --neo-gray-800:       #1e293b;
  --neo-gray-900:       #0f172a;

  /* ── Semantic status colors ─────────────────────────────────────────────── */
  --neo-success:        #059669;
  --neo-success-light:  #ecfdf5;
  --neo-success-border: #6ee7b7;
  --neo-error:          #dc2626;
  --neo-error-light:    #fef2f2;
  --neo-error-border:   #fca5a5;
  --neo-warning:        #d97706;
  --neo-warning-light:  #fffbeb;
  --neo-warning-border: #fde68a;
  --neo-info:           #0284c7;
  --neo-info-light:     #f0f9ff;
  --neo-info-border:    #7dd3fc;

  /* ── Section / Specialty accent colors ──────────────────────────────────── */

  /* Question Bank */
  --sec-qbank-color:    #1e40af;
  --sec-qbank-bg:       #eff6ff;
  --sec-qbank-border:   #bfdbfe;
  --sec-qbank-icon:     #2563eb;

  /* Flashcards */
  --sec-flash-color:    #059669;
  --sec-flash-bg:       #ecfdf5;
  --sec-flash-border:   #6ee7b7;
  --sec-flash-icon:     #10b981;

  /* Neo Summary */
  --sec-summary-color:  #2563eb;
  --sec-summary-bg:     #eff6ff;
  --sec-summary-border: #93c5fd;
  --sec-summary-icon:   #3b82f6;

  /* Summary Tables */
  --sec-tables-color:   #4f46e5;
  --sec-tables-bg:      #eef2ff;
  --sec-tables-border:  #c7d2fe;
  --sec-tables-icon:    #6366f1;

  /* Tools / Calculator */
  --sec-tools-color:    #0891b2;
  --sec-tools-bg:       #ecfeff;
  --sec-tools-border:   #a5f3fc;
  --sec-tools-icon:     #06b6d4;

  /* Simulator */
  --sec-sim-color:      #7c3aed;
  --sec-sim-bg:         #f5f3ff;
  --sec-sim-border:     #ddd6fe;
  --sec-sim-icon:       #8b5cf6;

  /* Admin */
  --sec-admin-color:    #334155;
  --sec-admin-bg:       #f1f5f9;
  --sec-admin-border:   #e2e8f0;
  --sec-admin-icon:     #475569;

  /* ── Specialty clinical colors ──────────────────────────────────────────── */

  /* Cardiology */
  --sp-cardio-color:    #e11d48;
  --sp-cardio-bg:       #fff1f2;
  --sp-cardio-border:   #fda4af;

  /* Neurology */
  --sp-neuro-color:     #7c3aed;
  --sp-neuro-bg:        #f5f3ff;
  --sp-neuro-border:    #c4b5fd;

  /* Pulmonology */
  --sp-pulm-color:      #0284c7;
  --sp-pulm-bg:         #f0f9ff;
  --sp-pulm-border:     #7dd3fc;

  /* Nephrology */
  --sp-nephro-color:    #0891b2;
  --sp-nephro-bg:       #ecfeff;
  --sp-nephro-border:   #67e8f9;

  /* Hematology */
  --sp-heme-color:      #be123c;
  --sp-heme-bg:         #fff1f2;
  --sp-heme-border:     #fda4af;

  /* Infectious Disease */
  --sp-id-color:        #0d9488;
  --sp-id-bg:           #f0fdfa;
  --sp-id-border:       #5eead4;

  /* Gastroenterology */
  --sp-gi-color:        #ea580c;
  --sp-gi-bg:           #fff7ed;
  --sp-gi-border:       #fdba74;

  /* Endocrinology */
  --sp-endo-color:      #b45309;
  --sp-endo-bg:         #fffbeb;
  --sp-endo-border:     #fcd34d;

  /* Nutrition */
  --sp-nutr-color:      #16a34a;
  --sp-nutr-bg:         #f0fdf4;
  --sp-nutr-border:     #86efac;

  /* Genetics */
  --sp-gen-color:       #9333ea;
  --sp-gen-bg:          #faf5ff;
  --sp-gen-border:      #d8b4fe;

  /* Ethics & QI */
  --sp-ethics-color:    #4f46e5;
  --sp-ethics-bg:       #eef2ff;
  --sp-ethics-border:   #a5b4fc;

  /* Biostatistics */
  --sp-stats-color:     #0369a1;
  --sp-stats-bg:        #f0f9ff;
  --sp-stats-border:    #7dd3fc;

  /* Resuscitation */
  --sp-resus-color:     #dc2626;
  --sp-resus-bg:        #fef2f2;
  --sp-resus-border:    #fca5a5;

  /* Pharmacology */
  --sp-pharm-color:     #6366f1;
  --sp-pharm-bg:        #eef2ff;
  --sp-pharm-border:    #a5b4fc;

  /* Surgery */
  --sp-surg-color:      #475569;
  --sp-surg-bg:         #f8fafc;
  --sp-surg-border:     #cbd5e1;

  /* Fetal & Maternal Medicine */
  --sp-fmm-color:       #db2777;
  --sp-fmm-bg:          #fdf2f8;
  --sp-fmm-border:      #f9a8d4;

  /* ── Typography ─────────────────────────────────────────────────────────── */
  --font-sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:   'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --text-xs:    .72rem;    /* 11.5px */
  --text-sm:    .8125rem;  /* 13px */
  --text-base:  .9375rem;  /* 15px */
  --text-md:    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 */

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

  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   1.75;

  --tracking-tight:  -.02em;
  --tracking-normal:  0;
  --tracking-wide:   .02em;
  --tracking-wider:  .05em;
  --tracking-widest: .1em;

  /* ── Spacing scale ──────────────────────────────────────────────────────── */
  --sp-1:   .25rem;   /* 4px  */
  --sp-2:   .5rem;    /* 8px  */
  --sp-3:   .75rem;   /* 12px */
  --sp-4:   1rem;     /* 16px */
  --sp-5:   1.25rem;  /* 20px */
  --sp-6:   1.5rem;   /* 24px */
  --sp-8:   2rem;     /* 32px */
  --sp-10:  2.5rem;   /* 40px */
  --sp-12:  3rem;     /* 48px */
  --sp-16:  4rem;     /* 64px */

  /* ── Border radius ──────────────────────────────────────────────────────── */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   18px;
  --r-2xl:  24px;
  --r-full: 9999px;

  /* ── Shadows ────────────────────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(15,23,42,.04);
  --shadow-sm:  0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md:  0 4px 8px rgba(15,23,42,.07), 0 1px 3px rgba(15,23,42,.05);
  --shadow-lg:  0 10px 24px rgba(15,23,42,.09), 0 4px 8px rgba(15,23,42,.06);
  --shadow-xl:  0 20px 48px rgba(15,23,42,.12), 0 8px 16px rgba(15,23,42,.08);
  --shadow-card: 0 1px 3px rgba(15,23,42,.06), 0 1px 0 rgba(15,23,42,.02);
  --shadow-card-hover: 0 6px 24px rgba(15,23,42,.1), 0 2px 6px rgba(15,23,42,.06);

  /* ── Transitions ────────────────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(.0, 0, .2, 1);
  --ease-in:    cubic-bezier(.4, 0, 1, 1);
  --ease-inout: cubic-bezier(.4, 0, .2, 1);

  --dur-fast:   100ms;
  --dur-base:   150ms;
  --dur-slow:   250ms;
  --dur-slower: 350ms;

  /* ── Z-index scale ──────────────────────────────────────────────────────── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  500;
  --z-modal:    1000;
  --z-toast:    2000;
  --z-topnav:   9900;

  /* ── Layout ─────────────────────────────────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  --page-padding:  1.5rem;
  --card-padding:  1.25rem;
  --section-gap:   2.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

body {
  font-family: var(--font-sans) !important;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--neo-navy-mid);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.neo-heading {
  font-family: var(--font-display) !important;
  color: var(--neo-navy);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

h1 { font-size: var(--text-4xl); font-weight: var(--weight-extrabold); }
h2 { font-size: var(--text-3xl); font-weight: var(--weight-bold); }
h3 { font-size: var(--text-xl);  font-weight: var(--weight-semibold); }
h4 { font-size: var(--text-lg);  font-weight: var(--weight-semibold); }
h5 { font-size: var(--text-md);  font-weight: var(--weight-semibold); }
h6 { font-size: var(--text-sm);  font-weight: var(--weight-semibold); }

p {
  line-height: var(--leading-relaxed);
  color: var(--neo-gray-600);
}

/* ── Section header pattern ─────────────────────────────────────────────── */
.neo-section-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.neo-section-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.neo-section-title {
  font-family: var(--font-display) !important;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--neo-navy);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}

.neo-section-subtitle {
  font-size: var(--text-sm);
  color: var(--neo-gray-500);
  margin: .15rem 0 0;
  font-weight: var(--weight-normal);
  letter-spacing: 0;
}

/* ── Page hero / heading strip ──────────────────────────────────────────── */
.neo-page-hero {
  background: linear-gradient(135deg, var(--neo-navy) 0%, #1e3a5f 100%);
  color: #fff;
  padding: var(--sp-10) var(--sp-8);
  border-radius: var(--r-xl);
  margin-bottom: var(--sp-8);
  position: relative;
  overflow: hidden;
}

.neo-page-hero::before {
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 280px; height: 280px;
  background: rgba(255,255,255,.04);
  border-radius: 50%;
  pointer-events: none;
}

.neo-page-hero-icon {
  font-size: 2.5rem;
  margin-bottom: var(--sp-4);
  opacity: .9;
}

.neo-page-hero h1 {
  font-family: var(--font-display) !important;
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  color: #fff;
  margin: 0 0 var(--sp-2);
  letter-spacing: var(--tracking-tight);
}

.neo-page-hero p {
  color: rgba(255,255,255,.75);
  font-size: var(--text-base);
  margin: 0;
  max-width: 560px;
  line-height: var(--leading-relaxed);
}

/* ── Label / eyebrow text ───────────────────────────────────────────────── */
.neo-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--neo-brand);
  margin-bottom: var(--sp-2);
}

/* ── Status badges ──────────────────────────────────────────────────────── */
.neo-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: .18rem .55rem;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .02em;
  line-height: 1;
}

.neo-badge-blue    { background: var(--neo-blue-light);    color: var(--neo-blue); }
.neo-badge-green   { background: var(--neo-success-light); color: var(--neo-success); }
.neo-badge-red     { background: var(--neo-error-light);   color: var(--neo-error); }
.neo-badge-amber   { background: var(--neo-warning-light); color: var(--neo-warning); }
.neo-badge-teal    { background: var(--neo-brand-light);   color: var(--neo-brand); }
.neo-badge-gray    { background: var(--neo-gray-100);      color: var(--neo-gray-600); }
.neo-badge-new     { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.neo-card {
  background: #fff;
  border: 1px solid var(--neo-gray-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  overflow: hidden;
}

.neo-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.neo-card-body {
  padding: var(--card-padding);
}

/* ── Accent card: left colored border ───────────────────────────────────── */
.neo-card-accent {
  border-left-width: 3px;
  border-left-style: solid;
}

/* ── Icon badges for sections ───────────────────────────────────────────── */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out);
}

.icon-badge-sm {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  font-size: .85rem;
}

.icon-badge-lg {
  width: 56px; height: 56px;
  border-radius: var(--r-lg);
  font-size: 1.4rem;
}

.neo-card:hover .icon-badge,
.specialty-card:hover .icon-badge {
  transform: scale(1.08);
}

/* ── Stat pills ─────────────────────────────────────────────────────────── */
.stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .35rem .5rem;
  border-radius: var(--r-sm);
  gap: .1rem;
}

.stat-pill-value {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: var(--weight-bold);
  line-height: 1;
}

.stat-pill-label {
  font-size: .65rem;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--neo-gray-500);
}

/* ── Progress bar improvements ───────────────────────────────────────────── */
.neo-progress {
  height: 5px;
  background: var(--neo-gray-100);
  border-radius: var(--r-full);
  overflow: hidden;
}

.neo-progress-fill {
  height: 100%;
  border-radius: var(--r-full);
  transition: width .4s var(--ease-out);
}

/* ── Divider with label ─────────────────────────────────────────────────── */
.neo-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-6) 0;
  color: var(--neo-gray-400);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.neo-divider::before,
.neo-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--neo-gray-200);
}

/* ── Hover lift utility ─────────────────────────────────────────────────── */
.neo-hover-lift {
  transition: transform var(--dur-slow) var(--ease-out),
              box-shadow var(--dur-slow) var(--ease-out);
}
.neo-hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}