/**
 * TOKENS — Propal
 * Única fuente de verdad para color, tipografía, espaciado y radios.
 * Sección 4 de CLAUDE.md: bloque de marca editable por proyecto.
 * Colores extraídos del logo oficial (logo-propal-header.png).
 */

:root {
  /* === IDENTIDAD DE MARCA — PROPAL (colores oficiales del logo) === */
  --color-primary: #007330;        /* verde corporativo profundo */
  --color-secondary: #FDCF00;      /* amarillo/dorado de acento */
  --color-background: #FFFFFF;     /* fondo limpio */
  --color-text: #141A13;           /* tinta casi negra, carácter verde */

  /* Variaciones automáticas derivadas (no editar salvo necesidad puntual) */
  --color-primary-hover: color-mix(in srgb, var(--color-primary) 85%, black);
  --color-secondary-hover: color-mix(in srgb, var(--color-secondary) 85%, black);
  --color-text-muted: color-mix(in srgb, var(--color-text) 60%, transparent);
  --color-border: color-mix(in srgb, var(--color-text) 12%, transparent);
  --color-surface: color-mix(in srgb, var(--color-background) 92%, white);

  /* Tintes suaves — para secciones secundarias (ritmo claro, sin saturar) */
  --color-primary-soft: color-mix(in srgb, var(--color-primary) 10%, var(--color-background));
  --color-secondary-soft: color-mix(in srgb, var(--color-secondary) 18%, var(--color-background));

  /* Colores ilustrativos — usados únicamente en el gráfico "corte de palta" */
  --color-avocado-flesh: #C7D68F;  /* pulpa */
  --color-avocado-pit: #6B4A2F;    /* semilla */

  /* === VERDE OSCURO DE IMPACTO (reservado para Hero y cierres) === */
  --color-hero-bg-1: color-mix(in srgb, var(--color-primary) 55%, black);
  --color-hero-bg-2: color-mix(in srgb, var(--color-primary) 20%, black);
  --color-hero-text: #F7F5EC;
  --color-hero-text-muted: color-mix(in srgb, var(--color-hero-text) 68%, transparent);
  --color-hero-border: color-mix(in srgb, var(--color-hero-text) 16%, transparent);
  --glass-dark-bg: color-mix(in srgb, var(--color-hero-text) 10%, transparent);
  --glass-dark-border: color-mix(in srgb, var(--color-hero-text) 20%, transparent);
  --glass-dark-shadow: 0 20px 60px color-mix(in srgb, var(--color-hero-bg-2) 55%, transparent);

  /* === TIPOGRAFÍA === */
  --font-display: 'Fraunces', 'Iowan Old Style', serif;   /* titulares — carácter editorial/orgánico */
  --font-family: 'Montserrat', system-ui, sans-serif;     /* párrafos y subtítulos (h3/h4) */
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace; /* datos / manifiesto de carga */

  /* Escala tipográfica fluida (clamp) */
  --text-eyebrow: 0.8125rem;
  --text-body: clamp(1rem, 0.4vw + 0.9rem, 1.125rem);
  --text-stat: clamp(1.25rem, 1vw + 1rem, 1.75rem);
  --text-h3: clamp(1.5rem, 1.5vw + 1rem, 2rem);
  --text-h2: clamp(1.875rem, 1.2vw + 1.5rem, 3rem);
  --text-hero: clamp(2.5rem, 4vw + 1.5rem, 4.75rem);

  /* === ESCALA DE ESPACIADO (no editar) === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* === RADIOS (no editar salvo estilo de marca muy distinto) === */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* === CONTENEDOR ===
     Ancho amplio moderno (1440–1600px, CLAUDE.md 2.1) con padding lateral
     fluido vía clamp() en vez de un salto brusco en un breakpoint. */
  --container-max-width: 1520px;
  --container-padding: clamp(var(--space-4), 4vw, var(--space-7));

  /* Espaciado vertical de sección (homologado: mismo aire arriba y abajo) */
  --section-space: clamp(var(--space-7), 4vw + var(--space-5), var(--space-8));

  /* === GLASSMORPHISM === */
  --glass-bg: color-mix(in srgb, var(--color-background) 70%, transparent);
  --glass-border: color-mix(in srgb, var(--color-text) 10%, transparent);
  --glass-blur: 12px;
  --glass-shadow: 0 8px 30px rgba(10, 20, 12, 0.08);

  /* === MOVIMIENTO === */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.3s;
  --duration-base: 0.4s;
  --duration-slow: 0.6s;
}