/* ==========================================================================
   DESIGN TOKENS — veronicapaganessi.it
   Tutte le scelte visive del sito partono da qui: colori, font, spaziature,
   raggi, ombre, durate delle animazioni e intensità dell'effetto "ambient".
   Modificando questi valori si aggiorna l'intero sito.
   ========================================================================== */

/* Colore ambient animabile: registrandolo con @property il browser può
   interpolarlo, così il cambio di palette dello sfondo è una dissolvenza. */
@property --ambient {
  syntax: "<color>";
  inherits: true;
  initial-value: #279170;
}

:root {
  color-scheme: light;

  /* ---- Palette di brand ------------------------------------------------ */
  --brand-green: #279170;       /* verde del logo (biglietto da visita) */
  --brand-green-light: #9fd6b0; /* verde chiaro della sfumatura del logo */
  --brand-green-deep: #1f7a5c;  /* verde del logo scurito: testi e pulsanti (contrasto AA) */
  --brand-green-soft: #e3f2e9;  /* fondo tenue di chip e icone */
  --brand-sand: #c9a27e;        /* legno e pareti calde dello studio */
  --brand-butterfly: var(--brand-green);             /* farfalla "mi piace": contorno */
  --brand-butterfly-light: var(--brand-green-light); /* farfalla "mi piace": ali */

  /* ---- Colori semantici (tema chiaro) ----------------------------------- */
  --color-bg: #faf7f2;
  --color-surface: #ffffff;
  --color-surface-2: #f1ece4;
  --color-text: #1c2427;
  --color-text-muted: #5b6669;
  --color-border: rgb(28 36 39 / 0.1);
  --color-accent: var(--brand-green-deep);
  --color-accent-soft: var(--brand-green-soft);
  --color-on-accent: #ffffff;
  --color-glass: rgb(250 247 242 / 0.72);
  --color-focus: var(--brand-green-deep);

  /* ---- Effetto ambient (stile YouTube) --------------------------------- */
  --ambient-strength: 34%;      /* quanto il colore della foto tinge la pagina */
  --ambient-duration: 1.2s;     /* durata della dissolvenza fra palette */
  --glow-blur: 56px;            /* sfocatura del bagliore attorno alle foto */
  --glow-opacity: 0.55;
  --glow-spread: 6%;           /* quanto il bagliore sborda sopra e sotto la foto */
  --glow-saturate: 1.5;

  /* ---- Tipografia ------------------------------------------------------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Outfit", var(--font-sans);   /* titoli — @font-face in fonts.css */

  /* Scala del testo: la cambia il visitatore dal pannello Opzioni (vedi in fondo
     al file). Ingrandisce solo i caratteri, non spazi e layout. */
  --text-scale: 1;

  --text-xs: calc(0.75rem * var(--text-scale));
  --text-sm: calc(0.875rem * var(--text-scale));
  --text-base: calc(1rem * var(--text-scale));
  --text-md: calc(1.0625rem * var(--text-scale));
  --text-lg: calc(clamp(1.15rem, 1.05rem + 0.5vw, 1.3rem) * var(--text-scale));
  --text-xl: calc(clamp(1.4rem, 1.2rem + 1vw, 1.75rem) * var(--text-scale));
  --text-2xl: calc(clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem) * var(--text-scale));

  --leading-tight: 1.2;
  --leading-normal: 1.55;

  /* ---- Spaziature (scala 4px) ------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* ---- Layout ----------------------------------------------------------- */
  --feed-width: 34rem;          /* larghezza massima del feed su desktop */
  --gutter: var(--space-4);
  --safe-top: env(safe-area-inset-top, 0px);
  --nav-height: 4.25rem;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---- Forme e ombre ---------------------------------------------------- */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-md: 0 8px 24px -8px rgb(0 0 0 / 0.18);
  --shadow-nav: 0 10px 30px -10px rgb(0 0 0 / 0.25);

  /* ---- Movimento -------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 160ms;
  --duration: 320ms;
  --duration-slow: 600ms;

  /* ---- Anello "storia" attorno all'avatar ------------------------------- */
  --ring-gradient: conic-gradient(from 0deg, var(--brand-green), var(--brand-green-light), var(--brand-sand), var(--brand-green));
}

/* Tema scuro: attivo con <html data-theme="dark">. L'attributo lo imposta lo
   script nell'head di index.html: scelta salvata dal pannello Accessibilità
   o, in sua assenza, preferenza di sistema dell'utente. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --brand-green-soft: #173a2c;

  --color-bg: #0f1416;
  --color-surface: #161d20;
  --color-surface-2: #1d262a;
  --color-text: #eef2f1;
  --color-text-muted: #a3b0b2;
  --color-border: rgb(238 242 241 / 0.12);
  --color-accent: #8fd6ae;      /* verde chiaro del logo, leggibile sul fondo scuro */
  --color-on-accent: #0b1d15;
  --color-glass: rgb(15 20 22 / 0.7);
  --color-focus: #8fd6ae;

  --ambient-strength: 30%;
  --glow-opacity: 0.6;
  --shadow-md: 0 8px 24px -8px rgb(0 0 0 / 0.6);
  --shadow-nav: 0 10px 30px -10px rgb(0 0 0 / 0.7);
}

/* Dimensione del testo scelta dal visitatore: <html data-text-size="-1…3">,
   impostato dallo script nell'head e da main.js (sezione 10). Aggiungendo o
   togliendo un livello, aggiornare TEXT_SIZE_MIN / TEXT_SIZE_MAX in main.js. */
:root[data-text-size="-1"] { --text-scale: 0.9; }
:root[data-text-size="1"] { --text-scale: 1.15; }
:root[data-text-size="2"] { --text-scale: 1.3; }
:root[data-text-size="3"] { --text-scale: 1.5; }

/* Schermi più ampi: un po' più di respiro */
@media (min-width: 48rem) {
  :root {
    --gutter: var(--space-6);
  }
}