/* ============================================================
   TOKENS — Variables del sistema de diseño
   Club Campestre Certse FAP Chosica
   ============================================================ */

:root {
  /* ---------- Colores ---------- */
  --color-primary:       #2F5249;
  --color-primary-dark:  #234038;
  --color-primary-light: #437060;

  --color-white:         #FFFFFF;
  --color-cream:         #F5F0E8;

  --color-text:          #1A1A1A;
  --color-text-muted:    #6B6B6B;
  --color-text-light:    rgba(255, 255, 255, 0.9);

  --color-whatsapp:      #25D366;
  --color-whatsapp-dark: #1FAF54;

  /* Acento cálido (ocre tierra) — usado con discreción */
  --color-accent:        #B8935A;
  --color-accent-dark:   #9B7A45;

  --color-border:        rgba(0, 0, 0, 0.08);
  --color-overlay:       rgba(47, 82, 73, 0.6);
  --color-overlay-dark:  rgba(35, 64, 56, 0.9);

  /* ---------- Tipografía ---------- */
  --font-display: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Tamaños — mobile-first (base) */
  --fs-h1:    42px;
  --fs-h2:    32px;
  --fs-h3:    22px;
  --fs-body:  16px;
  --fs-small: 14px;
  --fs-eyebrow: 13px;

  /* Pesos */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Line-heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.4;
  --lh-relaxed: 1.7;

  /* Letter-spacing */
  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.1em;
  --ls-wider:  0.14em;

  /* Ancho máximo de párrafos legibles */
  --measure: 65ch;

  /* ---------- Espaciado (sistema de 8px) ---------- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  /* Padding vertical de secciones */
  --section-py: var(--space-6);

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-px:  20px;

  /* ---------- Border radius ---------- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ---------- Sombras ---------- */
  --shadow-card:     0 4px 24px rgba(0, 0, 0, 0.06);
  --shadow-elevated: 0 12px 48px rgba(0, 0, 0, 0.12);
  --shadow-nav:      0 2px 16px rgba(0, 0, 0, 0.06);

  /* ---------- Transiciones ---------- */
  /* Curva suave (similar a Apple) para sensación calmada */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 200ms var(--ease-soft);
  --transition:      320ms var(--ease-soft);
  --transition-slow: 520ms var(--ease-soft);

  /* ---------- Z-index ---------- */
  --z-base:    1;
  --z-overlay: 10;
  --z-nav:     100;
  --z-modal:   1000;

  /* ---------- Alto fijos ---------- */
  --nav-height: 72px;
}

/* ---------- Tablet / Desktop (≥768px) ---------- */
@media (min-width: 768px) {
  :root {
    --fs-h1:   68px;
    --fs-h2:   40px;
    --fs-h3:   26px;
    --fs-body: 17px;
    --container-px: 32px;
    --section-py:   var(--space-7);
    --nav-height:   80px;
  }
}

/* ---------- Desktop grande (≥1024px) ---------- */
@media (min-width: 1024px) {
  :root {
    --fs-h1:   82px;
    --fs-h2:   44px;
    --fs-h3:   28px;
    --section-py: var(--space-8);
  }
}