/* tokens.css — sistema visual de myyo (paleta monocromàtica, espaiat 8px). */ :root { /* Fons (de més profund a més elevat) */ --bg-0: #000000; /* fons primari */ --bg-1: #0F0F10; /* fons secundari, contenidors */ --bg-2: #18181A; /* cards, elements elevats */ --bg-3: #202024; /* hover sobre cards */ /* Línies i separadors */ --line: #2A2A2D; --line-strong: #34343A; --line-soft: rgba(255, 255, 255, 0.08); /* per inputs / pills sobre bg-1 */ /* Text */ --text-3: #5C5C60; /* terciari, captions */ --text-2: #8A8A8E; /* secundari, icones inactives */ --text-1: #F5F4F1; /* primari (blanc càlid) */ --text-0: #FFFFFF; /* highlight, focus */ /* Estats (ús minimalista) */ --error: #E5484D; /* Tipografia */ --font-body: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-display: 'Fraunces', Georgia, serif; --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Radius */ --r-sm: 8px; --r-md: 12px; --r-lg: 24px; --r-pill: 999px; /* Espaiat (sistema 8px) */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 48px; --space-6: 64px; --space-7: 96px; /* Animació */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 150ms; --dur: 220ms; --dur-slow: 320ms; /* Elevació subtil (1px ring blanc translúcid) */ --ring: 0 0 0 1px rgba(255, 255, 255, 0.06); --ring-strong: 0 0 0 1px rgba(255, 255, 255, 0.15); } /* ============================================================ Brief 017 TASCA B — mode "light" per testing. Activable amb ?theme=light o localStorage.myyo_theme="light". NO és canvi de disseny final — eina perquè Pere pugui fer captures/proves a fons blanc on el contrast amb papers físics sigui útil. Per tornar a fosc: ?theme=dark. ============================================================ */ :root[data-theme="light"] { /* Brief 022 TASCA C — color-scheme nadiu perquè iOS Safari respecti el mode al rendering nadiu de scrollbars i form widgets. */ color-scheme: light; --bg-0: #ffffff; --bg-1: #f7f7f7; --bg-2: #ececec; --bg-3: #e0e0e0; --line: #d0d0d2; --line-strong: #b8b8bc; --line-soft: rgba(0, 0, 0, 0.08); --text-3: #8a8a8e; --text-2: #555558; --text-1: #1a1a1c; --text-0: #000000; --ring: 0 0 0 1px rgba(0, 0, 0, 0.06); --ring-strong: 0 0 0 1px rgba(0, 0, 0, 0.15); background-color: #ffffff; color: #1a1a1c; } :root[data-theme="light"] body { background: var(--bg-0); color: var(--text-1); } /* Brief 018 TASCA C + Brief 022 TASCA C — !important al :root i al body per al iPhone Safari. El bug: ?theme=light no aplicava encara que data-theme="light" estigués posat al . Forcem amb !important com a últim recurs. */ :root[data-theme="light"], :root[data-theme="light"] body { background-color: #ffffff !important; color: #1a1a1c !important; } :root[data-theme="light"] ::selection { background: rgba(0, 0, 0, 0.12); color: var(--text-0); } :root[data-theme="light"] :focus-visible { outline-color: rgba(0, 0, 0, 0.3); } /* La bola en mode light necessita contrast — el kaki dorat sobre blanc pràcticament no es veu. Fem el host més visible amb un contorn fosc i un glow més apagat. */ :root[data-theme="light"] .myyo-orb { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.10); } /* Toast en light: fons fosc per contrastar amb el viewport blanc. */ :root[data-theme="light"] .myyo-toast { background: rgba(20, 20, 22, 0.92); color: #fff; border-color: rgba(0, 0, 0, 0.18); } /* Backdrop del panel ja és fosc — el deixem igual perquè la transparència sobre blanc dóna un gris clar acceptable. */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--bg-0); } body { background: var(--bg-0); color: var(--text-1); font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; min-height: 100svh; display: flex; flex-direction: column; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } input, textarea { font: inherit; color: inherit; } img { max-width: 100%; display: block; } :focus { outline: none; } :focus-visible { outline: 1px solid rgba(255, 255, 255, 0.3); outline-offset: 2px; border-radius: var(--r-sm); } ::selection { background: rgba(245, 244, 241, 0.18); color: var(--text-0); } /* Animacions globals reutilitzables */ @keyframes fade-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================================ Brief 022 TASCA A — mode embed. Quan la pàgina està iframecarregada dins /dashboard (el shell posa data-embed="1" al ), amaguem topbar + version-badge per no duplicar UI. La bola del shell parent ja gestiona la veu. ============================================================ */ :root[data-embed="1"] .topbar, :root[data-embed="1"] #myyo-version-badge, :root[data-embed="1"] .myyo-orb, /* Brief 073 (9/5/2026) — el iframe parent (dashboard) ja té el seu xat omnipresent i la bola; dins el preview de Tu myyo amaguem el chat form, transcript, disclaimer i banner per evitar duplicacions. */ :root[data-embed="1"] .chat, :root[data-embed="1"] .transcript, :root[data-embed="1"] .profile-disclaimer, :root[data-embed="1"] .profile-owner-banner { display: none !important; } /* ============================================================ Brief 022 TASCA D — botó back universal. Reutilitzable a totes les pantalles. Tap target 40px (recomanació iOS) i font 15px. text-decoration none perquè funcioni igual com i com