/* Variables del Sistema de Diseño Oficial - iDomi (Manual de Marca) */
:root {
  /* Colores Principales del Manual de Marca */
  --color-primary: #772be2;          /* Primario Oficial iDomi (RGB: 119, 43, 226) */
  --color-primary-dark: #3c00af;     /* Variante Material Design oscura */
  --color-primary-light: #ae5dff;    /* Variante Material Design clara */
  --color-secondary: #090f4c;        /* Secundario Oficial iDomi (RGB: 9, 15, 76) */
  
  /* Tonos de Apoyo y Acentos */
  --color-success: #16a34a;          /* Verde confirmación y ahorro */
  --color-success-light: #dcfce7;
  --color-complementary: #96e22b;    /* Complementario oficial del manual */
  --color-danger: #dc2626;           /* Alertas y cancelaciones */
  --color-amber: #d97706;            /* Estados pendientes */
  --color-blue: #2563eb;             /* Estados en curso */

  /* Fondos y Superficies Limpias (Luz y Claridad Institucional) */
  --bg-page: #f8fafc;                /* Fondo general suave y limpio */
  --bg-white: #ffffff;               /* Tarjetas y contenedores principales */
  --bg-surface-subtle: #f1f5f9;      /* Contenedores secundarios */
  --bg-brand-soft: #f5f0ff;          /* Toque suave del púrpura de marca */
  --bg-brand-banner: #090f4c;        /* Fondo oscuro institucional para contraste */

  /* Bordes */
  --border-light: #e2e8f0;
  --border-focus: #772be2;
  --border-card: #e5e7eb;

  /* Textos y Jerarquía Visual */
  --text-main: #090f4c;              /* Texto principal: azul noche del manual */
  --text-body: #334155;              /* Texto de lectura de párrafos */
  --text-muted: #64748b;             /* Subtítulos y metadatos */
  --text-white: #ffffff;

  /* Tipografías Oficiales */
  --font-heading: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body: 'Roboto', 'Open Sans', system-ui, -apple-system, sans-serif;

  /* Sombras Suaves (Elegantes, sin brillos neon) */
  --shadow-subtle: 0 1px 3px rgba(9, 15, 76, 0.05);
  --shadow-card: 0 4px 16px rgba(9, 15, 76, 0.08);
  --shadow-hover: 0 10px 25px rgba(119, 43, 226, 0.12);
  --shadow-elevated: 0 16px 36px rgba(9, 15, 76, 0.1);

  /* Bordes y Transiciones */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-full: 9999px;
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --container-max: 1200px;
  --header-height: 76px;
}