/* ============================================
   DESIGN SYSTEM — shadcn-inspired HSL Tokens
   所有颜色的单一事实来源。支持 light / dark / banna-yellow
   ============================================ */

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

/* ---- Reset ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ============================================
   LIGHT THEME (default)
   ============================================ */
:root {
  /* Backgrounds */
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;

  /* Surfaces */
  --app-bg: 220 14.3% 95.9%;
  --panel: 0 0% 100%;
  --panel-foreground: 222.2 84% 4.9%;

  /* Primary — Indigo */
  --primary: 238.7 83.5% 66.7%;
  --primary-foreground: 0 0% 100%;

  /* Accent */
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;

  /* Destructive */
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;

  /* Success */
  --success: 142.1 76.2% 36.3%;

  /* Borders & Input */
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 238.7 83.5% 66.7%;

  /* Radius — single source of truth */
  --radius: 0.5rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Transition */
  --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Sidebar */
  --sidebar-width: 380px;
}

/* ============================================
   DARK THEME
   ============================================ */
.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 7%;
  --card-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --app-bg: 222.2 84% 3%;
  --panel: 222.2 84% 6%;
  --panel-foreground: 210 40% 98%;
  --primary: 238.7 83.5% 66.7%;
  --primary-foreground: 0 0% 100%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 100%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 238.7 83.5% 66.7%;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
}

/* ---- Banna Yellow Accent ---- */
.dark[data-theme="banna"] {
  --primary: 47.9 95.8% 53.1%;
  --primary-foreground: 222.2 84% 4.9%;
  --ring: 47.9 95.8% 53.1%;
}

/* ============================================
   BASE STYLES
   ============================================ */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", sans-serif;
  background: hsl(var(--app-bg));
  color: hsl(var(--foreground));
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes spin {
  100% { transform: rotate(360deg); }
}

@keyframes gradientFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes toastIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes toastOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}