/**
 * SAMFyR Theme — variables.css
 * Design tokens: colores, tipografía, espaciado, sombras, transiciones.
 */

:root {

  /* ─────────────────────────────────────
     COLORES — Paleta institucional SAMFyR
     ───────────────────────────────────── */
  --color-primary:        #005da4;   /* Azul institucional SAMFyR (manual 2026) */
  --color-primary-dark:   #004a84;   /* Hover / activo */
  --color-primary-light:  #e6f0fa;   /* Fondos suaves */

  --color-secondary:      #009edb;   /* Celeste SAMFyR (manual 2026) */
  --color-secondary-dark: #007db0;
  --color-secondary-light:#e0f4fc;

  --color-accent:         #E8541A;   /* Naranja — CTA, badges destacados */
  --color-accent-dark:    #C4430E;
  --color-accent-light:   #FEF0EB;

  --color-success:        #28A745;
  --color-warning:        #FFC107;
  --color-danger:         #DC3545;
  --color-info:           #17A2B8;

  /* Escala de grises */
  --color-dark:           #313030;   /* Gris oscuro SAMFyR (manual 2026) */
  --color-gray-900:       #2D3748;
  --color-gray-700:       #4A5568;
  --color-gray-500:       #9fa4a6;   /* Gris claro SAMFyR (manual 2026) */
  --color-gray-300:       #CBD5E0;
  --color-gray-100:       #F7FAFC;
  --color-light:          #f1f1f1;   /* Gris tiza SAMFyR (manual 2026) */
  --color-white:          #FFFFFF;

  /* Membership states */
  --color-member-active:    #28A745;
  --color-member-pending:   #FFC107;
  --color-member-expired:   #DC3545;
  --color-member-suspended: #6C757D;

  /* ─────────────────────────────────────
     TIPOGRAFÍA
     ───────────────────────────────────── */
  --font-sans:          'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading:       'Archivo Narrow', 'Arial Narrow', Arial, sans-serif;
  --font-body:          var(--font-sans);
  --font-mono:          'JetBrains Mono', 'Fira Code', monospace;

  --font-size-xs:       0.75rem;    /*  12px */
  --font-size-sm:       0.875rem;   /*  14px */
  --font-size-base:     1rem;       /*  16px */
  --font-size-md:       1.125rem;   /*  18px */
  --font-size-lg:       1.25rem;    /*  20px */
  --font-size-xl:       1.5rem;     /*  24px */
  --font-size-2xl:      1.875rem;   /*  30px */
  --font-size-3xl:      2.25rem;    /*  36px */
  --font-size-4xl:      3rem;       /*  48px */
  --font-size-5xl:      3.75rem;    /*  60px */

  --font-weight-light:    300;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:   1.25;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.75;

  /* ─────────────────────────────────────
     ESPACIADO
     ───────────────────────────────────── */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ─────────────────────────────────────
     LAYOUT
     ───────────────────────────────────── */
  --container-max:    1200px;
  --container-wide:   1400px;
  --container-narrow:  800px;
  --container-px:      var(--space-6);   /* padding horizontal del container */

  --header-height:     105px;
  --header-height-mob: 64px;

  /* ─────────────────────────────────────
     BORDES Y RADIOS
     ───────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  --border-width:  1px;
  --border-color:  var(--color-gray-300);
  --border:        var(--border-width) solid var(--border-color);

  /* ─────────────────────────────────────
     SOMBRAS
     ───────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -1px rgba(0,0,0,.04);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);

  /* ─────────────────────────────────────
     TRANSICIONES
     ───────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* ─────────────────────────────────────
     Z-INDEX
     ───────────────────────────────────── */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-header:    300;
  --z-modal:     400;
  --z-toast:     500;
}