/* marea-marca | dist/tokens.css
   GENERADO por scripts/construir.mjs desde tokens/*.json. No editar a mano:
   se sobrescribe en la siguiente pasada. Para cambiar un valor, se cambia el
   token y se vuelve a generar.

   Reglas de color del sistema madre, que el validador hace cumplir:
   turquesa #5CE0CD solo fondo | violeta #5A7FF9 solo en grande y en objetos
   graficos | indigo #3A35A8 texto fuerte, enlaces y botones | tinta #17142A
   cuerpo. */

:root {
  /* base.color */
  --marea-base-color-marca-turquesa: #5CE0CD;
  --marea-base-color-marca-violeta: #5A7FF9;
  --marea-base-color-marca-indigo: #3A35A8;
  --marea-base-color-marca-indigo-hondo: #2A2680;
  --marea-base-color-marca-tinta: #17142A;
  --marea-base-color-neutro-blanco: #FFFFFF;
  --marea-base-color-neutro-papel: #F6F5FA;
  --marea-base-color-neutro-filete: #E6E4EE;
  --marea-base-color-neutro-borde: #8B88A3;
  --marea-base-color-neutro-suave: #605C7B;

  /* base.espacio */
  --marea-base-espacio-0: 0rem;
  --marea-base-espacio-1: 0.25rem;
  --marea-base-espacio-2: 0.5rem;
  --marea-base-espacio-3: 0.75rem;
  --marea-base-espacio-4: 1rem;
  --marea-base-espacio-5: 1.5rem;
  --marea-base-espacio-6: 2rem;
  --marea-base-espacio-7: 3rem;
  --marea-base-espacio-8: 4rem;
  --marea-base-espacio-9: 6rem;

  /* base.radio */
  --marea-base-radio-nulo: 0rem;
  --marea-base-radio-sutil: 0.125rem;
  --marea-base-radio-base: 0.375rem;
  --marea-base-radio-grande: 0.75rem;
  --marea-base-radio-pastilla: 9999rem;

  /* base.trazo */
  --marea-base-trazo-filete: 1px;
  --marea-base-trazo-campo: 1px;
  --marea-base-trazo-foco: 3px;
  --marea-base-trazo-marcador: 4px;
  --marea-base-trazo-cinta: 8px;

  /* base.sombra */
  --marea-base-sombra-nula: 0rem 0rem 0rem 0rem #17142A00;
  --marea-base-sombra-tarjeta: 0rem 0.0625rem 0.125rem 0rem #17142A14;
  --marea-base-sombra-elevada: 0rem 0.5rem 1.5rem -0.5rem #17142A1F;

  /* base.movimiento */
  --marea-base-movimiento-duracion-instante: 80ms;
  --marea-base-movimiento-duracion-rapida: 150ms;
  --marea-base-movimiento-duracion-media: 260ms;
  --marea-base-movimiento-curva-salida: cubic-bezier(0.2, 0, 0, 1);
  --marea-base-movimiento-curva-estandar: cubic-bezier(0.4, 0, 0.2, 1);

  /* base.tipografia */
  --marea-base-tipografia-familia-sora: "Sora Variable", Sora, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --marea-base-tipografia-familia-manrope: "Manrope Variable", Manrope, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --marea-base-tipografia-familia-sistema: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --marea-base-tipografia-familia-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --marea-base-tipografia-peso-normal: 400;
  --marea-base-tipografia-peso-medio: 500;
  --marea-base-tipografia-peso-fuerte: 600;
  --marea-base-tipografia-peso-titular: 700;
  --marea-base-tipografia-escala-100: 0.75rem;
  --marea-base-tipografia-escala-200: 0.875rem;
  --marea-base-tipografia-escala-300: 1rem;
  --marea-base-tipografia-escala-400: 1.125rem;
  --marea-base-tipografia-escala-500: 1.375rem;
  --marea-base-tipografia-escala-600: 1.75rem;
  --marea-base-tipografia-escala-700: 2.25rem;
  --marea-base-tipografia-escala-800: 2.875rem;
  --marea-base-tipografia-escala-900: 3.75rem;
  --marea-base-tipografia-interlinea-apretada: 1.1;
  --marea-base-tipografia-interlinea-titulo: 1.2;
  --marea-base-tipografia-interlinea-corta: 1.35;
  --marea-base-tipografia-interlinea-media: 1.3;
  --marea-base-tipografia-interlinea-cuerpo: 1.6;
  --marea-base-tipografia-interlinea-holgada: 1.75;
  --marea-base-tipografia-letra-rotulo: -0.03em;
  --marea-base-tipografia-letra-titulo: -0.02em;
  --marea-base-tipografia-letra-normal: 0em;
  --marea-base-tipografia-letra-versalita: 0.08em;

  /* color.fondo */
  --marea-color-fondo-base: #FFFFFF;
  --marea-color-fondo-sutil: #F6F5FA;
  --marea-color-fondo-acento: #5CE0CD;
  --marea-color-fondo-grafico: #5A7FF9;
  --marea-color-fondo-fuerte: #17142A;

  /* color.tinta */
  --marea-color-tinta-cuerpo: #17142A;
  --marea-color-tinta-suave: #605C7B;
  --marea-color-tinta-fuerte: #3A35A8;
  --marea-color-tinta-sobre-acento: #17142A;
  --marea-color-tinta-sobre-grafico: #17142A;
  --marea-color-tinta-sobre-fuerte: #FFFFFF;

  /* color.enfasis */
  --marea-color-enfasis-grafico: #5A7FF9;
  --marea-color-enfasis-bloque: #5CE0CD;

  /* color.interactivo */
  --marea-color-interactivo-enlace: #3A35A8;
  --marea-color-interactivo-enlace-activo: #17142A;
  --marea-color-interactivo-enlace-sobre-fuerte: #FFFFFF;
  --marea-color-interactivo-boton-fondo: #3A35A8;
  --marea-color-interactivo-boton-fondo-activo: #2A2680;
  --marea-color-interactivo-boton-tinta: #FFFFFF;
  --marea-color-interactivo-foco: #5A7FF9;

  /* color.borde */
  --marea-color-borde-filete: #E6E4EE;
  --marea-color-borde-campo: #8B88A3;
  --marea-color-borde-fuerte: #17142A;

  /* color.margen */
  --marea-color-margen-fondo: #F6F5FA;
  --marea-color-margen-tinta: #605C7B;
  --marea-color-margen-marcador: #5CE0CD;

  /* cinta.color */
  --marea-cinta-color-inicio: #5CE0CD;
  --marea-cinta-color-fin: #5A7FF9;

  /* cinta.proporcion */
  --marea-cinta-proporcion-inicio: 66%;
  --marea-cinta-proporcion-fin: 34%;

  /* cinta.altura */
  --marea-cinta-altura: 8px;

  /* tipografia.familia */
  --marea-tipografia-familia-titulo: "Sora Variable", Sora, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --marea-tipografia-familia-texto: "Manrope Variable", Manrope, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --marea-tipografia-familia-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  /* tipografia.tamano */
  --marea-tipografia-tamano-micro: 0.75rem;
  --marea-tipografia-tamano-pie: 0.875rem;
  --marea-tipografia-tamano-cuerpo: 1rem;
  --marea-tipografia-tamano-entradilla: 1.125rem;
  --marea-tipografia-tamano-titulo-4: 1.375rem;
  --marea-tipografia-tamano-titulo-3: 1.75rem;
  --marea-tipografia-tamano-titulo-2: 2.25rem;
  --marea-tipografia-tamano-titulo-1: 2.875rem;
  --marea-tipografia-tamano-rotulo: 3.75rem;

  /* tipografia.peso */
  --marea-tipografia-peso-texto: 400;
  --marea-tipografia-peso-texto-fuerte: 600;
  --marea-tipografia-peso-titulo: 700;
  --marea-tipografia-peso-etiqueta: 500;

  /* tipografia.interlinea */
  --marea-tipografia-interlinea-titulo: 1.2;
  --marea-tipografia-interlinea-titulo-corto: 1.3;
  --marea-tipografia-interlinea-rotulo: 1.1;
  --marea-tipografia-interlinea-entradilla: 1.35;
  --marea-tipografia-interlinea-cuerpo: 1.6;

  /* tipografia.letra */
  --marea-tipografia-letra-titulo: -0.02em;
  --marea-tipografia-letra-rotulo: -0.03em;
  --marea-tipografia-letra-cuerpo: 0em;
  --marea-tipografia-letra-etiqueta: 0.08em;

  /* medida.columna */
  --marea-medida-columna: 42rem;

  /* medida.columna-ancha */
  --marea-medida-columna-ancha: 68rem;

  /* medida.columna-estrecha */
  --marea-medida-columna-estrecha: 30rem;

  /* espacio.apretado */
  --marea-espacio-apretado: 0.5rem;

  /* espacio.componente */
  --marea-espacio-componente: 1rem;

  /* espacio.bloque */
  --marea-espacio-bloque: 1.5rem;

  /* espacio.holgado */
  --marea-espacio-holgado: 2rem;

  /* espacio.seccion */
  --marea-espacio-seccion: 4rem;

  /* radio.control */
  --marea-radio-control: 0.375rem;

  /* radio.tarjeta */
  --marea-radio-tarjeta: 0.75rem;

  /* radio.pastilla */
  --marea-radio-pastilla: 9999rem;

  /* trazo.filete */
  --marea-trazo-filete: 1px;

  /* trazo.campo */
  --marea-trazo-campo: 1px;

  /* trazo.foco */
  --marea-trazo-foco: 3px;

  /* trazo.marcador */
  --marea-trazo-marcador: 4px;

  /* sombra.tarjeta */
  --marea-sombra-tarjeta: 0rem 0.0625rem 0.125rem 0rem #17142A14;

  /* sombra.elevada */
  --marea-sombra-elevada: 0rem 0.5rem 1.5rem -0.5rem #17142A1F;
}

/* Superficie: Web (tema Ghost y styleguide) */
:root, [data-superficie="web"] {
  --marea-medida-columna: 42rem;
}

/* Superficie: Correo (Listmonk) */
[data-superficie="email"] {
  --marea-tipografia-familia-titulo: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --marea-tipografia-familia-texto: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --marea-tipografia-tamano-cuerpo: 16px;
  --marea-tipografia-tamano-titulo-2: 26px;
  --marea-tipografia-tamano-titulo-3: 20px;
  --marea-tipografia-tamano-pie: 13px;
  --marea-medida-columna: 660px;
  --marea-radio-control: 0.125rem;
  --marea-radio-tarjeta: 0.125rem;
  --marea-sombra-tarjeta: 0rem 0rem 0rem 0rem #17142A00;
}

/* Superficie: Redes (Postiz) */
[data-superficie="rrss"] {
  --marea-tipografia-tamano-cuerpo: 2rem;
  --marea-tipografia-tamano-entradilla: 2.5rem;
  --marea-tipografia-tamano-titulo-2: 4rem;
  --marea-tipografia-tamano-titulo-1: 5rem;
  --marea-tipografia-tamano-rotulo: 6.5rem;
  --marea-tipografia-tamano-pie: 1.5rem;
  --marea-medida-columna: 1080px;
  --marea-color-fondo-base: #5CE0CD;
  --marea-color-tinta-cuerpo: #17142A;
  --marea-color-tinta-fuerte: #3A35A8;
}

/* Superficie: Documento sobrio */
[data-superficie="documento"] {
  --marea-color-tinta-fuerte: #17142A;
  --marea-color-enfasis-bloque: #F6F5FA;
  --marea-radio-control: 0rem;
  --marea-radio-tarjeta: 0rem;
  --marea-sombra-tarjeta: 0rem 0rem 0rem 0rem #17142A00;
  --marea-medida-columna: 38rem;
}
