/**
 * Design Tokens for Mundo Margo
 * Extended CSS custom properties for components and dark mode
 */

:root {
  /* ===== LIGHT MODE (Default) ===== */
  
  /* Background Colors */
  --background: 0 0% 100%; /* #ffffff */
  --foreground: 300 8% 10%; /* #1D121D */
  
  /* Card & Surface */
  --card: 0 0% 98%; /* #fafafa */
  --card-foreground: 300 8% 10%; /* #1D121D */
  
  --popover: 0 0% 100%; /* #ffffff */
  --popover-foreground: 300 8% 10%; /* #1D121D */
  
  /* Primary Brand Color */
  --primary: 192 97% 30%; /* #027E96 */
  --primary-foreground: 0 0% 100%; /* #ffffff */
  
  /* Secondary/Success */
  --secondary: 82 69% 46%; /* #8DC028 */
  --secondary-foreground: 0 0% 100%; /* #ffffff */
  
  /* Muted/Neutral */
  --muted: 0 0% 94%; /* #f0f0f0 */
  --muted-foreground: 0 0% 40%; /* #666666 */
  
  /* Accent/Info */
  --accent: 214 99% 23%; /* #012F72 */
  --accent-foreground: 0 0% 100%; /* #ffffff */
  
  /* Destructive/Error */
  --destructive: 355 83% 46%; /* #D41620 */
  --destructive-foreground: 0 0% 100%; /* #ffffff */
  
  /* Warning */
  --warning: 51 85% 62%; /* #EBD84C */
  --warning-foreground: 300 8% 10%; /* #1D121D */
  
  /* Border & Input */
  --border: 0 0% 88%; /* #e0e0e0 */
  --input: 0 0% 88%; /* #e0e0e0 */
  --ring: 192 97% 30%; /* #027E96 */
  
  /* Chart Colors */
  --chart-1: 192 97% 30%; /* Primary - #027E96 */
  --chart-2: 82 69% 46%; /* Success - #8DC028 */
  --chart-3: 51 85% 62%; /* Warning - #EBD84C */
  --chart-4: 355 83% 46%; /* Error - #D41620 */
  --chart-5: 214 99% 23%; /* Accent - #012F72 */
  
  /* Sidebar */
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 300 8% 10%;
  --sidebar-primary: 192 97% 30%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 0 0% 94%;
  --sidebar-accent-foreground: 300 8% 10%;
  --sidebar-border: 0 0% 88%;
  --sidebar-ring: 192 97% 30%;
  
  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;
  
  /* Shadow */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* ===== DARK MODE ===== */
[data-theme="dark"] {
  --background: 300 8% 10%; /* #1D121D */
  --foreground: 0 0% 98%; /* #fafafa */
  
  --card: 300 8% 12%; /* Slightly lighter than background */
  --card-foreground: 0 0% 98%;
  
  --popover: 300 8% 12%;
  --popover-foreground: 0 0% 98%;
  
  --primary: 192 97% 40%; /* Lighter primary for dark mode */
  --primary-foreground: 0 0% 100%;
  
  --secondary: 82 69% 56%; /* Lighter success for dark mode */
  --secondary-foreground: 300 8% 10%;
  
  --muted: 0 0% 20%;
  --muted-foreground: 0 0% 70%;
  
  --accent: 214 99% 40%; /* Lighter accent for dark mode */
  --accent-foreground: 0 0% 100%;
  
  --destructive: 355 83% 56%; /* Lighter error for dark mode */
  --destructive-foreground: 0 0% 100%;
  
  --warning: 51 85% 72%; /* Lighter warning for dark mode */
  --warning-foreground: 300 8% 10%;
  
  --border: 0 0% 25%;
  --input: 0 0% 25%;
  --ring: 192 97% 40%;
  
  --sidebar-background: 300 8% 8%;
  --sidebar-foreground: 0 0% 98%;
  --sidebar-primary: 192 97% 40%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 0 0% 20%;
  --sidebar-accent-foreground: 0 0% 98%;
  --sidebar-border: 0 0% 25%;
  --sidebar-ring: 192 97% 40%;
  
  /* Adjust shadows for dark mode */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* ===== Utility Classes ===== */
.bg-background {
  background-color: hsl(var(--background));
}

.bg-foreground {
  background-color: hsl(var(--foreground));
}

.bg-primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.bg-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

.bg-accent {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.bg-destructive {
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}

.bg-warning {
  background-color: hsl(var(--warning));
  color: hsl(var(--warning-foreground));
}

.bg-muted {
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

.bg-card {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
}

.text-primary {
  color: hsl(var(--primary));
}

.text-secondary {
  color: hsl(var(--secondary));
}

.text-accent {
  color: hsl(var(--accent));
}

.text-destructive {
  color: hsl(var(--destructive));
}

.text-muted {
  color: hsl(var(--muted-foreground));
}

.border {
  border: 1px solid hsl(var(--border));
}

.rounded {
  border-radius: var(--radius);
}

.rounded-sm {
  border-radius: var(--radius-sm);
}

.rounded-md {
  border-radius: var(--radius-md);
}

.rounded-lg {
  border-radius: var(--radius-lg);
}

.rounded-full {
  border-radius: var(--radius-full);
}

.shadow {
  box-shadow: var(--shadow);
}

.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}