/* =====================================================================
   FF Theme · base
   Token, reset e stili comuni. Valori presi dai concept (cartella pagine/):
   se cambia il concept, si cambiano qui le variabili, non i componenti.
   Il guscio (header, barra, pannelli, configuratore) è in guscio.css.
   ===================================================================== */

:root{
  /* Palette: grafite caldo + grigio carta, un solo accento magenta */
  --ff-ink:#141312; --ff-ink-2:#1d1b19;
  --ff-paper:#e6e2dc; --ff-paper-2:#f1eee9;
  --ff-bone:#ece7e0; --ff-char:#1b1917;
  --ff-magenta:#e5337a; --ff-magenta-ink:#c2185f;

  /* Token di scena: cambiano con data-tone sul body (o su una sezione, sul rail, sulla barra) */
  --bg:var(--ff-ink); --surface:var(--ff-ink-2); --fg:var(--ff-bone);
  --muted:#9b958d; --line:rgba(236,231,224,.14); --accent:var(--ff-magenta); --on-accent:#fff;

  /* Tipografia (font locali in /fonts) */
  --ff-sans:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif;
  --ff-serif:'Bodoni Moda','Didot','Bodoni 72',Georgia,serif;
  --ff-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;

  /* Movimento */
  --ff-ease-out:cubic-bezier(.2,.8,.2,1); --ff-ease-io:cubic-bezier(.7,0,.2,1);
  --ff-t-fast:160ms; --ff-t-mid:320ms; --ff-t-scene:700ms;

  /* Misure: header, barra inferiore, margini laterali comuni a tutte le pagine.
     Il margine (80–128 px) lascia aria al navigatore verticale; oltre 1680 px il contenuto resta centrato.
     Header e barra in basso restano a 16 px dai bordi (cornice dell'app). */
  --ff-head:64px; --ff-barh:52px;
  --ff-gutter:max(16px,env(safe-area-inset-left,0px)); --ff-gutter-r:max(16px,env(safe-area-inset-right,0px));
  --ff-rail:clamp(96px,8.5vw,148px);
  --ff-side:clamp(80px,7vw,128px); --ff-side-r:var(--ff-side); --ff-maxw:1680px;
  --ff-pad-l:max(var(--ff-side),calc((100% - var(--ff-maxw)) / 2));
  --ff-pad-r:max(var(--ff-side-r),calc((100% - var(--ff-maxw)) / 2));
  --ff-vgap:clamp(10px,2.4vh,22px);
  color-scheme:dark;
}
/* toni: si applicano al body, a una singola sezione, al rail o alla barra (il JS mette data-tone) */
[data-tone="dark"]{
  --bg:var(--ff-ink); --surface:var(--ff-ink-2); --fg:var(--ff-bone);
  --muted:#9b958d; --line:rgba(236,231,224,.14); --accent:var(--ff-magenta);
  color-scheme:dark;
}
[data-tone="light"]{
  --bg:var(--ff-paper); --surface:var(--ff-paper-2); --fg:var(--ff-char);
  --muted:#6d6862; --line:rgba(27,25,23,.16); --accent:var(--ff-magenta-ink);
  color-scheme:light;
}
/* sotto i 900 px niente navigatore verticale: margini laterali di 16 px, barra più alta */
@media (max-width:899px){
  :root{--ff-rail:var(--ff-gutter);--ff-barh:60px;--ff-side:var(--ff-gutter);--ff-side-r:var(--ff-gutter-r)}
}

/* token di colore registrati: al cambio di tono transitano tutti insieme (niente "flash" di header e barra) */
@property --bg{syntax:'<color>';inherits:true;initial-value:#141312}
@property --surface{syntax:'<color>';inherits:true;initial-value:#1d1b19}
@property --fg{syntax:'<color>';inherits:true;initial-value:#ece7e0}
@property --muted{syntax:'<color>';inherits:true;initial-value:#9b958d}
@property --line{syntax:'<color>';inherits:true;initial-value:rgba(236,231,224,.14)}
@property --accent{syntax:'<color>';inherits:true;initial-value:#e5337a}

/* ===== Reset essenziale ===== */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:400 1.0625rem/1.55 var(--ff-sans);-webkit-font-smoothing:antialiased;
  transition:--bg 600ms var(--ff-ease-io),--surface 600ms var(--ff-ease-io),--fg 600ms var(--ff-ease-io),--muted 600ms var(--ff-ease-io),--line 600ms var(--ff-ease-io),--accent 600ms var(--ff-ease-io);
}
/* fascia dell'area sicura in alto (telefoni con notch) col colore della pagina */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
img,svg,video{max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
em{font-family:var(--ff-serif);font-style:italic;font-weight:400;letter-spacing:-.01em;font-size:1.04em}

/* ===== Utilità ===== */
.ff-skip{position:absolute;left:-999px;top:0}
.ff-skip:focus{left:16px;top:12px;z-index:100;background:var(--accent);color:var(--on-accent);padding:8px 14px}
.ff-mono{font-family:var(--ff-mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ===== Pulsanti e link ===== */
.ff-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;height:42px;padding:0 18px;border:1px solid var(--fg);background:transparent;
  font-weight:600;font-size:.95rem;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color var(--ff-t-fast),color var(--ff-t-fast),border-color var(--ff-t-fast);
}
.ff-btn:hover{background:var(--fg);color:var(--bg)}
.ff-btn:active{transform:translateY(1px)}
.ff-btn--solid{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ff-btn--solid:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.ff-btn--sm{height:36px;padding:0 14px;font-size:.88rem}
.ff-btn[disabled],.ff-btn[aria-busy="true"]{opacity:.55;cursor:progress}
.ff-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:2px}
.ff-link:hover{color:var(--accent)}

/* ===== Template provvisori (pagine generiche, articoli, 404): una sola sezione =====
   Le pagine vere arrivano nella fase 5; qui basta che il guscio funzioni. */
.ff-wrap{padding:calc(var(--ff-head) + 40px) var(--ff-pad-r) calc(var(--ff-barh) + 56px) var(--ff-pad-l);min-height:100vh;min-height:100svh;background:var(--bg);color:var(--fg)}
.ff-wrap h1{font-size:clamp(2.2rem,5vw,4.4rem);font-weight:600;letter-spacing:-.035em;line-height:1;margin:0 0 24px;text-wrap:balance}
.ff-prose{max-width:70ch}