/* PUSAKA Design Tokens — 2026 Modern Educational */
:root{
  /* Brand */
  --pusaka-primary:#0E6F5C; --pusaka-primary-600:#0A5546; --pusaka-primary-50:#ECFDF5;
  --pusaka-accent:#F59E0B; --pusaka-accent-600:#D97706; --pusaka-accent-50:#FFFBEB;
  --pusaka-suede:#3F5D45; --pusaka-suede-600:#2E4A35; --pusaka-suede-50:#E8F0E6; --pusaka-suede-light:#5A7E62;
  --pusaka-dark:#0F172A; --pusaka-slate-800:#1E293B; --pusaka-slate-700:#334155; --pusaka-slate-500:#64748B; --pusaka-slate-200:#E2E8F0; --pusaka-slate-50:#F8FAFC;
  --pusaka-success:#10B981; --pusaka-danger:#EF4444; --pusaka-white:#FFFFFF;

  /* Typography */
  --font-heading:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --text-xs:12px; --text-sm:14px; --text-base:16px; --text-lg:18px; --text-xl:20px; --text-2xl:24px; --text-3xl:30px; --text-4xl:36px; --text-5xl:48px;

  /* Spacing (8pt) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px; --space-24:96px;

  /* Radius */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px; --radius-pill:9999px;

  /* Shadow */
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow-card:0 4px 20px rgba(15,23,42,.06);
  --shadow-hover:0 12px 32px rgba(15,23,42,.10);
  --shadow-nav:0 2px 12px rgba(15,23,42,.08);

  /* Motion */
  --duration:200ms; --ease:cubic-bezier(.2,.8,.2,1);
}

/* Reset / Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body); color:var(--pusaka-slate-700); background:var(--pusaka-slate-50); line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading); color:var(--pusaka-dark); line-height:1.2; letter-spacing:-.02em}
a{color:var(--pusaka-primary)}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{outline:2px solid var(--pusaka-accent); outline-offset:2px}
img{max-width:100%; height:auto}

/* Utilities */
.text-accent{color:var(--pusaka-accent)}
.bg-primary{background:var(--pusaka-primary)!important}
.bg-accent{background:var(--pusaka-accent)!important}
.rounded-xl{border-radius:var(--radius-xl)!important}
.shadow-card{box-shadow:var(--shadow-card)}