/* ============================================================================
   SISTEMA DE DISEÑO — design-tokens.css
   Dirección: fintech sobrio (inspirado en Mercury) · marca boliviaimpuestos / LEXOVA
   Importar este archivo UNA vez de forma global. No redefinir colores en cada
   componente: usar siempre las variables de aquí.
   ============================================================================ */

:root {
  /* --- Color · neutrales --------------------------------------------------- */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #FAFAF9;
  --color-neutral-100: #F4F5F6;
  --color-neutral-200: #E7E9EC;
  --color-neutral-300: #D5D9DE;
  --color-neutral-400: #AEB4BD;
  --color-neutral-500: #828A95;
  --color-neutral-600: #5B626E;
  --color-neutral-700: #3D434D;
  --color-neutral-800: #262A31;
  --color-neutral-900: #16181D;

  /* --- Color · marca (azul marino pizarra del logo) ----------------------- */
  --color-brand-50:  #EAF2F7;
  --color-brand-100: #C9DEEB;
  --color-brand-200: #9CC1D8;
  --color-brand-300: #5E97B8;
  --color-brand-400: #2E6E93;
  --color-brand-500: #1E5273;
  --color-brand-600: #18445F;
  --color-brand-700: #143850;
  --color-brand-800: #102C3E;
  --color-brand-900: #0B1E2B;

  /* --- Color · azur (hero del logo) --------------------------------------- */
  --color-azure-50:  #E4F4FC;
  --color-azure-100: #BFE6F8;
  --color-azure-200: #8FD3F1;
  --color-azure-300: #4FB9E8;
  --color-azure-400: #20A6E0;
  --color-azure-500: #0E9BDB;
  --color-azure-600: #0B7FB4;
  --color-azure-700: #0A6691;

  /* --- Color · semántico -------------------------------------------------- */
  --color-success-bg: #E5F3EE;  --color-success-fg: #0A6149;  --color-success-border: #9FD3C0;
  --color-warning-bg: #FBF1DD;  --color-warning-fg: #8A5A12;  --color-warning-border: #ECCF92;
  --color-danger-bg:  #FBEAEA;  --color-danger-fg:  #992727;  --color-danger-border:  #E7AFAF;
  --color-info-bg:    #EDF1F8;  --color-info-fg:    #1F3E73;  --color-info-border:    #B4C8E6;

  /* --- Aliases semánticos ------------------------------------------------- */
  --bg-canvas:      var(--color-neutral-50);
  --bg-surface:     var(--color-neutral-0);
  --bg-subtle:      var(--color-neutral-100);
  --border-default: var(--color-neutral-200);
  --border-strong:  var(--color-neutral-300);
  --text-primary:   var(--color-neutral-900);
  --text-secondary: var(--color-neutral-600);
  --text-tertiary:  var(--color-neutral-500);
  --text-on-brand:  #FFFFFF;
  --link:           var(--color-brand-600);
  --accent:         var(--color-azure-500);

  /* --- Tipografía --------------------------------------------------------- */
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.875rem;
  --text-md:   1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --num-tabular: "tnum" 1, "lnum" 1;

  /* --- Espaciado (base 4px) ---------------------------------------------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

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

  /* --- Elevación ---------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(22, 24, 29, 0.04);
  --shadow-sm: 0 1px 3px rgba(22, 24, 29, 0.06), 0 1px 2px rgba(22, 24, 29, 0.04);
  --shadow-md: 0 4px 12px rgba(22, 24, 29, 0.08);
  --focus-ring: 0 0 0 3px var(--color-brand-100);

  /* --- Layout ------------------------------------------------------------- */
  --container-max: 1200px;
  --content-max:   720px;
  --control-height: 38px;
}