/* 20J CRM — Design tokens. Derivados del manual de imagen oficial 2026. */
:root {
  /* Marca */
  --color-primary:   #80CCE7;   /* Celeste 20J */
  --color-secondary: #18528C;   /* Azul corporativo */
  --color-accent:    #EF476F;   /* Rosa/fucsia para alertas y CTAs críticos */
  --color-violet:    #6D3C8F;   /* Soporte (Perfumería, sub-marcas) */

  /* Neutrales */
  --color-white:    #FFFFFF;
  --color-black:    #191919;
  --color-gray-50:  #F8F9FA;
  --color-gray-100: #EFEFEF;
  --color-gray-300: #D1D5DB;
  --color-gray-500: #9CA3AF;
  --color-gray-700: #4B5563;

  /* Semánticos */
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error:   #EF4444;
  --color-info:    #0EA5E9;

  /* Tipografía */
  --font-heading: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Espaciado */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Radios */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
}

body {
  font-family: var(--font-body);
  color: var(--color-black);
  background-color: var(--color-gray-50);
}

h1, h2, h3, h4, h5, h6,
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-secondary);
}

.mud-typography-button {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Ajustes para el AppBar de MudBlazor con fondo secundario */
.mud-appbar.mud-elevation-4 {
  box-shadow: 0 2px 8px rgba(24, 82, 140, 0.12);
}