/* ==========================================================================
   SMAN 1 BATUI — Design Tokens v3.0.0
   Academic Emerald · Glass surfaces · Light/Dark native
   ========================================================================== */

:root {
  /* Typography */
  --font-display: "Urbanist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --fs-2xs: 10.5px;
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-md: 13.5px;
  --fs-base: 14px;
  --fs-lg: 15px;
  --fs-xl: 17px;
  --fs-2xl: 20px;
  --fs-3xl: 24px;
  --fs-4xl: 30px;
  --fs-display: 38px;

  /* Surfaces */
  --bg: #f2f6f3;
  --bg-deep: #e8efea;
  --surface: #ffffff;
  --surface-2: #f7faf8;
  --surface-3: #eef4f0;
  --raised: #ffffff;
  --glass: rgba(255, 255, 255, 0.78);
  --glass-strong: rgba(255, 255, 255, 0.92);
  --well: rgba(18, 32, 26, 0.045);

  /* Lines */
  --line: #dfe8e2;
  --line-strong: #c8d7ce;
  --line-faint: rgba(18, 32, 26, 0.08);

  /* Text */
  --text: #12201a;
  --text-2: #3c4f45;
  --muted: #6b7d73;
  --faint: #94a39a;
  --text-inverse: #ffffff;

  /* Brand — Academic Emerald */
  --brand-50: #ecfdf5;
  --brand-100: #d1fae5;
  --brand-200: #a7f3d0;
  --brand-300: #6ee7b7;
  --brand-400: #34d399;
  --brand-500: #10b981;
  --brand-600: #059669;
  --brand-700: #047857;
  --brand-800: #065f46;
  --brand-900: #064e3b;

  --primary: #047857;
  --primary-strong: #065f46;
  --primary-hover: #036a4e;
  --primary-soft: #d9f5e8;
  --primary-softer: #eefaf4;
  --on-primary: #ffffff;
  --primary-glow: rgba(4, 120, 87, 0.22);

  /* Secondary accent — Cobalt */
  --accent: #4f46e5;
  --accent-strong: #4338ca;
  --accent-soft: #e8e7fd;
  --accent-softer: #f2f1fe;

  /* Semantic */
  --good: #059669;
  --good-soft: #e7f8f0;
  --warn: #d97706;
  --warn-soft: #fef3e2;
  --bad: #dc2626;
  --bad-soft: #fdecec;
  --info: #2563eb;
  --info-soft: #e9f0fe;
  --pla: #ea580c;
  --pla-soft: #fff0e6;
  --bolos: #db2777;
  --bolos-soft: #fdebf4;

  /* Presensi semantic */
  --status-hadir: #059669;
  --status-hadir-bg: #e7f8f0;
  --status-telat: #d97706;
  --status-telat-bg: #fef3e2;
  --status-sakit: #2563eb;
  --status-sakit-bg: #e9f0fe;
  --status-izin: #7c3aed;
  --status-izin-bg: #f2ebff;
  --status-alpa: #dc2626;
  --status-alpa-bg: #fdecec;
  --status-pla: #ea580c;
  --status-pla-bg: #fff0e6;
  --status-bolos: #db2777;
  --status-bolos-bg: #fdebf4;
  --status-belum: #64748b;
  --status-belum-bg: #eef2f6;

  /* Discipline tiers */
  --tier-1: #16a34a;
  --tier-2: #d97706;
  --tier-3: #9333ea;
  --tier-4: #dc2626;

  /* Shadow */
  --shadow-xs: 0 1px 2px rgba(18, 32, 26, 0.05);
  --shadow-sm: 0 1px 3px rgba(18, 32, 26, 0.06), 0 1px 2px rgba(18, 32, 26, 0.04);
  --shadow-md: 0 8px 24px -14px rgba(18, 32, 26, 0.22), 0 2px 6px rgba(18, 32, 26, 0.04);
  --shadow-lg: 0 20px 48px -24px rgba(18, 32, 26, 0.3), 0 4px 12px rgba(18, 32, 26, 0.05);
  --shadow-pop: 0 28px 70px -24px rgba(18, 32, 26, 0.36), 0 4px 14px rgba(18, 32, 26, 0.08);
  --shadow-glow: 0 0 0 4px rgba(4, 120, 87, 0.08);

  /* Radii */
  --r-xs: 8px;
  --r-sm: 11px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 30px;
  --r-full: 999px;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Layout */
  --rail-w: 248px;
  --rail-collapsed: 80px;
  --top-h: 74px;
  --page-max: 1680px;
  --gutter: clamp(14px, 2vw, 28px);
  --gap: 18px;
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  color-scheme: light;
}

/* ── Dark theme ───────────────────────────────────────────── */
:root[data-theme="dark"] {
  --bg: #070c0a;
  --bg-deep: #040807;
  --surface: #0d1613;
  --surface-2: #121e19;
  --surface-3: #172620;
  --raised: #14211c;
  --glass: rgba(13, 22, 19, 0.78);
  --glass-strong: rgba(13, 22, 19, 0.92);
  --well: rgba(255, 255, 255, 0.055);

  --line: #20322a;
  --line-strong: #2d4439;
  --line-faint: rgba(255, 255, 255, 0.07);

  --text: #edf6f1;
  --text-2: #c2d2c9;
  --muted: #8fa49a;
  --faint: #6c8177;
  --text-inverse: #07120d;

  --primary: #34d399;
  --primary-strong: #6ee7b7;
  --primary-hover: #4ade80;
  --primary-soft: rgba(16, 185, 129, 0.16);
  --primary-softer: rgba(16, 185, 129, 0.08);
  --on-primary: #042016;
  --primary-glow: rgba(52, 211, 153, 0.2);

  --accent: #a5b4fc;
  --accent-strong: #c7d2fe;
  --accent-soft: rgba(129, 140, 248, 0.16);
  --accent-softer: rgba(129, 140, 248, 0.08);

  --good: #4ade80;
  --good-soft: rgba(34, 197, 94, 0.14);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, 0.14);
  --bad: #f87171;
  --bad-soft: rgba(248, 113, 113, 0.14);
  --info: #60a5fa;
  --info-soft: rgba(96, 165, 250, 0.14);
  --pla: #fb923c;
  --pla-soft: rgba(251, 146, 60, 0.14);
  --bolos: #f472b6;
  --bolos-soft: rgba(244, 114, 182, 0.14);

  --status-hadir: #4ade80;
  --status-hadir-bg: rgba(34, 197, 94, 0.14);
  --status-telat: #fbbf24;
  --status-telat-bg: rgba(251, 191, 36, 0.14);
  --status-sakit: #60a5fa;
  --status-sakit-bg: rgba(96, 165, 250, 0.14);
  --status-izin: #c4b5fd;
  --status-izin-bg: rgba(196, 181, 253, 0.14);
  --status-alpa: #f87171;
  --status-alpa-bg: rgba(248, 113, 113, 0.14);
  --status-pla: #fb923c;
  --status-pla-bg: rgba(251, 146, 60, 0.14);
  --status-bolos: #f472b6;
  --status-bolos-bg: rgba(244, 114, 182, 0.14);
  --status-belum: #94a3b8;
  --status-belum-bg: rgba(148, 163, 184, 0.14);

  --tier-1: #4ade80;
  --tier-2: #fbbf24;
  --tier-3: #c084fc;
  --tier-4: #f87171;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 12px 30px -18px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 26px 60px -26px rgba(0, 0, 0, 0.9), 0 4px 14px rgba(0, 0, 0, 0.3);
  --shadow-pop: 0 32px 80px -28px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-glow: 0 0 0 4px rgba(52, 211, 153, 0.1);

  color-scheme: dark;
}

/* ── Accent variants (cobalt/ocean/graphite) ─────────────── */
:root[data-accent="cobalt"] {
  --accent: #4338ca;
  --accent-strong: #3730a3;
  --accent-soft: #e6e6fc;
  --accent-softer: #f1f1fe;
}
:root[data-theme="dark"][data-accent="cobalt"] {
  --accent: #a5b4fc;
  --accent-strong: #c7d2fe;
  --accent-soft: rgba(129, 140, 248, 0.16);
  --accent-softer: rgba(129, 140, 248, 0.08);
}

:root[data-accent="ocean"] {
  --accent: #0e7490;
  --accent-strong: #155e75;
  --accent-soft: #def4f9;
  --accent-softer: #edfafd;
}
:root[data-theme="dark"][data-accent="ocean"] {
  --accent: #67e8f9;
  --accent-strong: #a5f3fc;
  --accent-soft: rgba(103, 232, 249, 0.14);
  --accent-softer: rgba(103, 232, 249, 0.07);
}

:root[data-accent="graphite"] {
  --accent: #3f3f46;
  --accent-strong: #27272a;
  --accent-soft: #efeff1;
  --accent-softer: #f7f7f8;
}
:root[data-theme="dark"][data-accent="graphite"] {
  --accent: #d4d4d8;
  --accent-strong: #e4e4e7;
  --accent-soft: rgba(212, 212, 216, 0.14);
  --accent-softer: rgba(212, 212, 216, 0.07);
}

/* ── Density ─────────────────────────────────────────────── */
:root[data-density="compact"] {
  --gap: 14px;
  --sp-4: 13px;
  --sp-5: 17px;
  --sp-6: 20px;
  --top-h: 68px;
}