/* weos-skin.css — TEMA CONDIVISO WhateverOS (mission-control / metaverso) — 10/11/2026.
   Applica le skill di design (theme-factory = token coerenti; frontend-design = tipografia/spaziatura intenzionali).
   SICURO/ADDITIVO: va linkato come PRIMA riga del <head>, così gli stili propri di ogni pagina (più avanti nel
   sorgente) vincono e NON si stravolge nulla. Le pagine spoglie ereditano la veste; quelle già vestite restano. */

:root{
  /* palette mission-control (dalla plancia, riferimento Owner) */
  --w-bg:#06090f; --w-s1:#0a0f1a; --w-s2:#0e1520; --w-bd:#1a2d42;
  --w-tx:#c8d8e8; --w-mt:#5a738f; --w-hi:#e6f2ff;
  --w-ac:#00d4ff;   /* ciano */
  --w-mg:#a855f7;   /* viola */
  --w-gn:#22c55e;   /* verde */
  --w-yw:#f59e0b;   /* oro/ambra */
  --w-bad:#ef4444;
  /* tipografia */
  --w-font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --w-mono:'JetBrains Mono','Fira Code',ui-monospace,monospace;
  --w-display:'Space Grotesk','Inter',system-ui,sans-serif;
  /* scala tipografica e spaziatura (frontend-design) */
  --w-r:12px; /* raggio card */
}

/* baseline SOLO per pagine spoglie: gli stili della pagina, se ci sono, vincono perché vengono dopo nel sorgente */
html{ -webkit-text-size-adjust:100%; }
body{
  background:
    radial-gradient(1200px 700px at 18% -8%, rgba(0,212,255,.08), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(168,85,247,.07), transparent 55%),
    var(--w-bg);
  color:var(--w-tx);
  font-family:var(--w-font);
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:var(--w-ac); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* titoli: look metaverso (display font + bilanciamento). Non tocca pagine che ridefiniscono h1/h2. */
h1,h2,h3{ font-family:var(--w-display); color:var(--w-hi); text-wrap:balance; letter-spacing:.2px; }
h1{ font-size:clamp(20px,3vw,30px); font-weight:700; }
h2{ font-size:clamp(16px,2.2vw,22px); font-weight:700; }

/* selezione e scrollbar coerenti col tema */
::selection{ background:rgba(0,212,255,.30); color:#fff; }
*{ scrollbar-width:thin; scrollbar-color:var(--w-bd) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--w-bd); border-radius:8px; }
*::-webkit-scrollbar-track{ background:transparent; }

/* ---- utility OPT-IN (una pagina le usa se vuole la veste senza riscrivere CSS) ---- */
.weos-wrap{ max-width:1200px; margin:0 auto; padding-left:max(16px,env(safe-area-inset-left,0)); padding-right:max(16px,env(safe-area-inset-right,0)); }
.weos-card{ background:var(--w-s1); border:1px solid var(--w-bd); border-radius:var(--w-r); padding:14px 16px; }
.weos-card:hover{ border-color:var(--w-ac); }
.weos-btn{ display:inline-block; font-family:var(--w-mono); font-size:13px; font-weight:700; color:#06090f;
  background:var(--w-ac); border:1px solid var(--w-ac); border-radius:10px; padding:8px 14px; cursor:pointer; }
.weos-btn.ghost{ color:var(--w-ac); background:transparent; }
.weos-tag{ font-family:var(--w-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--w-mt); }
.weos-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
.weos-glow{ box-shadow:0 10px 40px -12px rgba(0,212,255,.25); }