/* styles.css - Basat en el Design System (design-system.md) */

:root {
  --background: 220 20% 97%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;
  --primary: 160 84% 39%;
  --primary-foreground: 0 0% 100%;
  --secondary: 160 30% 92%;
  --secondary-foreground: 160 50% 20%;
  --muted: 220 14% 95%;
  --muted-foreground: 220 9% 46%;
  --accent: 160 20% 93%;
  --accent-foreground: 222 47% 11%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 10% 90%;
  --input: 220 10% 88%;
  --ring: 160 84% 39%;
  --success: 160 84% 39%;
  --warning: 38 92% 50%;
  --info: 217 91% 60%;
  
  /* Sidebar / Fons Fosc de Capçaleres */
  --sidebar-background: 222 47% 11%;
  --sidebar-foreground: 220 14% 80%;
  --sidebar-primary: 160 84% 39%;
  --sidebar-accent: 222 40% 16%;
  --sidebar-border: 222 30% 18%;

  --radius: 0.875rem; /* 14px */
  
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 24px rgba(0,0,0,0.1);
  --shadow-xl: 0 24px 48px rgba(0,0,0,0.12);
}

.dark {
  --background: 222 47% 8%;
  --foreground: 220 14% 92%;
  --card: 222 41% 12%;
  --card-foreground: 220 14% 92%;
  --popover: 222 41% 14%;
  --popover-foreground: 220 14% 92%;
  --primary: 160 84% 39%;
  --primary-foreground: 0 0% 100%;
  --secondary: 160 20% 16%;
  --secondary-foreground: 160 40% 80%;
  --muted: 222 30% 14%;
  --muted-foreground: 220 9% 55%;
  --accent: 160 15% 15%;
  --accent-foreground: 220 14% 92%;
  --destructive: 0 63% 31%;
  --destructive-foreground: 0 0% 100%;
  --border: 222 20% 18%;
  --input: 222 20% 20%;
  --ring: 160 84% 39%;
  
  /* Sidebar / Fons Fosc de Capçaleres */
  --sidebar-background: 222 50% 7%;
  --sidebar-foreground: 220 14% 70%;
  --sidebar-primary: 160 84% 39%;
  --sidebar-accent: 222 40% 13%;
  --sidebar-border: 222 30% 12%;
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Transicions suaus per canvi de tema */
body, header, div, section {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Utilitat shadcn per targetes elevades */
.card-elevated {
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.card-elevated:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}