/*
 * Identidad de esta instalación: los valores de marca sobre los nombres que
 * declara assets/css/tokens.css. Se encola después de tokens.css y base.css.
 * Es el único archivo del tema con color y familia tipográfica; su equivalente
 * legible por máquina es identity.json y su conformidad, README.md.
 */

@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("fonts/Lato-300.woff2") format("woff2");
}

@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/Lato-400.woff2") format("woff2");
}

@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/Lato-700.woff2") format("woff2");
}

@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("fonts/Lato-900.woff2") format("woff2");
}

@font-face {
	font-family: "Alex Brush";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/AlexBrush-400.woff2") format("woff2");
}

:root {
	--color-brand-blue: #234082;
	--color-brand-purple: #654897;
	--color-brand-orange: #DE5A2D;
	--color-brand-green: #355530;
	--color-brand-deep: #00255a;

	/* action.default no es brand.orange: el naranja de marca bajo texto blanco
	 * pequeño da 3.75:1 y no alcanza AA. Nunca se intercambian. */
	--color-action-default: #B84A1E;
	--color-action-hover: #9E3F19;
	--color-action-subtle: #FBEDE7;

	--color-surface-base: #FBFAF7;
	--color-surface-raised: #FFFFFF;
	--color-surface-diagonal: #EFEAF7;
	--color-surface-emphasis: #00255a;
	--color-surface-sunken: #F4F2F7;

	--color-ink-primary: #1A1A22;
	--color-ink-secondary: #55555F;
	--color-ink-muted: #66666F;
	--color-ink-inverse: #FFFFFF;
	--color-ink-on-emphasis: #B9C6DA;
	--color-ink-link: #234082;

	--color-border-default: #E6E6EC;
	--color-border-strong: #C9C9D4;

	/* El borde de un control no se viste con los grises de separador: sobre el
	 * campo blanco dan 1.24:1 y 1.64:1, y el límite de un control exige 3:1.
	 * Este es el gris más claro de la familia que lo alcanza. */
	--color-border-control: #94949C;

	--color-border-focus: #654897;
	--color-border-focus-inverse: #F0A683;

	--color-state-success: #355530;
	--color-state-error: #A32A12;
	--color-state-warning: #8A5A00;
	--color-state-info: #234082;

	/* La tinta de Impulso no es su color de marca: el naranja de marca bajo texto
	 * de 11px no alcanza el mínimo de texto pequeño. Las otras dos coinciden. */
	--color-branch-growth: #355530;
	--color-branch-growth-ink: #355530;
	--color-branch-growth-tint: #EAF2E8;
	--color-branch-growth-wash: #E0EDDC;
	--color-branch-transform: #654897;
	--color-branch-transform-ink: #654897;
	--color-branch-transform-tint: #F3EFF9;
	--color-branch-transform-wash: #ECE6F7;
	--color-branch-impulse: #DE5A2D;
	--color-branch-impulse-ink: #B84A1E;
	--color-branch-impulse-tint: #FBEDE7;
	--color-branch-impulse-wash: #FBE3D8;

	/* Sombra teñida de azul: sobre el crema, una sombra neutra ensucia. */
	--color-shadow-card: rgba(35, 64, 130, 0.10);
	--color-shadow-overlay: rgba(0, 0, 0, 0.16);

	--font-family-base: "Lato", system-ui, sans-serif;
	--font-family-display: "Alex Brush", cursive;
}

/*
 * La clase de cada familia de sección no se escribe aquí: se monta desde
 * identity.json, que es quien declara cuántas familias hay. Escritas a mano,
 * añadir o quitar una familia obligaba a tocar dos archivos y solo uno de los
 * dos era el que el verificador mide.
 *
 * El `wash` existe porque el `tint` es tan cercano al crema del fondo que la
 * banda diagonal desaparecía; la `ink` existe porque el color de familia no
 * siempre alcanza el contraste que exige el texto pequeño.
 */