/* ============================================================================
   variables.css — Tokens de diseño e identidad corporativa
   ----------------------------------------------------------------------------
   Paleta obligatoria de A y F FICA Asociados S.A.C. centralizada en :root
   para garantizar consistencia visual en todo el portal.
   ========================================================================== */

:root {
  /* ---- Colores primarios (marrones corporativos) ---- */
  --color-primary: #3e2723;
  --color-primary-dark: #2b1b18;
  --color-primary-light: #4e342e;

  /* ---- Fondos y acentos suaves (crema / marfil) ---- */
  --color-cream: #faf8f5;
  --color-cream-dark: #f5efeb;

  /* ---- Detalles y destacados (dorado elegante) ---- */
  --color-gold: #c5a059;
  --color-gold-bright: #d4af37;
  --color-gold-soft: rgba(197, 160, 89, 0.14);

  /* ---- Textos y contrastes ---- */
  --color-text: #1a1a1a;
  --color-text-secondary: #212121;
  --color-text-muted: #7a726a;

  /* ---- Superficies y bordes ---- */
  --color-surface: #ffffff;
  --color-border: #e7e0d8;
  --color-border-strong: #d8cfc4;

  /* ---- Estados funcionales ---- */
  --color-success: #2f7d4f;
  --color-success-soft: #e7f3ec;
  --color-danger: #b3352e;
  --color-danger-soft: #fbe9e8;
  --color-info: #3b6e9e;
  --color-info-soft: #e8f0f8;
  --color-warning: #a07a1f;
  --color-warning-soft: #faf3e2;

  /* ---- Tipografía ---- */
  --font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-md: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.375rem;  /* 22px */
  --font-size-2xl: 1.75rem;  /* 28px */

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

  /* ---- Radios ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Sombras ---- */
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.06);
  --shadow-md: 0 4px 14px rgba(26, 26, 26, 0.08);
  --shadow-lg: 0 12px 32px rgba(26, 26, 26, 0.14);

  /* ---- Dimensiones del layout ---- */
  --sidebar-width: 268px;
  --sidebar-width-collapsed: 84px;
  --header-height: 68px;

  /* ---- Transiciones ---- */
  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}