/**
 * Design tokens ESAC
 * Paleta oficial: docs/esac_colors.pdf
 * Referencia: docs/paleta-colores.md
 */

@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/bebas_neue/BebasNeue-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../fonts/lato/Lato-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../fonts/lato/Lato-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Retro Signature";
  src: url("../fonts/retro_signature/RetroSignature.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colores de marca (PDF esac_colors.pdf) */
  --esac-color-1: #980a08; /* Rojo ESAC */
  --esac-color-2: #010202; /* Negro profundo */
  --esac-color-3: #4d4f53; /* Gris medio */
  --esac-color-4: #726c69; /* Gris cálido */
  --esac-color-5: #030202; /* Negro carbón */
  --esac-color-6: #a67504; /* Dorado ESAC */
  --esac-color-7: #ab9e8e; /* Beige */
  --esac-color-8: #0c0b0b; /* Gris oscuro */
  --esac-color-9: #d4d2d2; /* Gris claro */
  --esac-color-10: #2c2a26; /* Carbón */

  /* Tokens semánticos */
  --esac-color-primary: var(--esac-color-1);
  --esac-color-accent: var(--esac-color-6);
  --esac-color-bg: var(--esac-color-2);
  --esac-color-bg-alt: var(--esac-color-8);
  --esac-color-surface: var(--esac-color-10);
  --esac-color-text: var(--esac-color-9);
  --esac-color-text-muted: var(--esac-color-4);
  --esac-color-border: var(--esac-color-3);
  --esac-color-text-light: var(--esac-color-7);

  /* CTA primario (relleno vertical + filete centro→lados) */
  --esac-btn-primary-fill: linear-gradient(
    180deg,
    #e81a16 0%,
    #c80e0c 48%,
    var(--esac-color-primary) 78%,
    #6a0605 100%
  );
  --esac-btn-primary-rim: linear-gradient(
    90deg,
    #2a0605 0%,
    #5a1210 14%,
    #b88888 36%,
    #f4f0f0 50%,
    #b88888 64%,
    #5a1210 86%,
    #2a0605 100%
  );
  --esac-btn-primary-shadow: inset 0 1px 0 rgba(255, 230, 230, 0.42),
    inset 0 8px 10px rgba(255, 120, 120, 0.1),
    inset 0 -3px 5px rgba(40, 0, 0, 0.38),
    0 4px 12px rgba(152, 10, 8, 0.42),
    0 2px 6px rgba(0, 0, 0, 0.45);
  --esac-btn-primary-shadow-hover: inset 0 1px 0 rgba(255, 230, 230, 0.62),
    inset 0 8px 10px rgba(255, 140, 140, 0.16),
    inset 0 -3px 5px rgba(40, 0, 0, 0.35),
    0 5px 14px rgba(152, 10, 8, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.45);

  /* CTA oscuro (mismo filete centro→lados, relleno negro) */
  --esac-btn-dark-fill: linear-gradient(
    180deg,
    #3a3a3a 0%,
    #1c1c1c 48%,
    #0e0e0e 78%,
    #050505 100%
  );
  --esac-btn-dark-rim: linear-gradient(
    90deg,
    #1a1a1a 0%,
    #3a3a3a 14%,
    #b0b0b0 36%,
    #f4f0f0 50%,
    #b0b0b0 64%,
    #3a3a3a 86%,
    #1a1a1a 100%
  );
  --esac-btn-dark-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 8px 10px rgba(255, 255, 255, 0.06),
    inset 0 -3px 5px rgba(0, 0, 0, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.4);
  --esac-btn-dark-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 8px 10px rgba(255, 255, 255, 0.08),
    inset 0 -3px 5px rgba(0, 0, 0, 0.45),
    0 5px 14px rgba(0, 0, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.4);

  /* Tipografía */
  --esac-font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --esac-font-family-nav: "Bebas Neue", var(--esac-font-family-base);
  --esac-font-family-lead: "Lato", Arial, "Helvetica Neue", Helvetica, sans-serif;
  --esac-font-family-signature: "Retro Signature", cursive;

  /* Espaciado entre secciones */
  --esac-section-padding-y: clamp(1.25rem, 2.5vw, 2rem);

  /* Hero */
  --esac-hero-min-height: 100vh;
  --esac-hero-min-height-safe: 100dvh;
  --esac-hero-logo-copy-gap: clamp(0.75rem, 2vh, 1.75rem);
  --esac-hero-figure-gap: clamp(0.75rem, 2vh, 1.75rem);

  /* Scrollbar */
  --esac-scrollbar-size: 0.65rem;
  --esac-scrollbar-track: #0a0909;
  --esac-scrollbar-thumb: #7a0807;
  --esac-scrollbar-thumb-hover: #b00b09;
  --esac-scrollbar-border: rgba(212, 210, 210, 0.18);
}