/**
 * Qrium Design System — tokens compartidos (admin + cliente)
 * Sprint UI-1
 */
:root {
  /* Brand */
  --brand-primary: #5b5fc7;
  --brand-primary-hover: #4a4eb0;
  --brand-primary-soft: rgba(91, 95, 199, 0.12);
  --brand-primary-muted: rgba(91, 95, 199, 0.08);
  --brand-secondary: #7c3aed;
  --brand-gradient: linear-gradient(135deg, #5b5fc7 0%, #6d28d9 100%);

  /* Surfaces */
  --brand-surface: #f4f5f7;
  --brand-surface-elevated: #ffffff;
  --brand-surface-sunken: #ebedf0;
  --brand-border: #e2e5eb;
  --brand-border-strong: #cdd3df;

  /* Text */
  --brand-text: #1a1d26;
  --brand-text-secondary: #5c6370;
  --brand-text-muted: #6b7280;
  --brand-text-inverse: #ffffff;

  /* Semantic */
  --brand-success: #059669;
  --brand-success-soft: #ecfdf5;
  --brand-warning: #d97706;
  --brand-warning-soft: #fffbeb;
  --brand-danger: #dc2626;
  --brand-danger-soft: #fef2f2;
  --brand-info: #2563eb;
  --brand-info-soft: #eff6ff;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Radius & shadow */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  --shadow-xs: 0 1px 2px rgba(26, 29, 38, 0.04);
  --shadow-sm: 0 1px 3px rgba(26, 29, 38, 0.06), 0 1px 2px rgba(26, 29, 38, 0.04);
  --shadow-md: 0 4px 12px rgba(26, 29, 38, 0.08);
  --shadow-lg: 0 12px 32px rgba(26, 29, 38, 0.12);

  /* Layout */
  --navbar-height: 56px;
  --sidebar-width: 248px;
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;

  /* Client overrides (tema por bar vía JS) */
  --bar-primary: var(--brand-primary);
  --bar-primary-hover: var(--brand-primary-hover);
  --bar-primary-soft: var(--brand-primary-soft);

  /* Legacy aliases — compatibilidad con CSS/JS existentes */
  --color-primary: var(--brand-primary);
  --color-primary-dark: var(--brand-primary-hover);
  --color-primary-light: var(--brand-primary-soft);
  --color-secondary: var(--brand-secondary);
  --gradient-primary: var(--brand-gradient);
  --color-success: var(--brand-success);
  --color-warning: var(--brand-warning);
  --color-error: var(--brand-danger);
  --color-error-light: var(--brand-danger-soft);
  --color-info: var(--brand-info);
  --color-danger: var(--brand-danger);
  --color-danger-dark: #b91c1c;
  --color-text-primary: var(--brand-text);
  --color-text-secondary: var(--brand-text-secondary);
  --color-text-tertiary: var(--brand-text-muted);
  --color-text-light: var(--brand-text-inverse);
  --color-bg-primary: var(--brand-surface-elevated);
  --color-bg-secondary: var(--brand-surface);
  --color-bg-quaternary: var(--brand-surface-sunken);
  --color-border: var(--brand-border);
  --color-border-light: var(--brand-border);
  --spacing-xs: var(--space-1);
  --spacing-sm: var(--space-2);
  --spacing-md: var(--space-4);
  --spacing-lg: var(--space-6);
  --spacing-xl: var(--space-8);

  /* Admin main.css aliases */
  --app-bg: var(--brand-surface);
  --app-text: var(--brand-text);
  --app-border: var(--brand-border);
  --app-muted: var(--brand-text-muted);
  --app-white: var(--brand-surface-elevated);
  --app-accent: var(--brand-primary);
  --app-accent-dark: var(--brand-primary-hover);
  --app-accent-soft: var(--brand-primary-soft);
  --app-shadow: var(--shadow-sm);
  --color-text: var(--brand-text);
  --color-bg: var(--brand-surface);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-normal: 0ms;
  }
}