/* Generato da src/design (vite.config.ts): non modificare qui. */
/* ==========================================================================
   Design system di Quadriamo 1.0. Ogni valore ha un significato; i componenti usano solo questi.
   L'interfaccia è disegnata sulla superficie dello schermo: niente ombre, niente gradienti, niente card.
   La profondità viene da spazio, tipografia e contrasto.
   Colore: carta e inchiostro. Le uniche tinte sono i quattro blocchi (--b1…--b4) e il rosso dello sforamento.
   L'azione principale è inchiostro: così un colore significa sempre una parte del budget.
   ========================================================================== */
/* Testo: SF Pro su iPhone, iPad e Mac (font di sistema, non si scarica); Inter altrove (licenza OFL, /fonts/Inter-LICENSE.txt).
   Inter si scarica solo dove serve: sui dispositivi Apple il browser usa SF Pro e non la chiede. */
@font-face { font-family: "Inter"; src: url("../fonts/Inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
/* Marchio "Quadriamo." (solo il logo) */
@font-face { font-family: "DM Serif Display"; src: url("../fonts/DMSerifDisplay-Regular.ttf") format("truetype"); font-display: swap; }

:root {
  /* filo delle superfici in vetro (il vetro stesso è in backgrounds.css) */
  --glass-line: color-mix(in srgb, var(--text) 9%, transparent);
  /* colore: carta, inchiostro (tre intensità), linea sottile, riempimento dei controlli */
  --bg: #F6F4EF; --surface: #F6F4EF; --text: #17181A; --muted: #5C5F64; --faint: #A3A5A8;
  --line: rgba(23,24,26,.09); --fill: rgba(23,24,26,.05); --fill-2: rgba(23,24,26,.09);
  --accent: #17181A; --on-accent: #F6F4EF;
  --good: #1F7A45; --good-bg: rgba(31,122,69,.09); --bad: #B42318; --bad-bg: rgba(180,35,24,.08); --warn: #A15C07; --warn-bg: rgba(161,92,7,.09);
  /* i quattro blocchi: Essenziali, Qualità della vita, Fondo di sicurezza, Investimenti */
  --b1: #C2410C; --b2: #E8915F; --b3: #D9BE9A; --b4: #8C8F94;
  /* spazio: griglia di 4 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px;
  /* forma: blocchi, controlli, foglio. Il cerchio solo per ciò che è davvero rotondo (interruttore, punto) */
  --r-sm: 3px; --r-md: 10px; --r-lg: 16px; --r-xl: 16px; --r-full: 999px;
  --e1: none; --e3: none;
  /* tipografia: sei dimensioni, due pesi, numeri tabulari ovunque */
  --font-ui: -apple-system, BlinkMacSystemFont, "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-brand: "DM Serif Display", Georgia, serif;
  --t-hero: 60px; --t-title: 28px; --t-h2: 20px; --t-body: 16px; --t-sm: 13px; --t-cap: 11px;
  --w-strong: 600;
  /* movimento: due molle (calcolate da rigidità e smorzamento, vedi docs/DESIGN.md) e una dissolvenza */
  --d-fast: 160ms; --d-base: 240ms; --d-spring: 420ms;
  --ease: cubic-bezier(.2,.8,.2,1);
  --spring-snappy: linear(0, .05, .165, .304, .445, .573, .683, .772, .842, .896, .934, .962, .98, .993, 1, 1.004, 1.006, 1.006, 1.006, 1.005, 1.004, 1.004, 1.003, 1.002, 1);
  --spring-gentle: linear(0, .047, .156, .288, .422, .546, .654, .743, .814, .869, .911, .942, .964, .979, .989, .996, 1, 1.002, 1.003, 1.003, 1.003, 1.003, 1.002, 1.002, 1);
  --spring: var(--spring-snappy);
  /* struttura */
  --bar-h: 62px; --bar-gap: max(var(--s2), calc(env(safe-area-inset-bottom) - var(--s2))); --top-h: 0px; --gutter: 20px;
  /* distanza del titolo dal bordo alto: subito sotto la Dynamic Island o la barra di stato (iPhone),
     un po' di respiro dove l'area sicura non c'è (Android, tablet), di più sul computer */
  --top-gap: max(calc(env(safe-area-inset-top) + 4px), clamp(12px, 3vw, 32px));
  --column: 680px;   /* colonna di lettura su tablet e computer */
  color-scheme: light;
  font: 16px/1.5 var(--font-ui);
  font-variant-numeric: tabular-nums;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1012; --surface: #0F1012; --text: #EDEBE6; --muted: #BABDC2; --faint: #5E6166;
    --line: rgba(237,235,230,.1); --fill: rgba(237,235,230,.06); --fill-2: rgba(237,235,230,.11);
    --accent: #EDEBE6; --on-accent: #0F1012;
    --good: #4CC27A; --good-bg: rgba(76,194,122,.12); --bad: #F2675C; --bad-bg: rgba(242,103,92,.12); --warn: #E5A13A; --warn-bg: rgba(229,161,58,.12);
    --b1: #E0602A; --b2: #E8915F; --b3: #CDB18C; --b4: #8C8F94;
    color-scheme: dark;
}
}
:root[data-theme="dark"] {
  --bg: #0F1012; --surface: #0F1012; --text: #EDEBE6; --muted: #BABDC2; --faint: #5E6166;
  --line: rgba(237,235,230,.1); --fill: rgba(237,235,230,.06); --fill-2: rgba(237,235,230,.11);
  --accent: #EDEBE6; --on-accent: #0F1012;
  --good: #4CC27A; --good-bg: rgba(76,194,122,.12); --bad: #F2675C; --bad-bg: rgba(242,103,92,.12); --warn: #E5A13A; --warn-bg: rgba(229,161,58,.12);
  --b1: #E0602A; --b2: #E8915F; --b3: #CDB18C; --b4: #8C8F94;
  color-scheme: dark;
}

/* Sfondi per sezione (background.home, .news, .analysis, .investments, .profile).
   Lo sfondo è uno strato fisso dietro tutto: colore base, un gradiente lento verso un secondo tono e due luci diffuse.
   Le schermate non definiscono colori: ereditano dalla sezione (data-section su <html>, lo imposta la navigazione).
   Cambiando sezione i colori evolvono (proprietà registrate, ~650 ms, molla lenta). Senza sezione (ingresso): home. */
@property --bg-a { syntax: '<color>'; inherits: true; initial-value: #F3F5F5; }
@property --bg-b { syntax: '<color>'; inherits: true; initial-value: #E8F0F0; }
@property --bg-l { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --bg-m { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --bg-t { syntax: '<color>'; inherits: true; initial-value: #D6E2E6; }   /* il colore della sezione, pieno in alto */

:root { transition: --bg-a 650ms var(--spring-gentle), --bg-b 650ms var(--spring-gentle), --bg-l 650ms var(--spring-gentle), --bg-m 650ms var(--spring-gentle), --bg-t 650ms var(--spring-gentle); }
:root, :root[data-section="home"] { --bg-a: #F3F5F5; --bg-b: #E8F0F0; --bg-l: rgba(255,255,255,.75); --bg-m: rgba(160,200,205,.18); --bg-t: #D6E2E6; }
:root[data-section="news"] { --bg-a: #F4F4F3; --bg-b: #ECEFF2; --bg-l: rgba(255,255,255,.8); --bg-m: rgba(190,210,225,.20); --bg-t: #DFE4EA; }
:root[data-section="analysis"] { --bg-a: #F3F3F7; --bg-b: #ECEBF5; --bg-l: rgba(255,255,255,.75); --bg-m: rgba(170,160,220,.16); --bg-t: #DFDDEC; }
:root[data-section="investments"] { --bg-a: #F1F5F2; --bg-b: #E8F1EE; --bg-l: rgba(255,255,255,.75); --bg-m: rgba(140,195,175,.17); --bg-t: #D7E5DE; }
:root[data-section="profile"] { --bg-a: #F4F4F2; --bg-b: #EDEFF2; --bg-l: rgba(255,255,255,.8); --bg-m: rgba(180,190,205,.16); --bg-t: #E1E4EA; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]), :root:not([data-theme="light"])[data-section="home"] { --bg-a: #0B141D; --bg-b: #0D2329; --bg-l: rgba(110,165,185,.10); --bg-m: rgba(40,110,120,.14); --bg-t: #1C3F52; }
  :root:not([data-theme="light"])[data-section="news"] { --bg-a: #111316; --bg-b: #151B24; --bg-l: rgba(200,225,240,.07); --bg-m: rgba(90,110,140,.10); --bg-t: #273242; }
  :root:not([data-theme="light"])[data-section="analysis"] { --bg-a: #0D0F1F; --bg-b: #17132C; --bg-l: rgba(140,130,225,.09); --bg-m: rgba(90,60,150,.12); --bg-t: #2C2B55; }
  :root:not([data-theme="light"])[data-section="investments"] { --bg-a: #08161A; --bg-b: #0A221F; --bg-l: rgba(110,190,160,.08); --bg-m: rgba(30,110,110,.12); --bg-t: #173D3A; }
  :root:not([data-theme="light"])[data-section="profile"] { --bg-a: #111317; --bg-b: #151A22; --bg-l: rgba(170,180,200,.06); --bg-m: rgba(70,85,110,.10); --bg-t: #2A303B; }
}
:root[data-theme="dark"], :root[data-theme="dark"][data-section="home"] { --bg-a: #0B141D; --bg-b: #0D2329; --bg-l: rgba(110,165,185,.10); --bg-m: rgba(40,110,120,.14); --bg-t: #1C3F52; }
:root[data-theme="dark"][data-section="news"] { --bg-a: #111316; --bg-b: #151B24; --bg-l: rgba(200,225,240,.07); --bg-m: rgba(90,110,140,.10); --bg-t: #273242; }
:root[data-theme="dark"][data-section="analysis"] { --bg-a: #0D0F1F; --bg-b: #17132C; --bg-l: rgba(140,130,225,.09); --bg-m: rgba(90,60,150,.12); --bg-t: #2C2B55; }
:root[data-theme="dark"][data-section="investments"] { --bg-a: #08161A; --bg-b: #0A221F; --bg-l: rgba(110,190,160,.08); --bg-m: rgba(30,110,110,.12); --bg-t: #173D3A; }
:root[data-theme="dark"][data-section="profile"] { --bg-a: #111317; --bg-b: #151A22; --bg-l: rgba(170,180,200,.06); --bg-m: rgba(70,85,110,.10); --bg-t: #2A303B; }

/* il colore di base è anche quello di <html> (bordi, rimbalzo, barre di sistema): niente fasce di un altro colore */
:root, :root:not([data-theme="light"]), :root[data-theme="dark"] { --bg: var(--bg-a); --surface: var(--bg-a); }
/* il colore di base lo porta <html>: il body resta trasparente, altrimenti coprirebbe lo strato con i gradienti */
html { background: var(--bg-a); }
body { background: transparent; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(90% 45% at 75% 0%, var(--bg-l), transparent 70%),
    radial-gradient(100% 55% at -10% 105%, var(--bg-m), transparent 70%),
    radial-gradient(70% 40% at 10% 30%, color-mix(in srgb, var(--bg-l) 60%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg-t) 0%, color-mix(in srgb, var(--bg-t) 55%, var(--bg-a)) 24%, var(--bg-a) 58%, var(--bg-b) 100%); }
/* grana quasi invisibile: la superficie sembra un materiale satinato, non un'immagine piatta (un SVG minuscolo, generato, nessun file) */
body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* vetro discreto: solo sulle superfici che stanno sopra il contenuto (barra in basso, pannelli) */
:root { --glass: color-mix(in srgb, var(--bg-a) 88%, transparent); --glass-strong: color-mix(in srgb, var(--bg-a) 90%, transparent); }

/* Movimento: un solo vocabolario di animazioni, ognuna con un nome che dice cosa fa.
   "Riduci movimento" del sistema: tutto arriva subito allo stato finale (una regola sola, non eccezioni sparse). */

/* entrate e uscite */
@keyframes fade { from { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } }
@keyframes tab-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sub-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes panel-in { from { opacity: 0; transform: translateY(24px); } }
@keyframes step-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes from-left { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes from-right { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes leave { to { opacity: 0; transform: translateY(-18px) scale(.98); } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-down { to { transform: translateY(100%); } }
/* conferme e attenzione */
@keyframes pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
@keyframes pop-in { from { opacity: 0; transform: translateX(-50%) scale(.6); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes block-in { from { transform: scale(0); opacity: 0; } }
@keyframes breathe { 50% { transform: scale(.94); } }
@keyframes ping { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes ring { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(14deg); } 20%, 40% { transform: rotate(-14deg); } 50% { transform: rotate(6deg); } }
@keyframes flame { 0%, 100% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.08) rotate(3deg); } }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
@keyframes pulse { to { opacity: .3; } }
@keyframes shimmer { to { background-position: -200% 0; } }
/* dati che si riempiono */
@keyframes grow { from { transform: scaleX(0); } }
@keyframes grow-x { from { transform: scaleX(0); opacity: 0; } }
@keyframes bar-up { from { transform: scaleY(0); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes seg-in { from { opacity: 0; } }
@keyframes donut-spin { from { transform: rotate(-200deg) scale(.85); opacity: 0; } to { transform: rotate(-90deg) scale(1); opacity: 1; } }
/* ingresso e tutorial */
@keyframes bob-down { 50% { transform: translateX(-50%) translateY(10px) rotate(90deg); } }
@keyframes bob-ur { 50% { transform: translate(6px, -8px) rotate(-60deg); } }
@keyframes bob-ul { 50% { transform: translate(-6px, -8px) rotate(-120deg); } }
@keyframes bob-dr { 50% { transform: translate(6px, 8px) rotate(60deg); } }

/* pagine: il cambio di scheda è istantaneo (come in iOS e Android); si anima solo ciò che spiega qualcosa:
   la pagina di dettaglio entra da destra (sei "dentro" una voce), le schede di Analisi si scambiano con una dissolvenza */
.view-in { }   /* il cambio di scheda è immediato: niente dissolvenza generica */
.sub-in { animation: sub-in var(--d-spring) var(--spring-snappy) backwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* "Riduci animazioni" scelto nell'app (Profilo -> Vibrazione e movimento): la stessa regola, anche se il sistema non lo chiede */
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
  transition-duration: .01ms !important; scroll-behavior: auto !important; }

/* una voce che diventa la pagina (kit/motion → morph): il nome si sposta e cresce fino al titolo, il resto si dissolve.
   Mentre succede, la pagina non entra anche da destra: un movimento solo. */
[data-morph] { width: fit-content; max-width: 100%; }
::view-transition-group(morph) { animation-duration: var(--d-spring); animation-timing-function: var(--spring-snappy); }
::view-transition-old(morph), ::view-transition-new(morph) { height: 100%; object-fit: contain; }
::view-transition-old(root) { animation-duration: var(--d-fast); }
::view-transition-new(root) { animation-duration: var(--d-base); }
:root.morphing .sub-in { animation: none; }