/* =====================================================================
   Qrovia · Design Tokens (CSS Custom Properties) — v1.0
   Sistema visual de Qrovia: azul de confianza + verde aprobado.
   ===================================================================== */

:root {
  /* ---- Marca ------------------------------------------------------- */
  --qro-azul-50:  #EAF1FF;
  --qro-azul-100: #CFE0FF;
  --qro-azul-300: #7FA8FF;
  --qro-azul-500: #3D86FF;   /* fill claro / hover               */
  --qro-azul-600: #0067FD;   /* PRIMARIO — botones, marca        */
  --qro-azul-700: #0052CC;   /* texto/enlace accesible (AA)      */
  --qro-azul-900: #002E7A;   /* titulares de confianza           */

  --qro-verde-50:  #E7F8EE;
  --qro-verde-500: #03BE42;  /* SECUNDARIO + pago aprobado       */
  --qro-verde-700: #067A30;  /* texto verde accesible            */

  --qro-noche:    #070C18;   /* base de tema oscuro              */

  /* ---- Neutros (Tinta) --------------------------------------------- */
  --tinta-900: #0B1524; --tinta-700: #334155; --tinta-500: #64748B;
  --tinta-300: #CBD5E1; --tinta-200: #E2E8F0; --tinta-100: #F1F5F9;
  --nube:      #F6F8FC; --blanco:    #FFFFFF;

  /* ---- Semánticos -------------------------------------------------- */
  --exito-500:  #03BE42; --exito-700: #067A30; --exito-50: #E7F8EE; /* Pago aprobado */
  --alerta-500: #F79009; --alerta-700: #B54708; --alerta-50: #FEF3E2;
  --error-500:  #F04438; --error-700:  #B42318; --error-50:  #FEECEB; /* Rechazo/error */
  --info-500:   var(--qro-azul-600); --info-50: var(--qro-azul-50);

  /* ---- Roles (tema claro) ------------------------------------------ */
  --bg:            var(--nube);
  --surface:       var(--blanco);
  --surface-alt:   var(--tinta-100);
  --fg:            var(--tinta-900);
  --fg-muted:      var(--tinta-500);
  --border:        var(--tinta-200);
  --border-strong: var(--tinta-300);
  --accent:        var(--qro-azul-600);
  --accent-ink:    var(--qro-azul-700);
  --focus-ring:    #3D86FF;

  /* Gradiente de marca — SOLO isotipo + momento "aprobado". */
  --grad-marca: linear-gradient(135deg, var(--qro-azul-600) 0%, var(--qro-verde-500) 100%);

  /* ---- Tipografía --------------------------------------------------- */
  --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'JetBrains Mono', monospace;

  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(11,21,36,.06), 0 1px 1px rgba(11,21,36,.04);
  --shadow-2: 0 4px 12px rgba(11,21,36,.08);
  --shadow-3: 0 12px 28px rgba(11,21,36,.12);
  --container: 1200px;
}

:root[data-theme="dark"], .theme-dark {
  --bg: var(--qro-noche); --surface: #0E1526; --surface-alt: #131C31;
  --fg: #EAF0FA; --fg-muted: #93A1B8;
  --border: rgba(255,255,255,.09); --border-strong: rgba(255,255,255,.18);
  --accent: var(--qro-azul-500); --accent-ink: #7FA8FF;
}