/* ═══════════════════════════════════════════════════════════════════════ astra-shell.css — Astra OS Design System "Knowledge Workers" FONTE UNICA dei design token. Superset canonico del north star (docs/design-studio.html + static/os.html :root, allineato verbatim). Linked by: index.html · cockpit.html · predator.html · profit-center.html os.html mantiene la sua copia inline (canonica gemella) — invariata. Estratto sess.8450 · elevato a superset + skin sess.9066 (fonte unica). DUE SKIN — stessi NOMI di token, valori diversi: · core (default) → mondo OS interno, accento VIOLA (--acc-violet) · client [data-skin=client] → mondo cliente, accento TEAL/GOLD (Decisione B) I componenti referenziano i token (--acc/--bg/--ink/--line): cambiano skin, non codice. Aggiungi data-skin="client" su per la faccia cliente. ═══════════════════════════════════════════════════════════════════════ */ :root{ /* ── ground + testo ── */ --bg:#08090d; --panel:#0e1016; --panel2:#11131a; --ink:#e9ecf2; --dim:#7a8190; --dim2:#8b929f; --line:#1c2029; --hair:#262b36; /* ── accenti ── */ --acc-violet:#9b5de5; --acc-orange:#ff8c00; --acc-teal:#00d4aa; --acc-blue:#5ec5ff; --acc-pink:#ff5e9c; --acc-yellow:#ffd400; --acc-red:#ff2e63; --acc:#9b5de5; --red-soft:#ff6b88; --pink-soft:#ff7a96; --violet-soft:#c9a9ff; /* ── tipografia ── */ --mono:'IBM Plex Mono',ui-monospace,monospace; --syne:'Syne',sans-serif; --geist-mono:'Geist Mono',ui-monospace,'IBM Plex Mono',monospace; /* ── gradiente firma + raggi + spaziatura ── */ --grad:linear-gradient(92deg,#ff8c00,#ff2e63 34%,#9b5de5 62%,#00d4aa); --r-xs:6px; --r-sm:8px; --r:10px; --r-md:12px; --r-lg:14px; --r-pill:999px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; /* ── elevazione + glow + superfici (overlay bianchi) ── */ --glow-violet:0 0 40px -8px rgba(155,93,229,.45); --glow-teal:0 0 30px -6px rgba(0,212,170,.5); --elev:0 10px 30px -12px rgba(0,0,0,.7); --surf-1:rgba(255,255,255,.02); --surf-2:rgba(255,255,255,.04); --surf-3:rgba(255,255,255,.05); --surf-4:rgba(255,255,255,.06); --surf-hi:rgba(255,255,255,.10); /* ── z-index + timing ── */ --z-dropdown:1000; --z-nav:1500; --z-scrim:2000; --z-modal:2100; --z-toast:3000; --z-dtip:4000; --t-fast:.12s; --t-base:.16s; --t-slow:.24s; --ease:cubic-bezier(.22,.61,.36,1); } /* ═══ SKIN «client» — mondo cliente (area-cliente · client dashboard) ═══ Teal/gold formalizzato (Decisione B sess.9066). Valori canonici presi da area-cliente.html v4 (la faccia cliente flagship). Stessi nomi di token: i componenti non cambiano, cambia solo l'identità cromatica. */ :root[data-skin="client"]{ --bg:#070f12; --panel:#0e1a20; --panel2:#102228; --ink:#eaf4f5; --dim:#86a0a8; --dim2:#9ab3ba; --line:#1b2b32; --hair:#22333a; --acc:#2dd4bf; --acc-teal:#2dd4bf; --acc-teal2:#22a89a; --acc-gold:#e9c46a; --card:#0e1a20; --card2:#102228; --glow-teal:0 0 30px -6px rgba(45,212,191,.5); } /* ═══ LOGIN GATE (verbatim da os.html — identico su ogni faccia) ═══ */ .gate{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:24px; background:radial-gradient(ellipse 90% 70% at 50% 0%,#11131a,#08090d 80%);font-family:var(--mono);color:var(--ink)} .gate.hidden{display:none} .gate-card{position:relative;z-index:1;width:100%;max-width:380px;background:var(--panel);border:1.5px solid var(--hair);border-radius:14px;padding:38px 30px 30px;text-align:center;box-shadow:0 40px 120px -40px #000} .gate-mark{font-family:var(--syne);font-weight:800;font-size:26px;letter-spacing:-.6px;display:inline-flex;align-items:center;gap:9px;justify-content:center} .gate-mark .mk{color:var(--acc-violet)} .gate-tag{margin-top:8px;font-size:10px;letter-spacing:2.6px;color:var(--dim);font-weight:600} .gate-msg{margin-top:22px;font-size:12.5px;color:var(--dim);line-height:1.55} .gbtn{margin-top:22px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:11px; background:#fff;color:#1f1f23;border:0;border-radius:9px;padding:13px 16px;font:600 13.5px var(--mono);cursor:pointer;transition:filter .15s,transform .12s} .gbtn:hover{filter:brightness(.94)} .gbtn:active{transform:translateY(1px)} .gbtn svg{width:18px;height:18px;flex:none} .gate-or{margin:18px 0 14px;font-size:10px;letter-spacing:2px;color:var(--dim);display:flex;align-items:center;gap:10px} .gate-or::before,.gate-or::after{content:"";flex:1;height:1px;background:var(--line)} .gate-pass{display:flex;gap:8px} .gate-pass input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:11px 13px;font:500 13px var(--mono);outline:none} .gate-pass input:focus{border-color:var(--acc-violet);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc-violet) 22%,transparent)} .gate-pass button{flex:none;background:var(--acc-violet);color:#08090d;border:0;border-radius:8px;padding:0 16px;font:700 12px var(--mono);letter-spacing:.5px;cursor:pointer;transition:filter .15s,transform .12s} .gate-pass button:hover{filter:brightness(1.08)} .gate-pass button:active{transform:translateY(1px)} .gate-err{margin-top:13px;font-size:11.5px;color:var(--acc-pink);min-height:1.2em} /* ═══ EMPTY / ERROR STATE — una sola voce (sostituisce le 3 divergenti) ═══ */ .state{margin:4px 0 24px;font-size:12.5px;color:var(--dim);border:1px dashed var(--hair); border-radius:8px;padding:14px 16px;line-height:1.5;display:flex;gap:10px;align-items:flex-start;font-family:var(--mono)} .state .ic{flex:none;font-size:15px;line-height:1.3} .state--loading{color:var(--dim);opacity:.75} .state--empty{color:var(--dim)} .state--error{color:var(--acc-yellow);border-color:color-mix(in srgb,var(--acc-yellow) 30%,var(--hair))} .state a{color:var(--acc-violet);text-decoration:none;transition:color .15s} .state a:hover{text-decoration:underline} /* ═══ A11Y — keyboard focus ring (North Star violet), scoped to shell controls ═══ */ .gbtn:focus-visible,.gate-pass button:focus-visible,.gate-pass input:focus-visible,.state a:focus-visible{ outline:2px solid var(--acc-violet);outline-offset:2px;border-radius:6px} /* ═══ A11Y — honour prefers-reduced-motion: neutralise shell transitions ═══ */ @media (prefers-reduced-motion:reduce){ .gbtn,.gate-pass button,.gate-pass input,.state a{transition:none} .gbtn:active,.gate-pass button:active{transform:none} }