/* typography.css — centralized Google Sans typography system for Shule Mtandaoni */

/* ── Font variable ───────────────────────────────────────────── */
:root {
  --primary-font: "Google Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
}

/* ── Global font reset ───────────────────────────────────────── */
*, *::before, *::after {
  font-family: var(--primary-font);
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--primary-font);
  font-weight: var(--font-weight-regular);
  line-height: 1.55;
}

/* ── Headings ────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--primary-font);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1, .h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2, .h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3, .h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
h4, .h4 { font-size: clamp(1.1rem, 2vw, 1.25rem); }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.9rem; }

/* ── Body / paragraphs ───────────────────────────────────────── */
p, li, span, label, input, textarea, select, button, a, td, th {
  font-family: var(--primary-font);
}

p, li, .body-text {
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
}

/* ── Buttons ─────────────────────────────────────────────────── */
button, .btn, .admin-btn, .btn-primary, .btn-outline, .btn-submit, .btn-cancel {
  font-family: var(--primary-font);
  font-weight: var(--font-weight-medium);
}

/* ── Dashboard numbers / stats ───────────────────────────────── */
.value, .stat-box-num, .stat-number, .dashboard-number, .metric-value {
  font-family: var(--primary-font);
  font-weight: var(--font-weight-bold);
}

/* ── Tables ──────────────────────────────────────────────────── */
table, .admin-table, .data-table {
  font-family: var(--primary-font);
}

th, .table-header {
  font-weight: var(--font-weight-medium);
}

/* ── Navigation / sidebar ────────────────────────────────────── */
nav, .admin-nav, .admin-sidebar, .sidebar, .nav-link, .menu-item {
  font-family: var(--primary-font);
}

/* ── Form controls ───────────────────────────────────────────── */
input, textarea, select, .form-control, .form-group label {
  font-family: var(--primary-font);
}

/* ── Responsive typography ───────────────────────────────────── */
@media (max-width: 768px) {
  html { font-size: 15px; }
  body { line-height: 1.5; }
  h1, .h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
  h2, .h2 { font-size: clamp(1.3rem, 5vw, 1.7rem); }
  h3, .h3 { font-size: clamp(1.15rem, 4vw, 1.35rem); }
}

@media (max-width: 480px) {
  html { font-size: 14px; }
  h1, .h1 { font-size: 1.5rem; }
  h2, .h2 { font-size: 1.3rem; }
  h3, .h3 { font-size: 1.15rem; }
  .value, .stat-box-num, .stat-number { font-size: 1.5rem; }
}