/** ----------------------------- */
/** @font-face Declarations */
/** ----------------------------- */
@font-face {
  font-family: 'RUSH FLOW';
  src: url('../fonts/rushflow.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/** ----------------------------------------------- */
/** Variables Globales (Identidad Khroma) */
/** ----------------------------------------------- */
:root {
  /* ============================== */
  /* Paleta corporativa (logo 2026) */
  /* ============================== */
  --brand-black: #000000;
  --brand-graphite: #1a1a1a;
  --brand-charcoal: #333333;
  --brand-pink: #fd1572;
  --brand-blue: #019ffb;

  /* Derivados para interacciones */
  --brand-pink-hover: #e51267;
  --brand-blue-hover: #018fe2;

  /* ==================================== */
  /* Variables semánticas para componentes */
  /* ==================================== */
  --color-black: var(--brand-black);
  --color-dark: var(--brand-graphite);
  --color-charcoal: var(--brand-charcoal);
  --color-white: #ffffff;
  --color-light-gray: #0f0f14;
  --color-placeholder: #15151d;
  --color-border-gray: #2b2b35;
  --color-text-muted: #b3b3c2;
  --color-footer-text: #d6d6e5;

  /* Superficies para modo oscuro */
  --color-surface: #101018;
  --color-surface-alt: #171721;

  /* Colores de Estado */
  --color-error: #ed3c0d;
  --color-success: #18d26e;
  --color-focus-bg: #fff6fb;

  /* ===================================== */
  /* Compatibilidad con estilos existentes */
  /* ===================================== */
  --khroma-color: var(--brand-pink);
  --khroma-rgb: 253, 21, 114;
  --khroma-color-hover: var(--brand-pink-hover);
  --khroma-hover-rgb: 229, 18, 103;
  --khroma-secondary: var(--brand-blue);
  --khroma-secondary-rgb: 1, 159, 251;
  --khroma-secondary-hover: var(--brand-blue-hover);
  --khroma-secondary-hover-rgb: 1, 143, 226;
  --khroma-accent: var(--brand-graphite);
  --khroma-accent-rgb: 26, 26, 26;

  /* Alias de paleta (si se usan en futuras secciones) */
  --color-cyan: var(--brand-blue);
  --color-magenta: var(--brand-pink);
  --color-yellow: var(--brand-pink);
  --color-key: var(--brand-black);

  /* Tipografía */
  --font-body: 'Inter', sans-serif;
  --font-special-elite: 'Special Elite', monospace; /* Máquina de escribir para títulos */
  --font-handwritten: 'Permanent Marker', monospace; /* Mano alzada para acentos */
  --font-logo: 'RUSH FLOW', monospace; /* Fuente del logo Khroma */

  /* Tamaños */
  --font-size-hero: 4.5rem;
}