/* BSIT IA Attendance Checker — design tokens (derived from docs/mockup.png) */
:root {
  /* Navy (sidebar, dark surfaces) */
  --navy-950: #081326;
  --navy-900: #0b1a36;
  --navy-800: #0f2147;
  --navy-700: #17315f;

  /* Blue accent */
  --blue-700: #1d4ed8;
  --blue-600: #2563eb;
  --blue-500: #3b82f6;
  --blue-100: #dbeafe;
  --blue-50: #eff6ff;

  /* Neutrals */
  --bg: #f3f6fb;
  --surface: #ffffff;
  --border: #e5eaf3;
  --border-strong: #d3dbea;
  --text: #0f172a;
  --text-2: #334155;
  --muted: #64748b;
  --subtle: #94a3b8;

  /* Status */
  --green-600: #16a34a;
  --green-700: #15803d;
  --green-50: #ecfdf3;
  --amber-600: #d97706;
  --amber-700: #b45309;
  --amber-50: #fffbeb;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --red-50: #fef2f2;

  /* Shape */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 20px rgba(15, 23, 42, 0.05);
  --shadow-blue: 0 6px 16px rgba(37, 99, 235, 0.28);

  /* Layout */
  --sidebar-w: 252px;
  --topbar-h: 66px;
  --bottomnav-h: 68px;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}