/*
 * Telemax design tokens
 * Fuente: design/DESIGN.md (derivado de Brandbook-Naranja.ai)
 * Solo variables. Los componentes viven en styles.css.
 */

/* Montserrat auto-hospedada (en vez del <link> a Google Fonts del prototipo) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/montserrat-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/montserrat-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/montserrat-600.woff2') format('woff2');
}

:root {
  /* === COLOR === */
  /* Brand (brandbook oficial) */
  --color-brand-orange: #FE5000;
  --color-brand-red: #E10600;
  --color-brand-peach: #FAD9CC;
  --color-black: #000000;
  --color-white: #FFFFFF;

  /* Neutral (utility) */
  --color-ink: #0F1923;
  --color-steel: #3A3F47;
  --color-mist: #F4F4F4;
  --color-border: #E5E7EB;
  --color-border-strong: #D1D5DB;

  /* Iteración 2 (reunión 10-jun-2026): grafito para cerrar secciones sin
     saturar de naranja (look industrial tipo UTECH). Tono final a confirmar
     con cliente. */
  --color-graphite: #1C2530;
  --color-graphite-soft: #2A323D;
  /* Overlay de legibilidad para texto sobre vídeo/foto/naranja (accesibilidad
     AA por nueva legislación). */
  --overlay-ink-strong: rgba(15, 25, 35, 0.62);
  --overlay-ink-soft: rgba(15, 25, 35, 0.45);

  /* Estado */
  --color-success: #16A34A;
  --color-success-soft: #DCFCE7;
  --color-danger: #DC2626;
  /* Variantes oscuras para TEXTO sobre los fondos "soft": --color-success y
     --color-danger están pensados para bordes e iconos y sobre sus propios
     fondos soft se quedan en 3,00:1 y 3,95:1, por debajo del 4,5:1 de AA para
     texto pequeño. Estas dos dan 6,15:1 y 6,06:1. */
  --color-success-text: #12693C;
  --color-danger-text: #A81B1B;
  --color-danger-soft: #FEE2E2;
  --color-warning: #F59E0B;
  --color-warning-soft: #FEF3C7;
  --color-warning-soft-border: #FDE68A;

  /* === TIPOGRAFÍA === */
  --font-display: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
  --font-body: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* Escala (desktop) */
  --text-display: 64px;
  --text-h1: 56px;
  --text-h2: 40px;
  --text-h3: 28px;
  --text-h4: 22px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-small: 14px;
  --text-caption: 12px;

  /* === SPACING === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* === RADIOS === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* === SOMBRAS === */
  --shadow-sm: 0 1px 2px rgba(15, 25, 35, 0.06);
  --shadow-md: 0 1px 2px rgba(15, 25, 35, 0.06), 0 4px 12px rgba(15, 25, 35, 0.04);
  --shadow-lg: 0 4px 8px rgba(15, 25, 35, 0.08), 0 12px 24px rgba(15, 25, 35, 0.06);
  --shadow-focus: 0 0 0 3px rgba(254, 80, 0, 0.25);

  /* === CONTAINER === */
  --container-max: 1280px;
  --container-narrow: 880px;
  --container-padding-desktop: 80px;
  --container-padding-mobile: 16px;

  /* === ICONOS EN CSS === */
  /* Chevron de los <select> (.field__select y la ordenación de la PLP): el
     nativo del navegador se apoyaba en el borde y quedaba descentrado.
     No tiene gemelo en theme.json a propósito: es un background-image, no un
     preset que el editor tenga que ofrecer en ningún selector. */
  --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233A3F47' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Escala mobile (< 768) */
@media (max-width: 767.98px) {
  :root {
    --text-display: 40px;
    --text-h1: 32px;
    --text-h2: 26px;
    --text-h3: 22px;
    --text-h4: 18px;

    /* Mismo salto discreto aplicado a los presets nativos de theme.json,
       para que los bloques core que usan estos tamaños (h1/h2/h3/h4/display)
       también se ajusten en mobile. */
    --wp--preset--font-size--display: 40px;
    --wp--preset--font-size--h1: 32px;
    --wp--preset--font-size--h2: 26px;
    --wp--preset--font-size--h3: 22px;
    --wp--preset--font-size--h4: 18px;
  }

}