/* ==========================================================================
   VARIABLES GLOBALES — Club Tiburones
   Única fuente de verdad para colores, tipografía, espaciados y efectos.
   No hardcodear valores en otros archivos: siempre usar var(--...).
   Paleta oficial del club (.docs/Copia de Paleta de colores.png):
   navy #0d043b · azul #22557a · slate #2b3d55 · rojo #f32c43 · hover #2993e0
   ========================================================================== */

:root {
  /* ---- Paleta de marca (oficial, no modificar sin aprobación del club) ---- */
  --color-navy: #0d043b;      /* fondo hero/navbar/footer */
  --color-blue: #22557a;      /* azul principal, links, botones */
  --color-slate: #2b3d55;     /* azul grisáceo, base de botones */
  --color-red: #f32c43;       /* rojo de marca, acentos y CTA */
  --color-sky: #2993e0;       /* azul claro, hover de botones */

  /* Versión "r, g, b" del azul y el rojo de marca, para armar rgba() (bordes/divisores/glow) */
  --color-blue-rgb: 34, 85, 122;
  --color-red-rgb: 243, 44, 67;

  --color-white: #ffffff;
  --color-black: #001219;

  --color-gray-900: #1b263b;      /* texto principal */
  --color-gray-600: #52606d;      /* texto secundario */
  --color-gray-300: #d9e2ec;      /* bordes, separadores */

  --color-success: #2dd881;
  --color-warning: #ffb703;

  /* Alias semánticos: usar estos en el resto del CSS */
  --color-bg: var(--color-white);
  --color-bg-alt: #f0f5f9;        /* superficies claras, derivadas del azul de marca */
  --color-surface: var(--color-white);
  --color-text: var(--color-gray-900);
  --color-text-muted: var(--color-gray-600);
  --color-border: var(--color-gray-300);

  --color-brand: var(--color-blue);
  --color-brand-dark: var(--color-slate);
  --color-brand-darker: var(--color-navy);
  --color-brand-accent: var(--color-red);
  --color-action: #d91c35;
  --color-accent-text: #c91b32;
  --color-deep: #080225;
  --color-soft-blue: #b9dced;
  --color-dark-line: rgba(255, 255, 255, 0.16);
  --color-veil: rgba(13, 4, 59, 0.88);
  --color-soft-shadow: rgba(13, 4, 59, 0.1);
  --color-panel: #191244;
  --color-panel-hover: #251d55;
  --color-panel-line: rgba(255, 255, 255, 0.22);
  --color-countdown: #146141;
  --color-countdown-bg: #e4f4ed;
  --color-soon: #805500;
  --color-soon-bg: #fff1cf;

  /* Medalleros: colores semánticos para los reconocimientos deportivos. */
  --medal-gold-text: #805400;
  --medal-gold-bg: #fff2cf;
  --medal-silver-text: #405266;
  --medal-silver-bg: #edf2f7;
  --medal-bronze-text: #80431f;
  --medal-bronze-bg: #f8e8dc;

  /* Texto sobre fondos oscuros (navy): navbar, footer, hero */
  --color-on-dark: rgba(255, 255, 255, 0.92);
  --color-on-dark-muted: rgba(255, 255, 255, 0.68);

  /* Degradé de botones, tal cual lo define la guía de marca del club */
  --gradient-btn: linear-gradient(135deg, var(--color-slate) 0%, var(--color-blue) 50%, var(--color-slate) 100%);
  --gradient-btn-hover: linear-gradient(135deg, var(--color-blue) 0%, var(--color-sky) 50%, var(--color-blue) 100%);

  /* Degradé "agua" reutilizable para hero / secciones oscuras */
  --gradient-ocean: linear-gradient(160deg, var(--color-navy) 0%, var(--color-slate) 55%, var(--color-blue) 100%);

  /* ---- Tipografía ---- */
  --font-heading: "Poppins", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;

  --fs-xs: 0.875rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.15rem;
  --fs-lg: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  --fs-xl: clamp(2rem, 1.4rem + 2.2vw, 3.2rem);
  --fs-2xl: clamp(3.25rem, 5.1vw, 4.8rem);

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

  --lh-tight: 1.15;
  --lh-normal: 1.55;

  /* ---- Espaciado (escala consistente) ---- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3.5rem;
  --space-2xl: 6rem;

  --container-width: 1360px;
  --container-padding: clamp(1.25rem, 4vw, 3rem);

  /* ---- Bordes, sombras, transiciones ---- */
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-full: 999px;

  --shadow-sm: 0 4px 18px rgba(13, 4, 59, 0.05);
  --shadow-md: 0 14px 38px rgba(13, 4, 59, 0.09);
  --shadow-lg: 0 24px 60px rgba(13, 4, 59, 0.14);

  --transition-fast: 0.2s ease;
  --transition-base: 0.35s ease;

  --navbar-height: 88px;
}