/* ============================================================
   INSTITUTO SANTA ROSA CENTRAL - Design Tokens
   ============================================================ */

:root {
  /* === COLORES PRIMARIOS === */
  --color-primary:         #C8102E;
  --color-primary-dark:    #A00C24;
  --color-primary-light:   #E8152E;
  --color-secondary:       #1A1A2E;
  --color-secondary-dark:  #12121F;
  --color-secondary-light: #2A2A4E;
  --color-accent:          #F5A623;
  --color-accent-dark:     #D4901E;

  /* === COLORES NEUTROS === */
  --color-white:           #FFFFFF;
  --color-black:           #000000;
  --color-gray-100:        #F8F9FA;
  --color-gray-200:        #F0F0F0;
  --color-gray-300:        #E0E0E0;
  --color-gray-400:        #BDBDBD;
  --color-gray-500:        #9E9E9E;
  --color-gray-600:        #757575;
  --color-gray-700:        #555555;
  --color-gray-800:        #333333;
  --color-gray-900:        #1A1A1A;

  /* === COLORES DE FONDO === */
  --bg-preheader:          #1A1A2E;
  --bg-header:             #FFFFFF;
  --bg-light:              #F8F9FA;
  --bg-medium:             #F0F0F0;
  --bg-dark:               #1A1A2E;
  --bg-red:                #C8102E;

  /* === TIPOGRAFÍA === */
  --font-primary:          'Montserrat', 'Open Sans', Arial, sans-serif;
  --font-secondary:        'Open Sans', Arial, sans-serif;
  --font-size-xs:          0.75rem;    /* 12px */
  --font-size-sm:          0.875rem;   /* 14px */
  --font-size-base:        1rem;       /* 16px */
  --font-size-lg:          1.125rem;   /* 18px */
  --font-size-xl:          1.25rem;    /* 20px */
  --font-size-2xl:         1.5rem;     /* 24px */
  --font-size-3xl:         1.875rem;   /* 30px */
  --font-size-4xl:         2.25rem;    /* 36px */
  --font-size-5xl:         3rem;       /* 48px */
  --font-weight-light:     300;
  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;
  --line-height-tight:     1.2;
  --line-height-snug:      1.4;
  --line-height-normal:    1.6;
  --line-height-relaxed:   1.8;

  /* === ESPACIADOS === */
  --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-14:   3.5rem;    /* 56px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */

  /* === LAYOUT === */
  --container-max:     1200px;
  --container-wide:    1400px;
  --container-narrow:  900px;
  --header-height:     80px;
  --preheader-height:  38px;

  /* === BORDES === */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    20px;
  --radius-full:  9999px;
  --border-color: #E0E0E0;

  /* === SOMBRAS === */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-lg:    0 10px 30px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
  --shadow-xl:    0 20px 50px rgba(0,0,0,0.15), 0 8px 20px rgba(0,0,0,0.10);
  --shadow-red:   0 6px 20px rgba(200,16,46,0.35);
  --shadow-card:  0 4px 20px rgba(0,0,0,0.08);

  /* === TRANSICIONES === */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-bounce: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === Z-INDEX === */
  --z-preheader:  100;
  --z-header:     200;
  --z-dropdown:   300;
  --z-popup:      900;
  --z-overlay:    800;
  --z-floating:   700;
}