/* Palette presa dal tema dell'app (src/ui/theme.ts): il sito e l'app devono
   sembrare la stessa cosa, non due progetti diversi. */
:root {
  --ocean-900:#083F42; --ocean-700:#0C6B68; --ocean-500:#28A49B;
  --sand:#F7EBCF; --sand-light:#FFF9EA; --coral:#EC795C;
  --ink:#183336; --ink-muted:#5B7070; --line:rgba(8,63,66,.13);
  --bg:var(--sand-light); --fg:var(--ink); --muted:var(--ink-muted);
  --card:#fff; --accent:var(--ocean-700);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0B1F21; --fg:#E9F1EF; --muted:#9CB2B0;
    --line:rgba(255,255,255,.14); --card:#12292B; --accent:#7FD4C9;
  }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font:17px/1.65 "Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
main { max-width:44rem; margin:0 auto; padding:2.5rem 1.25rem 4rem; }
h1,h2,h3 { font-family:"Fraunces",Georgia,"Times New Roman",serif; font-weight:700; }
h1 { font-size:2.15rem; line-height:1.15; margin:0 0 .4rem; letter-spacing:-.01em; }
h2 { font-size:1.3rem; margin:2.6rem 0 .6rem; }
h3 { font-size:1.05rem; margin:1.7rem 0 .4rem; }
p, li { margin:.6rem 0; }
ul { padding-left:1.2rem; }
a { color:var(--accent); }
a:hover { text-decoration:none; }
.sub { color:var(--muted); margin:0 0 2rem; }
.box { background:var(--card); border:1px solid var(--line); border-radius:14px;
       padding:1.05rem 1.2rem; margin:1.3rem 0; }
hr { border:0; border-top:1px solid var(--line); margin:2.6rem 0; }
table { border-collapse:collapse; width:100%; margin:1rem 0; font-size:.95rem; }
th, td { text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; }
.wrap { overflow-x:auto; }

/* Barra in cima: identita' + cambio lingua, uguale su ogni pagina. */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:1rem;
          max-width:44rem; margin:0 auto; padding:1.25rem 1.25rem 0; }
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--fg); }
.brand img { width:34px; height:34px; border-radius:9px; display:block; }
.brand span { font-family:"Fraunces",Georgia,serif; font-weight:700; font-size:1.05rem; }
.lang { font-size:.9rem; color:var(--muted); }
.lang a { margin-left:.5rem; }

footer { max-width:44rem; margin:0 auto; padding:0 1.25rem 3rem;
         color:var(--muted); font-size:.9rem; }
footer a { color:var(--accent); }
.footlinks { display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:.7rem; }

/* Home */
.hero { background:var(--ocean-700); color:#fff; border-radius:20px;
        padding:2rem 1.5rem; margin:1.5rem 0 2rem; }
.hero h1 { color:#fff; margin-bottom:.6rem; }
.hero p { color:rgba(255,255,255,.88); margin:0; max-width:34rem; }
.pill { display:inline-block; margin-top:1.2rem; padding:.45rem .9rem; border-radius:999px;
        background:rgba(255,255,255,.16); color:#fff; font-size:.9rem; }
.cards { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); }
.cards a { display:block; text-decoration:none; color:inherit; background:var(--card);
           border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.2rem; }
.cards a:hover { border-color:var(--accent); }
.cards strong { display:block; font-family:"Fraunces",Georgia,serif; font-size:1.05rem; margin-bottom:.25rem; }
.cards span { color:var(--muted); font-size:.95rem; }