/* ==========================================================================
   Learning & Performance Tracker — Global Stylesheet
   --------------------------------------------------------------------------
   Zero-build static site: this file defines the CSS custom properties
   (design tokens) consumed by the Tailwind Play CDN config in index.html
   (see window.tailwind.config.theme.extend.colors, which reference these
   variables via hsl(var(--x))). This is the same convention shadcn/ui uses,
   just without a build step.

   Also contains a few things Tailwind utility classes can't express on
   their own: font import, scrollbar styling, and simple CSS keyframe
   animations that stand in for Framer Motion (.animate-fade-in / .animate-slide-up).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* --------------------------------------------------------------------------
   Design tokens (HSL triplets WITHOUT the hsl() wrapper, e.g. "222 47% 11%")
   so Tailwind can compose them as hsl(var(--background)) etc. and still
   support opacity modifiers like bg-primary/50.
   -------------------------------------------------------------------------- */
:root {
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;

  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 243 75% 59%;

  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;

  --primary: 243 75% 59%;
  --primary-foreground: 0 0% 100%;

  --secondary: 220 14% 96%;
  --secondary-foreground: 222 47% 11%;

  --muted: 220 14% 96%;
  --muted-foreground: 220 9% 46%;

  --accent: 243 75% 96%;
  --accent-foreground: 243 75% 40%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --success: 142 71% 45%;
  --success-foreground: 0 0% 100%;

  --warning: 38 92% 50%;
  --warning-foreground: 222 47% 11%;

  --radius: 0.625rem;
}

.dark {
  --background: 222 47% 7%;
  --foreground: 210 20% 96%;

  --border: 217 19% 20%;
  --input: 217 19% 20%;
  --ring: 243 75% 65%;

  --card: 222 40% 10%;
  --card-foreground: 210 20% 96%;

  --primary: 243 75% 65%;
  --primary-foreground: 0 0% 100%;

  --secondary: 217 19% 16%;
  --secondary-foreground: 210 20% 96%;

  --muted: 217 19% 16%;
  --muted-foreground: 217 10% 65%;

  --accent: 243 40% 20%;
  --accent-foreground: 235 100% 87%;

  --destructive: 0 72% 55%;
  --destructive-foreground: 0 0% 100%;

  --success: 142 65% 45%;
  --success-foreground: 0 0% 100%;

  --warning: 38 85% 55%;
  --warning-foreground: 222 47% 11%;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
* {
  border-color: hsl(var(--border));
}

html, body {
  height: 100%;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   Scrollbars (WebKit + Firefox) — subtle, theme-aware
   -------------------------------------------------------------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--muted-foreground) / 0.35) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: hsl(var(--muted-foreground) / 0.35);
  border-radius: 9999px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--muted-foreground) / 0.55);
}

/* --------------------------------------------------------------------------
   Animations — plain CSS replacement for Framer Motion transitions.
   Apply .animate-fade-in / .animate-slide-up to pages, cards, dialogs, etc.
   -------------------------------------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInFromRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slideOutToRight {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.animate-fade-in {
  animation: fadeIn 0.2s ease-out both;
}

.animate-slide-up {
  animation: slideUp 0.25s ease-out both;
}

.animate-toast-in {
  animation: toastSlideIn 0.2s ease-out both;
}

/* Sheet (off-canvas panel) slide animations, used by js/components-ui.js */
.sheet-panel-enter {
  animation: slideInFromRight 0.25s ease-out both;
}

.sheet-panel-exit {
  animation: slideOutToRight 0.2s ease-in both;
}

/* --------------------------------------------------------------------------
   Small utility helpers not worth a Tailwind class
   -------------------------------------------------------------------------- */
.tap-highlight-none {
  -webkit-tap-highlight-color: transparent;
}