/**
 * Design Tokens — palette Materia
 *
 * Fonte di verità: cms-process-avventura/src/data/ui-direction.ts (const materia)
 * Tutti gli altri file CSS leggono SOLO da queste variabili.
 *
 * @package lavventura
 */

:root {
	/* ============================================================
	   COLORI — palette Materia (cms-process)
	   ============================================================
	   Sorgente: ui-direction.ts → const materia → palette
	   Nomi esatti da Materia source of truth (kebab-case):
	     carta-calda        #F5F1EA  (background)
	     inchiostro-terra   #2D2620  (ink / text)
	     pietra             #C7BFB1  (bg-alt / borders)
	     vino               #5C2231  (primary accent / cesanese)
	     terracotta         #B85544  (secondary accent / link hover)
	     salvia             #7A8568  (natural / success)
	     inchiostro-morbido #5C5045  (muted text / soft accent)
	   ============================================================ */
	--color-carta-calda:        #F5F1EA;
	--color-inchiostro-terra:   #2D2620;
	--color-pietra:             #C7BFB1;
	--color-vino:               #5C2231;
	--color-terracotta:         #B85544;
	--color-salvia:             #7A8568;
	--color-inchiostro-morbido: #5C5045;

	/* Semantic aliases */
	--color-bg:             var(--color-carta-calda);
	--color-bg-alt:         var(--color-pietra);
	--color-text:           var(--color-inchiostro-terra);
	--color-text-muted:     color-mix(in srgb, var(--color-inchiostro-terra) 70%, transparent);
	--color-accent:         var(--color-vino);
	--color-accent-soft:    var(--color-inchiostro-morbido);
	--color-link:           var(--color-vino);
	--color-link-hover:     var(--color-terracotta);
	--color-border:         color-mix(in srgb, var(--color-inchiostro-terra) 15%, transparent);
	--color-success:        var(--color-salvia);

	/* ============================================================
	   TIPOGRAFIA
	   Sorgente: ui-direction.ts → const materia → typography
	     display = "EB Garamond"  — titoli editoriali, sempre italic dove firma
	     body    = "IBM Plex Sans" — corpo testo + UI
	     mono    = "PT Mono"       — numeri, metadata, schede tecniche
	   ============================================================ */
	--font-display: 'EB Garamond', Georgia, serif;
	--font-body:    'IBM Plex Sans', system-ui, sans-serif;
	--font-mono:    'PT Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Scale fluida con clamp(min, fluid, max) */
	--font-size-display:    clamp(2.5rem, 5vw + 0.5rem, 4.5rem);
	--font-size-h1:         clamp(2rem, 4vw + 0.25rem, 3.5rem);
	--font-size-h2:         clamp(1.5rem, 3vw + 0.25rem, 2.5rem);
	--font-size-h3:         clamp(1.25rem, 2vw + 0.25rem, 1.75rem);
	--font-size-h4:         clamp(1.125rem, 1.5vw + 0.25rem, 1.375rem);
	--font-size-lead:       clamp(1.125rem, 1vw + 0.875rem, 1.375rem);
	--font-size-body:       1.0625rem; /* 17px base — leggibilità editoriale */
	--font-size-small:      0.9375rem;
	--font-size-caption:    0.8125rem;

	--line-height-display:  1.05;
	--line-height-headings: 1.15;
	--line-height-body:     1.65;
	--line-height-ui:       1.4;

	--letter-spacing-display: -0.02em;
	--letter-spacing-headings: -0.01em;
	--letter-spacing-ui:    0.02em;
	--letter-spacing-caps:  0.1em;

	/* ============================================================
	   SPAZIATURA — sistema fluido (clamp)
	   ============================================================ */
	--space-3xs:  clamp(0.25rem, 0.5vw, 0.375rem);
	--space-2xs:  clamp(0.5rem, 1vw, 0.75rem);
	--space-xs:   clamp(0.75rem, 1.5vw, 1rem);
	--space-s:    clamp(1rem, 2vw, 1.5rem);
	--space-m:    clamp(1.5rem, 3vw, 2.5rem);
	--space-l:    clamp(2.5rem, 5vw, 4rem);
	--space-xl:   clamp(4rem, 8vw, 6rem);
	--space-2xl:  clamp(6rem, 12vw, 10rem);

	/* ============================================================
	   CONTAINER & LAYOUT
	   ============================================================ */
	--container-narrow:  65ch;
	--container-default: 75rem;
	--container-wide:    90rem;
	--container-full:    100%;
	--container-padding-inline: clamp(1rem, 4vw, 3rem);

	/* ============================================================
	   BORDERS, RADIUS, SHADOWS
	   ============================================================ */
	--radius-none: 0;
	--radius-sm:   0.125rem;
	--radius-md:   0.375rem;
	--radius-lg:   0.75rem;
	--radius-full: 9999px;

	--border-width-1: 1px;
	--border-width-2: 2px;

	--shadow-soft:   0 4px 16px -4px rgb(0 0 0 / 8%);
	--shadow-medium: 0 8px 32px -8px rgb(0 0 0 / 12%);
	--shadow-strong: 0 16px 48px -12px rgb(0 0 0 / 18%);

	/* ============================================================
	   TRANSITIONS
	   ============================================================ */
	--transition-fast:  150ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-base:  250ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow:  500ms cubic-bezier(0.4, 0, 0.2, 1);

	/* ============================================================
	   Z-INDEX SCALE
	   ============================================================ */
	--z-base:    0;
	--z-raised:  10;
	--z-overlay: 100;
	--z-modal:   1000;
	--z-toast:   10000;
}