/**
 * variables.css
 * 
 * Sistema de diseño de variables y tokens (Aurelian System).
 * Tema claro premium "Lujo Silencioso" y Corporativo.
 */

:root {
  /* Paleta de Colores - Premium Light Mode (Aurelian Theme) */
  --bg-primary: hsl(45, 12%, 97%);          /* Soft off-white background */
  --bg-secondary: hsl(0, 0%, 100%);         /* Pure white for sidebar and cards */
  --bg-glass: hsla(0, 0%, 100%, 0.85);      /* Frosted white glass */
  --bg-user-bubble: hsl(45, 30%, 94%);      /* Warm gold-tinted user bubble */
  --bg-agent-bubble: hsl(0, 0%, 100%);      /* Pure white agent bubble */
  --bg-sidebar: hsl(0, 0%, 100%);
  --bg-card: hsl(0, 0%, 100%);
  
  /* Primary & Accent Colors (Charcoal and Champagne Gold) */
  --color-primary: hsl(210, 20%, 10%);      /* Charcoal black for main buttons and typography */
  --color-primary-hover: hsl(210, 20%, 20%);
  --color-primary-glow: rgba(26, 26, 26, 0.08);

  --color-accent: hsl(45, 60%, 48%);        /* Champagne Gold for highlights & CTAs */
  --color-accent-hover: hsl(45, 60%, 55%);
  --color-accent-glow: hsla(45, 60%, 48%, 0.2);
  
  --color-secondary: hsl(204, 8%, 45%);     /* Slate gray for secondary details */
  --color-secondary-hover: hsl(204, 8%, 55%);

  /* Borders and Focus */
  --border-color: hsl(0, 0%, 90%);          /* Very light gray border */
  --border-glass: hsla(0, 0%, 0%, 0.05);
  --border-focus: var(--color-accent);
  --border-accent: var(--color-accent);

  /* Functional Statuses */
  --color-danger: hsl(0, 72%, 50%);
  --color-danger-hover: hsl(0, 72%, 58%);
  --color-danger-glow: hsla(0, 72%, 50%, 0.15);
  --color-success: hsl(142, 60%, 38%);
  --color-success-glow: hsla(142, 60%, 38%, 0.15);

  /* Typography Colors */
  --text-main: hsl(210, 20%, 10%);          /* Deep charcoal */
  --text-muted: hsl(210, 8%, 45%);          /* Slate gray */
  --text-inverse: hsl(0, 0%, 100%);         /* White text over dark background */

  /* Spacings */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2.5rem;    /* 40px */
  --spacing-xxl: 4rem;     /* 64px */

  /* Border Radii (Crisp Premium - Rectangular buttons and cards) */
  --border-radius-xs: 2px;
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 10px;
  --border-radius-button: 6px;              /* Rectangular button with rounded corners */
  --border-radius-circle: 50%;

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-title: 'Playfair Display', 'Outfit', serif;
  
  /* Sizes */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-xxl: 2.25rem;

  /* Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Shadows (Extremely soft ambient shadows) */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 0 15px rgba(115, 92, 0, 0.1);
  --shadow-glow-accent: 0 0 15px var(--color-accent-glow);
  
  --glass-blur: blur(20px);

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}