/* ============================================================
   SmartSchool AI Planner — Design Tokens
   Signature motif: the Focus Ring — a radial progress ring used
   consistently for homework progress, streaks, exam countdowns,
   and goal completion. It's the one visual idea that repeats
   everywhere and ties the app together.
   ============================================================ */

:root{
  /* ---- Light mode (default) ---- */
  --bg: #F5F3FF;
  --bg-elevated: #FFFFFF;
  --surface: rgba(255,255,255,0.6);
  --surface-strong: rgba(255,255,255,0.85);
  --border: rgba(108,92,231,0.14);
  --text: #1E1B2E;
  --text-dim: #625D7A;
  --text-faint: #9089AC;

  --accent: #6C5CE7;       /* Violet Core */
  --accent-2: #22D3EE;     /* Cyan Spark */
  --accent-3: #FF6B6B;     /* Coral — alerts / streaks */
  --accent-4: #34D399;     /* Mint — success / attendance */
  --accent-5: #FBBF24;     /* Amber — priority / warnings */

  --grad-primary: linear-gradient(135deg, var(--accent), var(--accent-2));
  --grad-warm: linear-gradient(135deg, var(--accent-3), var(--accent-5));
  --grad-mint: linear-gradient(135deg, var(--accent-4), var(--accent-2));

  --shadow-sm: 0 2px 12px rgba(76,60,150,0.08);
  --shadow-md: 0 8px 30px rgba(76,60,150,0.12);
  --shadow-lg: 0 16px 50px rgba(76,60,150,0.18);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --font-display: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --blur: blur(18px);
  --ease: cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"]{
  --bg: #0F1220;
  --bg-elevated: #171A2C;
  --surface: rgba(255,255,255,0.05);
  --surface-strong: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.08);
  --text: #F2F1FA;
  --text-dim: #A7A3C4;
  --text-faint: #6C6890;

  --shadow-sm: 0 2px 12px rgba(0,0,0,0.25);
  --shadow-md: 0 8px 30px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.5);
}

/* Accent picker overrides --accent / --accent-2 via inline style on :root */

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  transition: background .4s var(--ease), color .4s var(--ease);
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 45%),
    radial-gradient(circle at 85% 85%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 45%);
  pointer-events:none;
}
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; letter-spacing:-0.01em; }
p{ margin:0; }
a{ color:inherit; }
button{ font-family: var(--font-body); }

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

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.glass{
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}