/**
 * BPC Design Tokens
 *
 * Fonte unica del design system "Heritage Modern Institutional".
 * Esposti come CSS custom properties: il tema li usa per i propri stili,
 * il plugin bpc-core li riusa come var(--bpc-*) per i componenti front-end.
 * Modificare qui = aggiornare brand ovunque (tema + plugin).
 */

:root {
	/* ---------------------------------------------------------------
	 * Colori - Palette istituzionale (Bordeaux)
	 * --------------------------------------------------------------- */
	/* Brand tokens come triplette RGB (canale spazio-separato). Sono la "fonte"
	 * modificabile anche dal Pannello Tema. Le variabili colore sotto derivano
	 * da queste: cosi' Tailwind puo' applicare le trasparenze (es. bg-primary/30)
	 * e un cambio colore si propaga a tema + plugin + utility Tailwind. */
	--bpc-primary-rgb: 99 0 27;
	--bpc-primary-container-rgb: 140 5 43;
	--bpc-on-primary-rgb: 255 255 255;
	--bpc-primary-fixed-rgb: 255 218 219;
	--bpc-secondary-rgb: 92 94 99;
	--bpc-background-rgb: 249 249 249;
	--bpc-surface-rgb: 249 249 249;
	--bpc-on-surface-rgb: 26 28 28;
	--bpc-on-surface-variant-rgb: 88 65 66;
	--bpc-surface-variant-rgb: 226 226 226;
	--bpc-surface-container-lowest-rgb: 255 255 255;
	--bpc-surface-container-low-rgb: 244 243 243;
	--bpc-surface-container-rgb: 238 238 238;
	--bpc-outline-rgb: 140 112 114;
	--bpc-outline-variant-rgb: 224 191 192;

	--bpc-primary: rgb(var(--bpc-primary-rgb));
	--bpc-on-primary: rgb(var(--bpc-on-primary-rgb));
	--bpc-primary-container: rgb(var(--bpc-primary-container-rgb));
	--bpc-on-primary-container: #ff939d;
	--bpc-primary-fixed: rgb(var(--bpc-primary-fixed-rgb));
	--bpc-primary-fixed-dim: #ffb2b8;
	--bpc-on-primary-fixed: #40000e;
	--bpc-on-primary-fixed-variant: #8f092d;
	--bpc-inverse-primary: #ffb2b8;
	--bpc-surface-tint: #b12843;

	--bpc-secondary: rgb(var(--bpc-secondary-rgb));
	--bpc-on-secondary: #ffffff;
	--bpc-secondary-container: #e1e2e8;
	--bpc-on-secondary-container: #626469;

	--bpc-tertiary: #2e2e2e;
	--bpc-on-tertiary: #ffffff;
	--bpc-tertiary-container: #444444;
	--bpc-on-tertiary-container: #b3b1b1;

	--bpc-error: #ba1a1a;
	--bpc-on-error: #ffffff;
	--bpc-error-container: #ffdad6;
	--bpc-on-error-container: #93000a;

	/* Superfici e neutri */
	--bpc-background: rgb(var(--bpc-background-rgb));
	--bpc-on-background: #1a1c1c;
	--bpc-surface: rgb(var(--bpc-surface-rgb));
	--bpc-on-surface: rgb(var(--bpc-on-surface-rgb));
	--bpc-on-surface-variant: rgb(var(--bpc-on-surface-variant-rgb));
	--bpc-surface-variant: rgb(var(--bpc-surface-variant-rgb));
	--bpc-surface-dim: #dadada;
	--bpc-surface-bright: #f9f9f9;
	--bpc-surface-container-lowest: rgb(var(--bpc-surface-container-lowest-rgb));
	--bpc-surface-container-low: rgb(var(--bpc-surface-container-low-rgb));
	--bpc-surface-container: rgb(var(--bpc-surface-container-rgb));
	--bpc-surface-container-high: #e8e8e8;
	--bpc-surface-container-highest: #e2e2e2;
	--bpc-inverse-surface: #2f3131;
	--bpc-inverse-on-surface: #f1f1f1;

	--bpc-outline: rgb(var(--bpc-outline-rgb));
	--bpc-outline-variant: rgb(var(--bpc-outline-variant-rgb));

	/* ---------------------------------------------------------------
	 * Tipografia
	 * --------------------------------------------------------------- */
	--bpc-font-headline: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--bpc-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--bpc-font-label: 'Work Sans', 'Inter', system-ui, sans-serif;

	/* Dimensioni in rem (base 16px) per rispettare lo zoom testo del browser
	   e l'ingrandimento del widget di accessibilità, che scala html{font-size}.
	   A 100% i valori restano identici a prima (48px, 32px, ...). */
	--bpc-text-headline-xl: 3rem;      /* 48px */
	--bpc-text-headline-lg: 2rem;      /* 32px */
	--bpc-text-headline-md: 1.5rem;    /* 24px */
	--bpc-text-body-lg: 1.125rem;      /* 18px */
	--bpc-text-body-md: 1rem;          /* 16px */
	--bpc-text-label-md: 0.875rem;     /* 14px */
	--bpc-text-caption: 0.75rem;       /* 12px */

	--bpc-leading-tight: 1.1;
	--bpc-leading-heading: 1.2;
	--bpc-leading-body: 1.6;

	/* ---------------------------------------------------------------
	 * Spaziatura (baseline 4px)
	 * --------------------------------------------------------------- */
	--bpc-space-xs: 4px;
	--bpc-space-sm: 8px;
	--bpc-space-md: 16px;
	--bpc-space-lg: 24px;
	--bpc-space-xl: 48px;
	--bpc-gutter: 24px;
	--bpc-container-max: 1280px;

	/* ---------------------------------------------------------------
	 * Raggi
	 * --------------------------------------------------------------- */
	--bpc-radius-sm: 0.125rem;
	--bpc-radius: 0.25rem;
	--bpc-radius-md: 0.375rem;
	--bpc-radius-lg: 0.5rem;
	--bpc-radius-xl: 0.75rem;
	--bpc-radius-full: 9999px;

	/* ---------------------------------------------------------------
	 * Elevazione (ombre diffuse, tinta blue-black)
	 * --------------------------------------------------------------- */
	--bpc-shadow-sm: 0 1px 2px rgba(26, 28, 28, 0.06);
	--bpc-shadow-md: 0 4px 12px rgba(26, 28, 28, 0.08);
	--bpc-shadow-lg: 0 12px 24px -8px rgba(99, 0, 27, 0.15);

	/* Bordo istituzionale standard */
	--bpc-border-color: #dedede;
}