/**
 * Design tokens del sitio CADU.
 * Este archivo concentra TODO lo que se suele querer ajustar durante una
 * revisión visual en navegador: colores, tipografía, espaciados, radios y
 * sombras. Cambiá un valor acá y se propaga a todo el sitio.
 */

:root {
  /* ---------- Colores de marca (bandera del club) ---------- */
  --cadu-orange: #FF6702;      /* el amanecer */
  --cadu-orange-dark: #D95500;
  --cadu-yellow: #FBC803;      /* la arena de Santa Teresita */
  --cadu-black: #000000;       /* memoria de Rosendo Juárez */

  /* ---------- Neutros premium (fondo cálido, no un negro plano) ---------- */
  --cadu-ink: #15130F;
  --cadu-ink-soft: #221E17;
  --cadu-charcoal: #2C2620;
  --cadu-cream: #FFF8EC;
  --cadu-white: #FFFFFF;
  --cadu-gray-600: #6B6459;
  --cadu-gray-300: #D8D2C4;

  /* ---------- Roles semánticos (edítalos acá, no en cada sección) ---------- */
  --color-bg: var(--cadu-cream);
  --color-bg-dark: var(--cadu-ink);
  --color-text: #201C15;
  --color-text-soft: var(--cadu-gray-600);
  --color-text-inverse: var(--cadu-white);
  --color-accent: var(--cadu-orange);
  --color-accent-2: var(--cadu-yellow);

  /* ---------- Tipografía ----------
     Sin CDN todavía: usamos una pila de fuentes de sistema de alta calidad.
     Para un look 100% a medida, sumá un archivo .woff2 propio en
     assets/vendor/fonts/ y agregá un @font-face acá arriba. */
  --font-display: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-hero: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* ---------- Espaciados (escala de 4px) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Padding vertical estándar de cada sección: tocá esta única variable
     para cambiar el "ritmo" de espaciado de toda la landing. */
  --section-padding-y: clamp(3.5rem, 2.6rem + 3.5vw, 7rem);

  /* ---------- Radios y sombras ---------- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(21, 19, 15, 0.08);
  --shadow-md: 0 12px 32px rgba(21, 19, 15, 0.12);
  --shadow-lg: 0 24px 60px rgba(21, 19, 15, 0.18);
  --shadow-glow-orange: 0 16px 40px rgba(255, 103, 2, 0.35);

  /* ---------- Transiciones ---------- */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 0.2s var(--ease-standard);
  --transition-base: 0.35s var(--ease-standard);
  --transition-slow: 0.6s var(--ease-standard);

  /* ---------- Overrides de variables de Bootstrap 5.3 ----------
     Bootstrap 5.3 expone sus colores como variables CSS (--bs-*), así que
     alcanza con pisarlas acá para que botones, links, etc. tomen la marca
     sin tener que recompilar Sass. */
  --bs-primary: var(--cadu-orange);
  --bs-primary-rgb: 255, 103, 2;
  --bs-secondary: var(--cadu-ink);
  --bs-secondary-rgb: 21, 19, 15;
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-bg);
  --bs-link-color: var(--cadu-orange-dark);
  --bs-link-hover-color: var(--cadu-orange);
}