/*
 * Token del design system "Industry" (Restyling Corriere Etneo/_ds/…/styles.css):
 * colori, rampe, caratteri. Si cambia l'aspetto da qui, non nei template.
 * I caratteri sono serviti dal tema (niente Google Fonts).
 */

@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/barlow-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-condensed-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }

:root {
	--color-bg: #f2f2f3;
	--color-surface: #e9e9ea;
	--color-text: #1d1f20;
	--color-accent: #5980a6;
	--color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

	--color-neutral-100: #f5f5f8;
	--color-neutral-300: #d4d4d7;
	--color-neutral-500: #98989b;
	--color-neutral-700: #5d5d60;
	--color-neutral-900: #2b2b2d;

	--color-accent-100: #eef6ff;
	--color-accent-200: #d6ebff;
	--color-accent-300: #b5d9fd;
	--color-accent-400: #94bce3;
	--color-accent-500: #749dc4;
	--color-accent-600: #597ea3;
	--color-accent-700: #416180;
	--color-accent-800: #2c455d;
	--color-accent-900: #1d2d3d;

	/* testo attenuato: le tre gradazioni che il design usa con color-mix */
	--color-text-80: color-mix(in srgb, var(--color-text) 80%, transparent);
	--color-text-70: color-mix(in srgb, var(--color-text) 70%, transparent);
	--color-text-60: color-mix(in srgb, var(--color-text) 62%, transparent);
	/* filetti chiari sul fondo acciaio */
	--color-rule-dark: color-mix(in srgb, #f2f2f3 22%, transparent);

	--font-heading: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
	--font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

	--gutter: clamp(16px, 4vw, 48px);
	--max: 1240px;
}