/* Lunatika Factory — tokens-demo-alias.css (Fase 2B, infrastruttura di fedeltà).

   Espone i NOMI-TOKEN del demo (colors_and_type.css) come alias dei nostri
   --lf-*. Così il CSS dei componenti si PORTA dal demo con find/replace minimo
   invece di ri-tradurre a mano ogni valore (è lì che nascevano gli errori
   icone/colori — vedi "DECISIONE ARCHITETTURALE — CSS del demo come fonte" nel
   diario, 17/06: approccio IBRIDO).

   Caricato DOPO core.css (token del tema) e prima dei CSS componente. Gli alias
   che puntano a --lf-* ereditano dark/light automaticamente (il tema ridefinisce
   --lf-* per tema); i pochi valori che divergono per tema sono ridefiniti nel
   blocco [data-theme="light"].

   NON tocca la chrome. NON importa kit.css/magazine.css. Aggiunge solo custom
   property a :root: è additivo, quindi a regole esistenti = zero delta visivo. */

:root {
	/* --- Alias semantici → token del tema (auto-flip dark/light) --- */
	--accent:          var(--lf-borgogna);
	--accent-hover:    var(--lf-borgogna-light);
	--accent-rgb:      var(--lf-borgogna-rgb);
	--accent-2:        var(--lf-rame);
	--accent-2-hover:  var(--lf-rame-light);
	--accent-2-light:  var(--lf-rame-light);
	--accent-2-rgb:    var(--lf-rame-rgb);
	--bg:              var(--lf-nero);
	--bg-rgb:          var(--lf-bg-rgb);
	--bg-card:         var(--lf-card);
	--fg:              var(--lf-avorio);
	--fg-muted:        var(--lf-muted);
	--fg-rgb:          var(--lf-fg-rgb);
	--font-body:       var(--lf-font-body);
	--font-display:    var(--lf-font-display);
	/* Font d'accento del tema (Syne, self-hostato in core.css): numeri/etichette
	   tecniche del blocco Records. Sostituisce il vecchio alias mono importato
	   (rimosso: nessun CSS lo usava), bandito per GDPR. */
	--font-accent:     var(--lf-font-accent);

	/* --- Token --lf-* usati dai componenti ma assenti nel tema --- */
	--lf-borgogna-soft:       #6e1c41; /* uguale in dark e light */
	--lf-borgogna-soft-hover: #8a2654; /* uguale in dark e light */
	--lf-divider-dark:        var(--lf-divider); /* il divider del tema flippa già (rame .06/.14) */

	/* --- Scala raggi / motion / z-index (theme-agnostic) --- */
	--r-xs:   4px;
	--r-sm:   8px;
	--r-md:   12px;
	--r-lg:   14px;
	--r-xl:   20px;
	--r-2xl:  24px;
	--r-pill: 100px;
	--t-fast: .25s;
	--t-base: var(--lf-t-base);
	--t-slow: .7s;
	--ease:     var(--lf-ease);
	--ease-out: cubic-bezier(0, 0, .2, 1);
	--z-header: 50;
	--z-modal:  100;

	/* --- Valori che divergono per tema: qui i valori DARK, light sotto --- */
	--bg-warm:           #f0ebe3;
	--fg-on-light:       #2a2233;
	--lf-borgogna-glow:  rgba(139, 34, 82, .35);
	--lf-divider-light:  rgba(139, 34, 82, .08);
	--sh-2:              0 8px 32px rgba(0, 0, 0, .32);
	--sh-3:              0 16px 48px rgba(0, 0, 0, .45);
	--sh-glow-borgogna:  0 8px 32px var(--lf-borgogna-glow);
}

[data-theme="light"] {
	--bg-warm:           #ddd2bb;
	--fg-on-light:       #1a1418;
	--lf-borgogna-glow:  rgba(110, 28, 65, .22);
	--lf-divider-light:  rgba(110, 28, 65, .14);
	--sh-2:              0 4px 14px rgba(26, 20, 24, .08), 0 1px 3px rgba(26, 20, 24, .04);
	--sh-3:              0 8px 24px rgba(26, 20, 24, .12), 0 2px 6px rgba(26, 20, 24, .06);
	--sh-glow-borgogna:  0 6px 20px rgba(110, 28, 65, .22);
}

/* --- Token aggiunti dal blocco HOME (porting kit.css → home.css). Additivo:
   scale tipografiche/spaziature/lettering theme-agnostic + due valori che
   divergono per tema (fg-on-light-muted, lf-card-hover). Zero delta sulle
   regole esistenti (solo nuove custom property). --- */
:root {
	--sec-pad-y:         clamp(64px, 10vw, 120px);
	--sec-pad-x:         clamp(20px, 7vw, 120px);
	--fs-display-1:      clamp(46px, 8vw, 92px);
	--fs-h1:             clamp(34px, 5vw, 54px);
	--fs-lead:           clamp(17px, 2vw, 21px);
	--ls-tight:          -0.02em;
	--ls-wide:           0.08em;
	--ls-wider:          0.14em;
	--ls-widest:         0.22em;
	--r-3xl:             32px;
	--lf-avorio-dim:     rgba(var(--fg-rgb), .72);
	--sh-card-light:     var(--sh-3);
	--fg-on-light-muted: #6a6172;
	--lf-card-hover:     #2c2535;
}

[data-theme="light"] {
	--fg-on-light-muted: #5a4e4a;
	--lf-card-hover:     #ffffff;
}

/* --- Token aggiunti dal blocco CHI SIAMO (porting about.css). Additivo:
   `--lf-card-bg` è l'alias del fondo card (= --lf-card, auto-flip dark/light);
   `--fg-dim` è il foreground attenuato del design system (alpha 0.55 dark /
   0.6 light sul canale --fg-rgb, che flippa da solo). Zero delta sulle regole
   esistenti (solo nuove custom property). --- */
:root {
	--lf-card-bg: var(--lf-card);
	--fg-dim:     rgba(var(--fg-rgb), .55);
}

[data-theme="light"] {
	--fg-dim: rgba(var(--fg-rgb), .6);
}

/* --- Token aggiunti dal blocco SPHERIKA (porting audio-player.css +
   podcast.css). I bordi card del demo (`--lf-card-border` /
   `--lf-card-border-strong`) sono già definiti in core.css con flip dark/light;
   li ri-esponiamo qui nell'alias layer per rendere esplicita la dipendenza del
   porting (come per --lf-divider-dark). Stessi valori di core.css → zero delta
   visivo. Dark in :root, light nel blocco [data-theme="light"]. --- */
:root {
	--lf-card-border:        rgba(196, 149, 106, .12);
	--lf-card-border-strong: rgba(196, 149, 106, .22);
}

[data-theme="light"] {
	--lf-card-border:        rgba(143, 98, 64, .16);
	--lf-card-border-strong: rgba(143, 98, 64, .30);
}