/* Tokens del proyecto Kocsa. NO EDITAR A MANO.
   Generado desde: kocsa-design-hub/docs/assets/tokens.css
   Origen real:    kocsa-design-hub/design/tokens.json (MWM Design Kit)
   Port:           sed -E 's/--(font|color|espaciado|radios|sombras|layout|alto-ventana)-/--kcs-\1-/g'
   Fecha del port: 13/08/2026
   Si cambian los tokens: regenerar tokens.css aguas arriba y repetir el sed. */

/* tokens.css generado desde design/tokens.json. No editar a mano. */
/* Proyecto: Tema WordPress · Kocsa · Cliente: Kocsa (vía Narita estudio SL) */

:root {
  /* familias tipográficas */
  --kcs-font-display: "area-variable", 'Helvetica Neue', Arial, system-ui, sans-serif;
  --kcs-font-body: "area-variable", 'Helvetica Neue', Arial, system-ui, sans-serif;

  /* color */
  --kcs-color-brand-primary: #fe5000;
  --kcs-color-neutral-canvas: #ffffff;
  --kcs-color-neutral-ink: #020d14;
  --kcs-color-neutral-surface: #041c2c;
  --kcs-color-neutral-surface-velo: #041c2ccc;
  --kcs-color-neutral-velo-nav: #041c2ccc;
  --kcs-color-semantic-success: #1f8a5b;
  --kcs-color-semantic-warning: #b8791a;
  --kcs-color-semantic-danger: #b3382f;
  --kcs-color-semantic-info: #2f6f9e;

  /* tipografia */
  --kcs-font-escala-d100: 37px;
  --kcs-font-escala-h100: 26px;
  --kcs-font-escala-h200: 24px;
  --kcs-font-escala-h300: 20px;
  --kcs-font-escala-h400: 18px;
  --kcs-font-escala-b100: 16px;
  --kcs-font-escala-b200: 14px;
  --kcs-font-escala-l100: 14px;
  --kcs-font-escala-l200: 12px;
  --kcs-font-pesos-regular: 400;
  --kcs-font-pesos-semibold: 600;
  --kcs-font-pesos-bold: 700;
  --kcs-font-pesos-extrabold: 800;
  --kcs-font-interlineado-todo: 1.2;
  --kcs-font-ejes-variables-INKT: 0;
  --kcs-font-ejes-variables-slnt: 0;
  --kcs-font-ejes-variables-wdth: 100;

  /* espaciado */
  --kcs-espaciado-005: 4px;
  --kcs-espaciado-01: 8px;
  --kcs-espaciado-015: 10px;
  --kcs-espaciado-02: 12px;
  --kcs-espaciado-03: 20px;
  --kcs-espaciado-04: 20px;
  --kcs-espaciado-05: 32px;
  --kcs-espaciado-06: 32px;
  --kcs-espaciado-10: 32px;
  --kcs-espaciado-15: 64px;
  --kcs-espaciado-20: 120px;

  /* radios */
  --kcs-radios-sm: 4px;
  --kcs-radios-md: 8px;
  --kcs-radios-lg: 16px;

  /* sombras */
  --kcs-sombras-sm: 0 1px 2px rgba(4, 28, 44, 0.16);
  --kcs-sombras-md: 0 8px 24px rgba(4, 28, 44, 0.22);

  /* layout */
  --kcs-layout-ancho-100: 1920px;
  --kcs-layout-ancho-80: 1536px;
  --kcs-layout-ancho-70: 1344px;
  --kcs-layout-ancho-50: 960px;
  --kcs-layout-ancho-40: 768px;
  --kcs-layout-contenedor-max: 1536px;

  /* alto_ventana */
  --kcs-alto-ventana-30: 244px;
  --kcs-alto-ventana-40: 324px;
  --kcs-alto-ventana-50: 406px;
  --kcs-alto-ventana-60: 487px;

}

/* modo lg: valores del diseño a partir de 1024px */
@media (min-width: 1024px) {
  :root {
    --kcs-font-escala-d100: 42px;
    --kcs-font-escala-h100: 42px;
    --kcs-font-escala-h200: 24px;
    --kcs-font-escala-h300: 20px;
    --kcs-font-escala-h400: 18px;
    --kcs-font-escala-b100: 16px;
    --kcs-font-escala-b200: 14px;
    --kcs-font-escala-l100: 14px;
    --kcs-font-escala-l200: 12px;
    --kcs-espaciado-04: 32px;
    --kcs-espaciado-05: 40px;
    --kcs-espaciado-06: 40px;
    --kcs-espaciado-10: 64px;
    --kcs-espaciado-15: 80px;
    --kcs-espaciado-20: 144px;
    --kcs-alto-ventana-50: 384px;
    --kcs-alto-ventana-60: 461px;
  }
}

/* modo xl: valores del diseño a partir de 1600px */
@media (min-width: 1600px) {
  :root {
    --kcs-font-escala-d100: 80px;
    --kcs-font-escala-h100: 48px;
    --kcs-font-escala-h200: 36px;
    --kcs-font-escala-h300: 24px;
    --kcs-font-escala-h400: 22px;
    --kcs-font-escala-b100: 18px;
    --kcs-font-escala-b200: 16px;
    --kcs-font-escala-l100: 16px;
    --kcs-font-escala-l200: 14px;
    --kcs-espaciado-04: 32px;
    --kcs-espaciado-05: 40px;
    --kcs-espaciado-06: 64px;
    --kcs-espaciado-10: 80px;
    --kcs-espaciado-15: 120px;
    --kcs-espaciado-20: 160px;
    --kcs-alto-ventana-50: 540px;
    --kcs-alto-ventana-60: 648px;
  }
}

/* Breakpoints declarados (para referencia en media queries) */
/*   sm: 375px */
/*   lg: 1366px */
/*   xl: 1920px */