/* =========================================
   VARIABLES CSS — Portafolio Juanita González
   ========================================= */

:root {
  /* ── Colores principales ── */
  --color-bg:      #FFFFFF;
  --color-text:    #111111;
  --color-accent:  #B85C38;

  /* ── Colores secundarios ── */
  --color-muted:   #888888;
  --color-subtle:  #F5F5F5;
  --color-border:  #E0E0E0;

  /* ── UI / Overlays ── */
  --color-overlay-dark:  rgba(0, 0, 0, 0.92);
  --color-overlay-light: rgba(255, 255, 255, 0.15);
  --color-header-bg:     rgba(255, 255, 255, 0.95);
  --color-caption-light: #CCCCCC;

  /* ── Tipografía ── */
  --font-primary: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-bold:    700;

  /* Tamaños tipográficos — Desktop */
  --font-display:  6rem;       /* 96px */
  --font-h1:       3.5rem;     /* 56px */
  --font-h2:       2rem;       /* 32px */
  --font-h3:       1.125rem;   /* 18px */
  --font-body:     1.125rem;   /* 18px */
  --font-caption:  0.8125rem;  /* 13px */
  --font-nav:      0.8125rem;  /* 13px */
  --font-label:    0.6875rem;  /* 11px */

  /* ── Espaciado ── */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   32px;
  --space-lg:   64px;
  --space-xl:   96px;
  --space-2xl:  128px;
  --space-3xl:  192px;

  /* ── Layout ── */
  --max-width:        1440px;
  --gutter-mobile:    24px;
  --gutter-tablet:    48px;
  --gutter-desktop:   80px;
  --gutter-wide:      120px;

  --header-height-desktop: 64px;
  --header-height-mobile:  56px;

  /* ── Transiciones ── */
  --transition-fast:   0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow:   0.4s ease;
  --transition-spring: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── Z-index ── */
  --z-header:   100;
  --z-menu:     200;
  --z-lightbox: 300;
  --z-cursor:   400;
}