/* ============================================================ YSked — Contrato de design tokens (TEMA POR NICHO) ------------------------------------------------------------ Todas as telas do app (agenda, configurações, planos, página pública, simulador) consomem ESTAS variáveis. O bloco :root é o tema NEUTRAL e reproduz exatamente a aparência atual (slate/violet claro). Cada nicho redefine só os tokens em seu próprio arquivo (ex.: barbearia.css), ativado por . Nicho null/desconhecido → permanece neutral. Nada quebra. ============================================================ */ :root { /* superfícies */ --bg: #f8fafc; --bg-2: #f1f5f9; --surface: #ffffff; --surface-2: #f8fafc; --raise: #faf5ff; /* linhas / divisores */ --line: #e2e8f0; --line-soft: #f1f5f9; /* texto */ --text: #1e293b; --text-2: #475569; --muted: #64748b; --muted-2: #94a3b8; /* acento (violet) */ --accent: #7c3aed; --accent-br: #8b5cf6; --accent-ink: #6d28d9; --accent-soft: #f5f3ff; --accent-on: #ffffff; /* texto sobre o acento */ --accent-ring: rgba(124, 58, 237, 0.22); /* foco / glow */ --ok: #10b981; --wa: #25d366; /* raios */ --r-sm: 0.5rem; --r: 0.75rem; --r-lg: 1rem; /* sombras */ --sh-sm: 0 1px 2px rgba(15, 23, 42, 0.14); --sh-md: 0 4px 10px rgba(15, 23, 42, 0.22); /* tipografia */ --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif; --font-display: var(--font-body); } /* ============================================================ Marca YSked adaptável ao tema (igual à landing): "Y" em quadrado com gradiente do acento + palavra "YSked". Segue os tokens, então fica dourado no tema barbearia e violet no neutral. Mostrada só quando há tema (data-theme); no neutral usa o SVG. ============================================================ */ .ysk-brand { display: none; align-items: center; gap: 0.55rem; text-decoration: none; } .ysk-brand .ysk-mark { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; font-size: 17px; letter-spacing: -0.04em; background: linear-gradient(165deg, var(--accent-br), var(--accent-ink)); color: var(--accent-on); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); } .ysk-brand .ysk-word { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.03em; color: var(--text); } .ysk-brand .ysk-word b { color: var(--accent-br); font-weight: 800; } html[data-theme] .ysk-brand { display: inline-flex; } html[data-theme] .ysk-logo-img { display: none; }