:root {
	/* ===== Brand SCALE (fixed in both themes) ===== */
	--paper: #f6f6f6;
	--ink: #000000;
	--vermilion: #0095ca;

	--paper-2: #F9F7F3;
	--white: #FFFFFF;
	--ink-100: #E0DDD7;
	--ink-300: #A8A49C;
	--ink-500: #6B6963;
	--ink-700: #2E2E33;
	--ink-900: #141417;

	/* Scala accent derivata dal colore --vermilion (brand.php) */
	--vermilion-50: #ebf7fb;
	--vermilion-100: #c4e7f3;
	--vermilion-300: #8ccfe7;
	--vermilion-500: #0095ca;
	--vermilion-700: #007098;
	--vermilion-900: #00394d;

	--color-alert: #D43A2F;
	--color-warning: #F4B43B;
	--color-success: #149A61;
	--color-info: #2E2E33;

	--paper-rgb: 246, 246, 246;
	--ink-rgb: 0, 0, 0;
	--vermilion-rgb: 0, 149, 202;

	/* ===== Semantic ROLE tokens — LIGHT (flip in dark) ===== */
	--canvas: var(--paper);
	--surface: var(--white);
	--surface-2: var(--paper-2);
	--surface-sunken: #EFEBE3;
	--field-bg: var(--paper);
	--border: var(--ink-100);
	--border-strong: var(--ink-300);
	--text-strong: var(--ink);
	--text: var(--ink-900);
	--text-muted: var(--ink-500);
	--text-subtle: var(--ink-300);
	--on-accent: var(--white);
	--hover-overlay: rgba(var(--ink-rgb), 0.04);
	--grid-line: rgba(var(--ink-rgb), 0.03);

	/* Sidebar is dark in both themes */
	--sidebar-bg: var(--ink);
	--sidebar-text: var(--paper);
	--sidebar-text-muted: var(--ink-300);
	--sidebar-hover: rgba(255, 255, 255, 0.07);
	--sidebar-active: rgba(255, 255, 255, 0.10);

	--shadow-subtle: 0 1px 2px rgba(var(--ink-rgb), 0.04);
	--shadow-soft: 0 2px 8px rgba(var(--ink-rgb), 0.06);
	--shadow-hover: 0 6px 20px rgba(var(--ink-rgb), 0.10);

	/* ===== Typography ===== */
	--font-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	--fs-d1: 6rem;      --lh-d1: 1.08; --tr-d1: -0.03em;
	--fs-d2: 4rem;      --lh-d2: 1.12; --tr-d2: -0.025em;
	--fs-h1: 2.75rem;   --lh-h1: 1.18; --tr-h1: -0.015em;
	--fs-h2: 2rem;      --lh-h2: 1.25; --tr-h2: -0.01em;
	--fs-h3: 1.375rem;  --lh-h3: 1.36; --tr-h3: -0.005em;
	--fs-lg: 1.25rem;   --lh-lg: 1.5;
	--fs-body: 1rem;    --lh-body: 1.625;
	--fs-sm: 0.875rem;  --lh-sm: 1.57;
	--fs-mono: 0.6875rem; --lh-mono: 1.64; --tr-mono: 0.1em;

	/* ===== Radius / Motion ===== */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 14px;
	--radius-xl: 20px;
	--radius-full: 9999px;

	--ease: cubic-bezier(0.25, 0.1, 0.25, 1);
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--duration-fast: 0.15s;
	--duration: 0.25s;
	--duration-slow: 0.35s;

	/* ===== Legacy aliases (map onto role tokens) ===== */
	--theme-accent: var(--vermilion);
	--theme-secondary: #1e3054;
	--theme-text: var(--text);
	--theme-background: var(--canvas);
	--theme-button: var(--text-strong);
	--theme-button-text: var(--on-accent);
	--theme-accent-rgb: 0, 149, 202;
	--theme-secondary-rgb: 30, 48, 84;
}

/* ============================================================
   DARK THEME — role tokens flip; brand scale stays. Surfaces use
   the warm Ink scale; Paper becomes the text. Vermilion unchanged.
   ============================================================ */
:root[data-theme="dark"] {
	--canvas: #0E0E11;
	--surface: #1A1A1F;
	--surface-2: #161619;
	--surface-sunken: #0B0B0D;
	--field-bg: #17171B;
	--border: #2C2C33;
	--border-strong: #3E3E47;
	--text-strong: #FBF9F5;
	--text: #E9E6E0;
	--text-muted: #A39F97;
	--text-subtle: #74716A;
	--on-accent: #FFFFFF;
	--hover-overlay: rgba(255, 255, 255, 0.05);
	--grid-line: rgba(255, 255, 255, 0.04);

	--sidebar-bg: #131316;
	--sidebar-text: #F4F1EC;
	--sidebar-text-muted: #A8A49C;

	/* --theme-button = --text-strong flips to near-white in dark, ma
	   --theme-button-text = --on-accent resta bianco: testo bianco su fondo
	   chiaro. Il testo del pulsante deve virare a scuro (come la bolla inviata
	   in conversazioni). Copre pulsante velocita audio, badge, ecc. */
	--theme-button-text: var(--canvas);

	--shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.5);
	--shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.55);
	--shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.6);
}

/* ---- Dark overrides for components that use raw brand tokens ---- */
/* Solid buttons: keep light their text, lift the dark bg off the canvas */
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .btn-secondary,
:root[data-theme="dark"] .btn-dark {
	background-color: var(--ink-700);
	border-color: var(--ink-700);
	color: var(--white);
}
:root[data-theme="dark"] .btn-primary:hover,
:root[data-theme="dark"] .btn-secondary:hover,
:root[data-theme="dark"] .btn-dark:hover:not(:disabled) {
	background-color: var(--ink-500);
	border-color: var(--ink-500);
}
:root[data-theme="dark"] .btn-info {
	background-color: var(--ink-500);
	border-color: var(--ink-500);
}
/* Outline / ghost buttons: light text, light fill on hover */
:root[data-theme="dark"] .btn-outline-primary,
:root[data-theme="dark"] .btn-outline-secondary {
	color: var(--text-strong);
	border-color: var(--border-strong);
}
:root[data-theme="dark"] .btn-outline-primary:hover,
:root[data-theme="dark"] .btn-outline-secondary:hover,
:root[data-theme="dark"] .btn-outline-secondary:focus {
	background-color: var(--text-strong);
	border-color: var(--text-strong);
	color: var(--canvas);
}
/* Amber buttons always keep dark ink text */
:root[data-theme="dark"] .btn-warning,
:root[data-theme="dark"] .btn-warning:hover,
:root[data-theme="dark"] .btn-warning:focus,
:root[data-theme="dark"] .btn-outline-warning:hover {
	color: var(--ink-900);
}
/* Active segmented tab + active page: invert to a light pill */
:root[data-theme="dark"] .app-subnav .nav-tabs .nav-link.active,
:root[data-theme="dark"] .page-item.active .page-link {
	background: var(--text-strong);
	border-color: var(--text-strong);
	color: var(--canvas);
}
/* Bootstrap bg utilities that hardcode white/light */
:root[data-theme="dark"] .bg-white { background-color: var(--surface) !important; }
:root[data-theme="dark"] .bg-light { background-color: var(--surface-2) !important; }

/* ============================================================
   Logo — "greg." wordmark (Geist Bold, -6% tracking, vermilion dot)
   ============================================================ */
.greg-logo {
	display: inline-flex;
	align-items: baseline;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: -0.06em;
	line-height: 1;
	color: var(--text-strong);
	text-decoration: none;
	white-space: nowrap;
	user-select: none;
}

.greg-logo:hover { text-decoration: none; }

.greg-logo-word { display: inline-block; }

.greg-logo-dot {
	display: inline-block;
	width: 0.26em;
	height: 0.26em;
	margin-left: 0.07em;
	border-radius: 50%;
	background: var(--vermilion);
	flex-shrink: 0;
	transform: translateY(-0.02em);
}

.greg-logo--on-dark,
.greg-logo--reversed { color: var(--white); }
.greg-logo--reversed .greg-logo-dot { background: var(--white); }

.greg-symbol {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.06em;
	line-height: 1;
	color: var(--text-strong);
}
.greg-symbol .greg-logo-dot { width: 0.22em; height: 0.22em; }