/* Shadcn UI Base Styles */
/* CSS variables for Shadcn UI design tokens.
   Values are HSL aliases to /assets/colors.css so Tailwind opacity syntax keeps working. */
:root {
  --radius: 0.625rem;
  --background: var(--color-bg-main-hsl);
  --foreground: var(--color-text-primary-hsl);
  --card: var(--color-bg-panel-hsl);
  --card-foreground: var(--color-text-primary-hsl);
  --popover: var(--color-bg-panel-hsl);
  --popover-foreground: var(--color-text-primary-hsl);
  --primary: var(--color-success-hsl);
  --primary-foreground: var(--color-white-pure-hsl);
  --secondary: var(--color-gray-100-hsl);
  --secondary-foreground: var(--color-text-primary-hsl);
  --muted: var(--color-gray-100-hsl);
  --muted-foreground: var(--color-gray-600-hsl);
  --accent: var(--color-warning-accent-hsl);
  --accent-foreground: var(--color-bg-main-hsl);
  --destructive: var(--color-error-hsl);
  --border: var(--color-gray-300-hsl);
  --input: var(--color-gray-100-hsl);
  --ring: var(--color-success-hsl);
  --chart-1: var(--color-success-hsl);
  --chart-2: var(--color-warning-accent-hsl);
  --chart-3: var(--color-gray-500-hsl);
  --chart-4: var(--color-warning-hsl);
  --chart-5: var(--color-error-hsl);
  --sidebar: var(--color-bg-panel-hsl);
  --sidebar-foreground: var(--color-text-primary-hsl);
  --sidebar-primary: var(--color-success-hsl);
  --sidebar-primary-foreground: var(--color-white-pure-hsl);
  --sidebar-accent: var(--color-warning-accent-hsl);
  --sidebar-accent-foreground: var(--color-bg-main-hsl);
  --sidebar-border: var(--color-gray-300-hsl);
  --sidebar-ring: var(--color-success-hsl);
  --success: var(--color-success-hsl);
  --success-foreground: var(--color-white-pure-hsl);
  --warning: var(--color-warning-hsl);
  --warning-foreground: var(--color-black-hsl);
  
  /* Extended color palette - mapped from colors.css for slide editor compatibility */
  /* Neutral grays */
  --gray-100: var(--color-gray-100-hsl);
  --gray-200: var(--color-text-primary-hsl);
  --gray-300: var(--color-gray-300-hsl);
  --gray-600: var(--color-gray-600-hsl);
  --gray-700: var(--color-gray-600-hsl);
  --gray-800: var(--color-bg-main-hsl);
  
  /* Panel colors (slide editor specific) */
  --beige-panel: var(--color-bg-panel-hsl);
  --beige-dark: var(--color-gray-100-hsl);
  --beige-light: var(--color-gray-100-hsl);
  --brown: var(--color-gray-100-hsl);
  --brown-dark: var(--color-bg-main-hsl);
  --emerald-dark: var(--color-bg-main-hsl);
  --dark-panel: var(--color-bg-panel-hsl);
  
  /* Accent colors - using green palette */
  --accent-blue: var(--color-white-pure-hsl);
  --info: var(--color-white-pure-hsl);
  --success-dark: var(--color-success-dark-hsl);
  --success-light: var(--color-warning-accent-hsl);
}

.dark {
  /* Dark mode uses the same system palette aliases as :root. */
}

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

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