/* ================================================================
   EDUTRACK V5 — BASE & TOKENS
================================================================ */
:root {
  --c-bg: #0a0a0f;
  --c-surface: #111118;
  --c-surface-2: #18181f;
  --c-surface-3: #202028;
  --c-border: rgba(255, 255, 255, 0.07);
  --c-border-2: rgba(255, 255, 255, 0.12);

  --c-text: #ededf0;
  --c-muted: #8b8b9e;
  --c-subtle: #3d3d50;

  --c-primary: #2563eb;
  --c-primary-l: rgba(37, 99, 235, 0.08);
  --c-primary-g: #2563eb;

  --c-ok: #22c55e;
  --c-ok-l: rgba(34, 197, 94, 0.15);
  --c-warn: #f59e0b;
  --c-warn-l: rgba(245, 158, 11, 0.15);
  --c-danger: #ef4444;
  --c-danger-l: rgba(239, 68, 68, 0.15);

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius-xl: 30px;

  --shadow-card: 0 4px 30px rgba(0, 0, 0, .4);
  --shadow-float: 0 10px 40px rgba(0, 0, 0, .6);

  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t: .28s;

  --sidebar-w: 260px;
  --topbar-h: 70px;
  --bottom-h: 84px;
  
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

[data-theme="light"] {
  --c-bg: #f5f5f8;
  --c-surface: #ffffff;
  --c-surface-2: #f0f0f5;
  --c-surface-3: #e8e8f0;
  --c-border: rgba(0, 0, 0, 0.05);
  --c-border-2: rgba(0, 0, 0, 0.08);
  --c-text: #1a1a25;
  --c-muted: #78788a;
  --c-subtle: #c8c8d5;
  --shadow-card: 0 2px 12px rgba(0, 0, 0, .04);
  --shadow-float: 0 8px 30px rgba(0, 0, 0, .08);
  --c-primary-l: rgba(37, 99, 235, 0.06);
}

*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html { font-size: 16px; }
@media (max-width: 480px) { html { font-size: 14px; } }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--c-bg); color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  overflow: hidden; height: 100dvh;
  transition: background .3s, color .3s;
}

a { text-decoration: none; color: inherit; }
button { border: none; cursor: pointer; font-family: inherit; background: transparent; }
ul { list-style: none; }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-subtle); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-muted); }

/* KEYFRAMES */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes popIn { 0% { transform: scale(.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes orb1 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(40px,-40px) scale(1.1);} }
@keyframes orb2 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-30px,30px) scale(1.15);} }
@keyframes pulseRing { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.1);opacity:.8;} }

.anim-fade-up { opacity: 0; animation: fadeUp .55s var(--ease-out) forwards; }
.delay-1 { animation-delay: .06s; }
.delay-2 { animation-delay: .12s; }
.delay-3 { animation-delay: .18s; }
.delay-4 { animation-delay: .24s; }