/*
 * Tokens de marca Marine Farm (fuente: storybook web2025, Interfaz/marinefarm-web2025-storybook.md §2).
 * Derivado, no es el archivo crudo del cliente.
 * Marca: colores y tipografía de Marine Farm. Estructura y componentes: kit-demo-front.
 * Paleta del semáforo (verde/amarillo/naranja/rojo): de kit-demo-front.
 */

/* Fuentes reales de la marca, auto-hospedadas (descargadas del sitio del cliente
 * para la demo; en produccion se usan sus archivos licenciados). */
@font-face {
  font-family: "Walsheim";
  src: url("../../marca/gt-walsheim-pro-regular-webfont.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Simplon Norm";
  src: url("../../marca/simplonnorm-regular-webfont.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Simplon Mono";
  src: url("../../marca/simplonmono-regular-webfont.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Colores de marca */
  --mf-primary: #f24822;
  --mf-secondary: #0a2d37;
  --mf-font-color: #0a2d37;
  --mf-headings-color: #f24822;
  --mf-primary-light: color-mix(in srgb, var(--mf-primary) 50%, #fff);
  --mf-primary-lighter: color-mix(in srgb, var(--mf-primary) 8%, #fff);
  --mf-primary-dark: color-mix(in srgb, var(--mf-primary) 85%, #000);
  --mf-secondary-light: color-mix(in srgb, var(--mf-secondary) 50%, #fff);
  --mf-secondary-lighter: color-mix(in srgb, var(--mf-secondary) 15%, #fff);
  --mf-secondary-dark: color-mix(in srgb, var(--mf-secondary) 85%, #000);
  --mf-sticky-header: rgba(255, 255, 255, 1);
  --mf-link-active: #ff7a00;

  /* Tipografía */
  --mf-font-body: "Walsheim", "GT Walsheim Pro", system-ui, sans-serif;
  --mf-font-nav: "Simplon Norm", system-ui, sans-serif;
  --mf-font-mono: "Simplon Mono", ui-monospace, monospace;
  --mf-body-letter-spacing: 1px;
  --mf-heading-letter-spacing: 4px;
  --mf-line-height: 140%;

  /* Escala tipográfica */
  --mf-h1-size: 33px;
  --mf-h2-size: 32px;
  --mf-h3-size: 29px;
  --mf-h4-size: 25px;
  --mf-h5-size: 24px;
  --mf-h6-size: 20px;
  --mf-section-title-size: 45px;
  --mf-hero-title-size: 55px;

  /* Layout */
  --mf-container-width: 1200px;
  --mf-static-header-logo-height: 90px;
  --mf-menu-breakpoint: 896px;
  --mf-header-height: 64px;

  /* Semáforo de criticidad (kit-demo-front) */
  --mf-verde: #2e7d32;
  --mf-amarillo: #f9a825;
  --mf-naranja: #ef6c00;
  --mf-rojo: #c62828;
  --mf-sin-score: #9e9e9e;

  /* Superficies y UI */
  --mf-bg: #f3f4f6;
  --mf-card: #ffffff;
  --mf-border: #e5e7eb;
  --mf-texto: #0a2d37;
  --mf-texto-suave: #5b6b73;
  --mf-radius: 8px;
  --mf-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* Base */
body {
  font-family: var(--mf-font-body);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: var(--mf-body-letter-spacing);
  line-height: var(--mf-line-height);
  color: var(--mf-font-color);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  letter-spacing: var(--mf-heading-letter-spacing);
  color: var(--mf-headings-color);
}

.mf-container {
  max-width: var(--mf-container-width);
  width: 98%;
  margin: 0 auto;
}

/* Botón base (pill), del child theme de Marine Farm */
.mf-btn {
  padding: 0.2em 1em;
  line-height: 32px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 30px;
  min-width: 200px;
  border: 1px solid var(--mf-primary);
  color: var(--mf-primary);
  background: transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.mf-btn:hover {
  background: var(--mf-primary);
  border-color: var(--mf-primary);
  color: #fff;
}

.mf-btn[disabled] {
  background: #dfdfdf;
  border-color: #dfdfdf;
  color: #666;
}

/* Breakpoints de referencia (mobile <=600 / tablet 601-1024 / desktop >=1025) */
@media (max-width: 600px) {
  :root {
    --mf-section-title-size: 32px;
    --mf-hero-title-size: 36px;
  }
}