/* ============================================================
   Quorum — Design Tokens
   Theme: University of Ghana — Royal Blue & White
   Fonts: Playfair Display (headings) + Plus Jakarta Sans (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root {
  /* ── UG Brand ── */
  --ug-blue:         #003F87;
  --ug-blue-deep:    #002D62;
  --ug-blue-mid:     #0A4E9F;
  --ug-blue-light:   #1A62B7;
  --ug-blue-pale:    #EAF0FA;
  --ug-blue-ultra:   #F0F5FC;

  /* ── Backgrounds ── */
  --bg:              #F8F9FC;
  --surface:         #FFFFFF;
  --surface2:        #F2F5FA;
  --surface3:        #E8EDF5;

  /* ── Borders ── */
  --border:          rgba(0, 63, 135, 0.10);
  --border-hover:    rgba(0, 63, 135, 0.20);
  --border-strong:   rgba(0, 63, 135, 0.28);

  /* ── Accent (primary interactive = UG blue) ── */
  --accent:          #003F87;
  --accent-dim:      rgba(0, 63, 135, 0.08);
  --accent-mid:      rgba(0, 63, 135, 0.15);
  --accent-hover:    #002D62;

  /* ── Text ── */
  --text:            #0A1628;
  --text-2:          #243352;
  --muted:           #6B7A99;
  --muted-light:     #A8B4CC;

  /* ── Semantic colours ── */
  --danger:          #C0392B;
  --danger-bg:       rgba(192,57,43,0.07);
  --danger-border:   rgba(192,57,43,0.20);

  --success:         #1A7A4A;
  --success-bg:      rgba(26,122,74,0.07);
  --success-border:  rgba(26,122,74,0.20);

  --warning:         #A16207;
  --warning-bg:      rgba(161,98,7,0.08);
  --warning-border:  rgba(161,98,7,0.22);

  --info:            #003F87;
  --info-bg:         rgba(0,63,135,0.07);
  --info-border:     rgba(0,63,135,0.20);

  /* ── Typography ── */
  --font-display:    'Playfair Display', Georgia, serif;
  --font-body:       'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:       'Fira Code', monospace;

  /* ── Radius ── */
  --radius-sm:       5px;
  --radius:          9px;
  --radius-lg:       14px;
  --radius-xl:       22px;

  /* ── Shadows ── */
  --shadow-sm:       0 1px 4px rgba(0,63,135,0.07), 0 1px 2px rgba(0,63,135,0.04);
  --shadow:          0 4px 16px rgba(0,63,135,0.10), 0 1px 4px rgba(0,63,135,0.05);
  --shadow-lg:       0 12px 40px rgba(0,63,135,0.14), 0 3px 10px rgba(0,63,135,0.07);

  /* ── Layout ── */
  --sidebar-w:       252px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: var(--accent); color: #fff; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }