/* ============================================================
   OurVault — Design System
   Archivo: variables.css
   Descripción: Variables globales de color, tipografía y espaciado.
   Modificar aquí afecta toda la plataforma.
   ============================================================ */

:root {

  /* --- Fondos --- */
  --bg-primary:    #ffffff;
  --bg-secondary:  #f4f7ff;
  --bg-soft:       #edf2ff;

  /* --- Superficies --- */
  --surface:       #ffffff;
  --surface-2:     #f8faff;

  /* --- Bordes --- */
  --border:        #d8e4f8;
  --border-chat:   #a8c4f0;
  --border-input:  #c5d8f5;

  /* --- Azules pastel --- */
  --blue-100:      #eaf2ff;
  --blue-200:      #d0e4fb;
  --blue-300:      #a8c4f0;
  --blue-400:      #6fa3e0;
  --blue-500:      #3d7fd4;
/* --- Acentos secundarios --- */
  --pink-100:      #fff0f5;
  --pink-200:      #f8d7e8;
  --lavender-100:  #f3f0ff;
  --lavender-200:  #e2d9f8;

  /* --- Texto --- */
  --text-primary:  #2c3e6b;
  --text-secondary:#6b7bb0;
  --text-muted:    #a0adc8;
  --text-on-blue:  #ffffff;

  /* --- Estado --- */
  --success:       #6dcfa4;
  --danger:        #f0a0a8;
  --warning:       #f5d08a;
  --online:        #6dcfa4;
  --offline:       #c8d0e0;

  /* --- Marca --- */
  --gold:          #c9a96e;
  --gold-dim:      #e8d5b0;

  /* --- Tipografía --- */
  --font-display:  'Cormorant Garamond', Georgia, serif;
  --font-body:     'Raleway', 'Helvetica Neue', sans-serif;
/* --- Tamaños de fuente --- */
  --text-xs:       0.75rem;
  --text-sm:       0.875rem;
  --text-base:     1rem;
  --text-lg:       1.125rem;
  --text-xl:       1.25rem;
  --text-2xl:      1.5rem;
  --text-3xl:      2rem;

  /* --- Espaciado --- */
  --space-1:       0.25rem;
  --space-2:       0.5rem;
  --space-3:       0.75rem;
  --space-4:       1rem;
  --space-6:       1.5rem;
  --space-8:       2rem;
  --space-12:      3rem;

  /* --- Bordes redondeados --- */
  --radius-sm:     6px;
  --radius-md:     12px;
  --radius-lg:     20px;
  --radius-full:   9999px;

  /* --- Sombras --- */
  --shadow-sm:     0 1px 4px rgba(100, 130, 200, 0.10);
  --shadow-md:     0 4px 16px rgba(100, 130, 200, 0.14);
  --shadow-lg:     0 8px 32px rgba(100, 130, 200, 0.18);

  /* --- Transiciones --- */
  --transition:    0.2s ease;
}