/* ============================================================
Orbit UI — component library (plain CSS)
Light theme is the default. Add data-theme="dark" on any
ancestor (e.g. ) for the muted dark.
All classes are namespaced with .ob- to avoid collisions.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
/* ---------- Design tokens : LIGHT (default) ---------- */
:root {
--ob-bg:#f5f7fb; --ob-surface:#ffffff; --ob-surface-2:#f1f5f9; --ob-surface-3:#e8eef6;
--ob-border:#e6ebf2; --ob-border-strong:#cdd6e3;
--ob-text:#0f1b2d; --ob-text-2:#52617a; --ob-text-3:#98a4b8;
--ob-accent:#0e8aa3; --ob-accent-2:#0e7490; --ob-accent-hover:#0b7184; --ob-accent-soft:#e7f6f9; --ob-accent-ring:rgba(14,138,163,.22); --ob-on-accent:#ffffff;
--ob-success:#2f9e6f; --ob-success-soft:#e9f7f0; --ob-warn:#c0820f; --ob-warn-soft:#fbf3e3; --ob-danger:#d05661; --ob-danger-soft:#fbecee; --ob-info:#3b6fb0; --ob-info-soft:#eaf1fa;
--ob-shadow-sm:0 1px 2px rgba(15,23,42,.06),0 1px 1px rgba(15,23,42,.04);
--ob-shadow-md:0 6px 18px rgba(15,23,42,.09),0 2px 5px rgba(15,23,42,.05);
--ob-shadow-lg:0 20px 44px rgba(15,23,42,.13),0 6px 12px rgba(15,23,42,.07);
--ob-c1:#0e8aa3; --ob-c2:#7a76ad; --ob-c3:#2f9e6f; --ob-c4:#c0820f; --ob-c5:#d05661;
--ob-track:#e6ebf2; --ob-hairline:rgba(15,23,42,.05);
/* radii */
--ob-r-sm:6px; --ob-r-md:10px; --ob-r-lg:16px; --ob-r-pill:999px;
/* fonts */
--ob-font-display:'Space Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
--ob-font-sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--ob-font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;
}
/* ---------- Design tokens : DARK (muted) ---------- */
[data-theme="dark"] {
--ob-bg:#141619; --ob-surface:#1b1d22; --ob-surface-2:#23262d; --ob-surface-3:#2d313a;
--ob-border:#2a2e36; --ob-border-strong:#3b404a;
--ob-text:#e7e9ec; --ob-text-2:#9aa1ac; --ob-text-3:#6a717c;
--ob-accent:#5ba3b0; --ob-accent-2:#6f93b4; --ob-accent-hover:#6fb6c2; --ob-accent-soft:rgba(91,163,176,.12); --ob-accent-ring:rgba(91,163,176,.26); --ob-on-accent:#0c1418;
--ob-success:#5fa882; --ob-success-soft:rgba(95,168,130,.13); --ob-warn:#cda35f; --ob-warn-soft:rgba(205,163,95,.13); --ob-danger:#cc7d85; --ob-danger-soft:rgba(204,125,133,.13); --ob-info:#7a9cc4; --ob-info-soft:rgba(122,156,196,.13);
--ob-shadow-sm:0 1px 2px rgba(0,0,0,.3);
--ob-shadow-md:0 6px 18px rgba(0,0,0,.34);
--ob-shadow-lg:0 18px 42px rgba(0,0,0,.42);
--ob-c1:#5ba3b0; --ob-c2:#8b86b8; --ob-c3:#5fa882; --ob-c4:#cda35f; --ob-c5:#cc7d85;
--ob-track:#262a32; --ob-hairline:rgba(255,255,255,.045);
}
/* ---------- Optional page wrapper ---------- */
.orbit { font-family:var(--ob-font-sans); color:var(--ob-text); -webkit-font-smoothing:antialiased; }
/* shared box-sizing only for orbit components, to stay non-invasive */
[class^="ob-"], [class*=" ob-"], [class^="ob-"] *, [class*=" ob-"] * { box-sizing:border-box; }
/* ===========================================================
KEYFRAMES
=========================================================== */
@keyframes ob-spin { to { transform:rotate(360deg); } }
@keyframes ob-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes ob-toast-in { from{transform:translateY(14px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes ob-pop { from{transform:scale(.96) translateY(8px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }
@keyframes ob-fade { from{opacity:0} to{opacity:1} }
/* ===========================================================
BUTTONS — .ob-btn
=========================================================== */
.ob-btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
font-family:var(--ob-font-sans); font-size:14px; font-weight:600; line-height:1;
padding:11px 18px; border-radius:var(--ob-r-md); border:1px solid transparent;
background:var(--ob-accent); color:var(--ob-on-accent);
cursor:pointer; text-decoration:none; white-space:nowrap; user-select:none;
transition:background .15s, border-color .15s, color .15s, box-shadow .15s, opacity .15s;
}
.ob-btn:hover{ background:var(--ob-accent-hover); }
.ob-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--ob-accent-ring); }
.ob-btn svg{ width:16px; height:16px; }
.ob-btn--secondary{ background:var(--ob-surface-2); color:var(--ob-text); border-color:var(--ob-border); }
.ob-btn--secondary:hover{ background:var(--ob-surface-3); border-color:var(--ob-border-strong); }
.ob-btn--outline{ background:transparent; color:var(--ob-text); border:1.5px solid var(--ob-border-strong); padding:10px 18px; }
.ob-btn--outline:hover{ border-color:var(--ob-accent); color:var(--ob-accent); background:transparent; }
.ob-btn--ghost{ background:transparent; color:var(--ob-text-2); }
.ob-btn--ghost:hover{ background:var(--ob-surface-2); color:var(--ob-text); }
.ob-btn--danger{ background:var(--ob-danger-soft); color:var(--ob-danger); }
.ob-btn--danger:hover{ background:var(--ob-danger); color:#fff; }
.ob-btn--sm{ font-size:12.5px; padding:7px 13px; border-radius:var(--ob-r-sm); }
.ob-btn--lg{ font-size:16px; padding:14px 24px; border-radius:12px; }
.ob-btn--icon{ padding:0; width:40px; height:40px; }
.ob-btn--icon.ob-btn--sm{ width:32px; height:32px; }
.ob-btn--block{ width:100%; }
.ob-btn:disabled,.ob-btn[disabled],.ob-btn.is-disabled{
background:var(--ob-surface-2); color:var(--ob-text-3); border-color:var(--ob-border);
cursor:not-allowed; pointer-events:none;
}
.ob-btn .ob-spin{ animation:ob-spin .8s linear infinite; }
/* ===========================================================
FORM CONTROLS
=========================================================== */
.ob-field{ display:flex; flex-direction:column; gap:7px; font-family:var(--ob-font-sans); }
.ob-label{ font-size:13px; font-weight:600; color:var(--ob-text); }
.ob-label--danger{ color:var(--ob-danger); }
.ob-input,.ob-textarea,.ob-select{
width:100%; font-family:var(--ob-font-sans); font-size:14px; color:var(--ob-text);
padding:11px 14px; border-radius:var(--ob-r-md);
border:1px solid var(--ob-border-strong); background:var(--ob-surface-2);
outline:none; transition:border-color .15s, box-shadow .15s, background .15s;
}
.ob-input::placeholder,.ob-textarea::placeholder{ color:var(--ob-text-3); }
.ob-input:focus,.ob-textarea:focus,.ob-select:focus{
border-color:var(--ob-accent); box-shadow:0 0 0 3px var(--ob-accent-ring); background:var(--ob-surface);
}
.ob-textarea{ resize:vertical; min-height:84px; line-height:1.5; }
.ob-input--error{ border-color:var(--ob-danger); background:var(--ob-danger-soft); }
.ob-hint{ font-size:12px; color:var(--ob-text-2); display:flex; align-items:center; gap:5px; }
.ob-hint--error{ color:var(--ob-danger); }
.ob-hint svg{ width:13px; height:13px; }
/* input with leading icon */
.ob-input-group{ position:relative; }
.ob-input-group > svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--ob-text-3); pointer-events:none; }
.ob-input-group .ob-input{ padding-left:40px; }
/* Select con chevron custom disegnato sul WRAPPER (.ob-select-wrap), NON come
background-image della select. Motivo: su Chromium/Windows un background-image
sulla select viene ereditato dagli