/* ============================================================
   SMS Mockups — Design System (tokens + base)
   Greenwood International School · Modern SaaS admin theme
   ============================================================ */

:root {
  /* Brand */
  --primary: #4f46e5;
  --primary-600: #4338ca;
  --primary-100: #e0e7ff;
  --primary-50: #eef2ff;

  /* Neutrals */
  --bg: #f8fafc;
  --surface: #ffffff;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text: #0f172a;
  --text-2: #475569;
  --text-3: #94a3b8;

  /* Semantic */
  --success: #16a34a;  --success-bg: #f0fdf4;  --success-border: #bbf7d0;
  --warning: #d97706;  --warning-bg: #fffbeb;  --warning-border: #fde68a;
  --danger:  #dc2626;  --danger-bg:  #fef2f2;  --danger-border:  #fecaca;
  --info:    #0284c7;  --info-bg:    #f0f9ff;  --info-border:    #bae6fd;
  --purple:  #7c3aed;  --purple-bg:  #f5f3ff;

  /* Sidebar */
  --sidebar-bg: #0f172a;
  --sidebar-text: #94a3b8;
  --sidebar-text-active: #ffffff;
  --sidebar-active-bg: #1e293b;
  --sidebar-width: 248px;

  /* Misc */
  --radius: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow: 0 1px 3px rgba(15, 23, 42, .1), 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-lg: 0 10px 25px -5px rgba(15, 23, 42, .15);
  --font: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Sora', 'Inter', -apple-system, sans-serif;
}

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

html { font-size: 14px; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1 { font-family: var(--font-display); font-size: 1.5rem;  font-weight: 700; letter-spacing: -.02em; }
h2 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
h3 { font-size: 1rem;    font-weight: 600; }
h4 { font-size: .9rem;   font-weight: 600; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

small, .muted { color: var(--text-3); font-size: .82rem; }
.text-2 { color: var(--text-2); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger  { color: var(--danger); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.mono { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.fw-600 { font-weight: 600; }

/* Spacing utilities */
.mt-1 { margin-top: 4px; }  .mt-2 { margin-top: 8px; }  .mt-3 { margin-top: 16px; } .mt-4 { margin-top: 24px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 16px; } .mb-4 { margin-bottom: 24px; }

/* Flex / grid helpers */
.flex { display: flex; gap: 12px; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.flex-center { display: flex; align-items: center; gap: 8px; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

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