/* Global color tokens — transcribed from "Color Tokens - Global",
   "Theme Color Tokens" and "Color Tokens / Semantici" in the source file. */
:root{
/* absolute */
--color-black:#000000;--color-white:#ffffff;
/* slate — neutral cool */
--color-slate-93:#ebeced;--color-slate-85:#d9dadb;--color-slate-78:#c5c7c9;--color-slate-68:#a3adb7;--color-slate-62:#929da9;--color-slate-52:#768594;--color-slate-44:#5c6f82;--color-slate-36:#455b71;--color-slate-28:#2f475e;--color-slate-20:#17324d;
/* gray — neutral */
--color-gray-98:#fafafa;--color-gray-96:#f5f5f5;--color-gray-90:#e5e5e5;--color-gray-83:#d4d4d4;--color-gray-64:#a3a3a3;--color-gray-45:#737373;--color-gray-32:#525252;--color-gray-25:#404040;--color-gray-15:#262626;--color-gray-10:#1a1a1a;
/* blue — default theme ("blu Italia") */
--color-blue-97:#f2f7fc;--color-blue-87:#bfdfff;--color-blue-77:#94c4f5;--color-blue-67:#6aaaeb;--color-blue-57:#4392e0;--color-blue-48:#207ad5;--color-blue-40:#0066cc;--color-blue-30:#004d99;--color-blue-25:#004080;--color-blue-20:#003366;
/* teal — accent theme */
--color-teal-90:#ccfffd;--color-teal-80:#a3f5f2;--color-teal-70:#79ece8;--color-teal-60:#52e0db;--color-teal-50:#2bd6d0;--color-teal-42:#0bcbc5;--color-teal-36:#09afa9;--color-teal-32:#089994;--color-teal-26:#077f7b;--color-teal-20:#05615e;
/* red — error */
--color-red-96:#fbeff1;--color-red-90:#f5d6db;--color-red-80:#ebadb8;--color-red-70:#e08593;--color-red-60:#d65c70;--color-red-50:#cc334d;--color-red-44:#b32d43;--color-red-37:#992639;--color-red-30:#7a1f2e;--color-red-25:#661a26;
/* emerald — success */
--color-emerald-87:#c8f6e7;--color-emerald-77:#99eed2;--color-emerald-67:#6ee7bf;--color-emerald-57:#43e0ac;--color-emerald-48:#22d499;--color-emerald-40:#00cc88;--color-emerald-35:#00b377;--color-emerald-25:#008055;--color-emerald-20:#006644;--color-emerald-15:#004d33;
/* orange — warning */
--color-orange-87:#f6e4c8;--color-orange-77:#eecd9a;--color-orange-67:#e7b66e;--color-orange-57:#e0a243;--color-orange-48:#d48d22;--color-orange-40:#cc7a00;--color-orange-35:#b36b00;--color-orange-30:#995c00;--color-orange-25:#804d00;--color-orange-20:#663d00;

/* ── semantic: background ─────────────────────────────── */
--background-primary:var(--color-blue-40);--background-primary-light:var(--color-blue-87);--background-primary-lighter:var(--color-blue-97);--background-primary-hover:var(--color-blue-30);--background-primary-active:var(--color-blue-20);
--background-secondary:var(--color-slate-52);--background-secondary-light:var(--color-slate-68);--background-secondary-lighter:var(--color-slate-85);--background-secondary-hover:var(--color-slate-28);--background-secondary-active:var(--color-slate-20);
--background-accent:var(--color-teal-32);--background-accent-hover:var(--color-teal-26);
--background-muted:var(--color-gray-96);--background-inverse:var(--color-white);--background-disabled:var(--color-slate-85);--background-subtle:var(--color-gray-83);--background-emphasis:var(--color-slate-20);
--background-success:var(--color-emerald-25);--background-success-light:var(--color-emerald-87);--background-success-hover:var(--color-emerald-20);--background-success-active:var(--color-emerald-15);
--background-warning:var(--color-orange-30);--background-warning-light:var(--color-orange-87);--background-warning-hover:var(--color-orange-25);--background-warning-active:var(--color-orange-20);
--background-error:var(--color-red-50);--background-error-light:var(--color-red-96);--background-error-hover:var(--color-red-37);--background-error-active:var(--color-red-25);

/* ── semantic: border ─────────────────────────────────── */
--border-primary:var(--color-blue-40);--border-primary-hover:var(--color-blue-30);--border-primary-active:var(--color-blue-20);
--border-secondary:var(--color-slate-44);--border-secondary-hover:var(--color-slate-28);--border-secondary-active:var(--color-slate-20);
--border-inverse:var(--color-white);--border-disabled:var(--color-slate-85);--border-subtle:var(--color-slate-78);
--border-success:var(--color-emerald-25);--border-success-hover:var(--color-emerald-20);--border-success-active:var(--color-emerald-15);
--border-warning:var(--color-orange-30);--border-warning-hover:var(--color-orange-25);--border-warning-active:var(--color-orange-20);
--border-error:var(--color-red-50);--border-error-hover:var(--color-red-37);--border-error-active:var(--color-red-25);

/* ── semantic: text ───────────────────────────────────── */
--text-base:var(--color-gray-10);
--text-primary:var(--color-blue-40);--text-primary-hover:var(--color-blue-30);--text-primary-active:var(--color-blue-20);
--text-secondary:var(--color-slate-28);--text-secondary-hover:var(--color-slate-20);--text-secondary-active:var(--color-slate-20);
--text-muted:var(--color-slate-44);--text-disabled:var(--color-slate-44);--text-inverse:var(--color-white);--text-accent:var(--color-teal-32);
--text-success:var(--color-emerald-25);--text-success-hover:var(--color-emerald-20);--text-success-active:var(--color-emerald-15);
--text-warning:var(--color-orange-30);--text-warning-hover:var(--color-orange-25);--text-warning-active:var(--color-orange-20);
--text-error:var(--color-red-50);--text-error-hover:var(--color-red-37);--text-error-active:var(--color-red-25);
}
/* Accent (teal) theme: re-point the primary family at the teal ramp.
   Apply with <div class="theme-accent"> or on :root. */
.theme-accent{--background-primary:var(--color-teal-32);--background-primary-light:var(--color-teal-80);--background-primary-lighter:var(--color-teal-90);--background-primary-hover:var(--color-teal-26);--background-primary-active:var(--color-teal-20);--border-primary:var(--color-teal-32);--border-primary-hover:var(--color-teal-26);--border-primary-active:var(--color-teal-20);--text-primary:var(--color-teal-32);--text-primary-hover:var(--color-teal-26);--text-primary-active:var(--color-teal-20)}