/* ================================================================================
* theme.css — Tokens visuais centralizados do BOO!
*
* Baseado na estrutura do App_obra (design system profissional), adaptado pro
* universo infantil: cores alegres, fonte Nunito (redonda+limpa), radius médio,
* toques grandes pra dedo de criança.
*
* Mudar uma cor aqui → afeta o app inteiro.
* A COR DA FILHA (--tema-c1/--tema-c2) é setada por JS lendo cor_tema do perfil.
* Aqui ficam os DEFAULTS (roxo Boo).
*
* Carregar Nunito no de cada página:
*
*
* ================================================================================ */
:root {
/* ============================================================
* COR DA FILHA (personalizável) — default roxo Boo
* JS sobrescreve --tema-c1/c2/c1-rgb lendo o perfil dela.
* ============================================================ */
--tema-c1: #c247f7; /* claro */
--tema-c2: #820AD1; /* escuro */
--tema-c1-rgb: 194, 71, 247;
--tema-c2-rgb: 130, 10, 209;
/* ============================================================
* MARCA / BISCOITO (moeda)
* ============================================================ */
--biscoito: #d9a441; /* dourado do biscoito */
--biscoito-bg: #fbeecb;
/* ============================================================
* FUNDOS (claros e alegres)
* ============================================================ */
--bg: #f7f4fc; /* fundo da página (lilás clarinho) */
--bg-2: #efe9f8; /* fundo secundário */
--card: #ffffff; /* cards/painéis */
--surface-elev: #ffffff;
--border: #ece6f5;
--border-2: #f4f0fa;
--border-strong: #d9cfe8;
/* ============================================================
* TEXTO
* ============================================================ */
--text: #2a1a3a; /* principal (roxo bem escuro, não preto duro) */
--text-2: #6b5a7a; /* secundário */
--text-3: #a596b5; /* hint/desativado */
--text-inv: #ffffff; /* sobre fundos coloridos */
/* ============================================================
* SEMÂNTICAS (alegres, não agressivas)
* ============================================================ */
--success: #00b572; /* verde alegre */
--success-light: #d6f7ea;
--warning: #f59e0b; /* âmbar */
--warning-light: #fef0d6;
--danger: #ff5a7a; /* rosa-vermelho suave (não bravo) */
--danger-light: #ffe1e8;
--info: #3b82f6;
--info-light: #dbeafe;
/* ============================================================
* RARIDADE DOS DOCES (claw machine / coleção)
* ============================================================ */
--rar-comum: #9ca3af; /* cinza */
--rar-raro: #3b82f6; /* azul */
--rar-epico: #a855f7; /* roxo */
--rar-lendario: #f59e0b; /* dourado */
--rar-ultra: #ff5ea8; /* rosa arco-íris (gradiente especial) */
/* ============================================================
* TIPOGRAFIA — Nunito (redonda, limpa, infantil-moderna)
* ============================================================ */
--font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--fs-xs: 12px;
--fs-sm: 13px;
--fs-base: 15px; /* maior que App_obra (criança lendo) */
--fs-md: 16px;
--fs-lg: 18px;
--fs-xl: 22px;
--fs-2xl: 26px;
--fs-3xl: 32px;
--fw-normal: 400;
--fw-semibold: 600;
--fw-bold: 700;
--fw-extra: 800;
--fw-black: 900;
/* ============================================================
* ESPAÇAMENTO (escala de 4 — igual App_obra)
* ============================================================ */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
/* ============================================================
* BORDER RADIUS (médio-arredondado, fofo mas comportado)
* ============================================================ */
--r-sm: 8px;
--r-md: 12px;
--r-lg: 16px;
--r-xl: 20px;
--r-2xl: 26px;
--r-pill: 999px;
/* ============================================================
* SOMBRAS (suaves, coloridas no tema quando precisa)
* ============================================================ */
--shadow-sm: 0 2px 6px rgba(42,26,58,.06);
--shadow-md: 0 8px 22px rgba(42,26,58,.10);
--shadow-lg: 0 14px 36px rgba(42,26,58,.14);
--shadow-xl: 0 22px 50px rgba(42,26,58,.20);
--shadow-tema: 0 10px 26px rgba(var(--tema-c1-rgb), .30);
/* ============================================================
* TRANSIÇÕES (easing "pouso suave" do App_obra — ótimo)
* ============================================================ */
--tr-ease: cubic-bezier(0.16, 1, 0.3, 1);
--tr-fast: .18s var(--tr-ease);
--tr-base: .28s var(--tr-ease);
--tr-slow: .42s var(--tr-ease);
/* ============================================================
* Z-INDEX
* ============================================================ */
--z-tabbar: 900;
--z-boo: 950;
--z-drawer: 1000;
--z-modal: 1100;
--z-toast: 1200;
}
/* ================================================================================
* BASE GLOBAL
* ================================================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body {
font-family: var(--font);
font-size: var(--fs-base);
background: var(--bg);
color: var(--text);
-webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--tema-c1); outline-offset: 2px; border-radius: var(--r-sm); }
/* ================================================================================
* BOTÕES — grandes, fofos, toque ≥44px
* ================================================================================ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
min-height: 48px; padding: 12px var(--sp-5);
font-size: var(--fs-md); font-weight: var(--fw-extra);
border-radius: var(--r-lg); border: 2px solid transparent;
background: var(--card); color: var(--text);
cursor: pointer; transition: transform var(--tr-fast), background var(--tr-base), box-shadow var(--tr-base);
}
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn i { font-size: 20px; }
/* Primário = cor da filha */
.btn-primary {
background: linear-gradient(140deg, var(--tema-c1), var(--tema-c2));
color: var(--text-inv);
box-shadow: var(--shadow-tema);
}
.btn-primary:active { box-shadow: var(--shadow-sm); }
/* Secundário = contorno na cor da filha */
.btn-secondary {
background: var(--card); color: var(--tema-c2);
border-color: rgba(var(--tema-c1-rgb), .35);
}
.btn-secondary:active { background: var(--bg-2); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:active { background: var(--bg-2); }
.btn-success { background: var(--success); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-lg { min-height: 56px; font-size: var(--fs-lg); border-radius: var(--r-xl); }
.btn-block { width: 100%; }
/* ================================================================================
* INPUTS
* ================================================================================ */
.input, .textarea, .select {
width: 100%; min-height: 48px; padding: 12px var(--sp-4);
font-size: var(--fs-md);
border: 2px solid var(--border); border-radius: var(--r-lg);
background: var(--card); color: var(--text);
transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:focus, .textarea:focus, .select:focus {
border-color: var(--tema-c1);
box-shadow: 0 0 0 4px rgba(var(--tema-c1-rgb), .15);
}
.textarea { resize: vertical; min-height: 90px; }
.label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-2); margin-bottom: var(--sp-2); }
/* ================================================================================
* CARD
* ================================================================================ */
.card {
background: var(--card); border: 1px solid var(--border);
border-radius: var(--r-xl); padding: var(--sp-4);
box-shadow: var(--shadow-sm);
transition: transform var(--tr-fast), box-shadow var(--tr-base);
}
.card-clicavel { cursor: pointer; }
.card-clicavel:active { transform: scale(.985); box-shadow: var(--shadow-md); }
/* Card na cor da filha (sólido) — ex: card de missão */
.card-tema {
background: linear-gradient(135deg, var(--tema-c1), var(--tema-c2));
color: var(--text-inv); border-color: transparent;
box-shadow: var(--shadow-tema);
}
/* ================================================================================
* BADGE / PILL (tags, raridade, datas)
* ================================================================================ */
.pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 12px; border-radius: var(--r-pill);
font-size: var(--fs-sm); font-weight: var(--fw-bold);
background: var(--bg-2); color: var(--text-2);
}
.pill-tema { background: rgba(var(--tema-c1-rgb), .14); color: var(--tema-c2); }
.pill-light { background: rgba(255,255,255,.22); color: #fff; backdrop-filter: blur(4px); }
/* Raridade */
.pill-comum { background: #f0f1f3; color: var(--rar-comum); }
.pill-raro { background: var(--info-light); color: var(--rar-raro); }
.pill-epico { background: #f3e8ff; color: var(--rar-epico); }
.pill-lendario { background: var(--warning-light); color: var(--rar-lendario); }
.pill-ultra { background: linear-gradient(90deg,#ffd6ec,#e0d6ff); color: var(--rar-ultra); }
/* ================================================================================
* MODAL (bottom-sheet no mobile)
* ================================================================================ */
.modal-backdrop {
display: none; position: fixed; inset: 0;
background: rgba(42,26,58,.45); backdrop-filter: blur(4px);
z-index: var(--z-modal); align-items: flex-end; justify-content: center;
}
.modal-backdrop.on { display: flex; animation: fadeIn .18s ease; }
.modal {
background: var(--card);
border-radius: var(--r-2xl) var(--r-2xl) 0 0;
width: 100%; max-width: 520px; max-height: 88vh;
padding: var(--sp-5);
display: flex; flex-direction: column;
box-shadow: var(--shadow-xl);
animation: slideUp .28s var(--tr-ease);
}
.modal-grip { width: 40px; height: 4px; border-radius: 999px; background: var(--border-strong); margin: 0 auto var(--sp-4); }
.modal-titulo { font-size: var(--fs-xl); font-weight: var(--fw-black); margin-bottom: var(--sp-4); }
@media (min-width: 600px){
.modal-backdrop { align-items: center; }
.modal { border-radius: var(--r-2xl); }
}
/* ================================================================================
* TOAST (compatível com coreToast do core.js)
* ================================================================================ */
.toast {
position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(120px);
background: var(--text); color: var(--text-inv);
padding: 14px 20px; border-radius: var(--r-lg);
font-size: var(--fs-md); font-weight: var(--fw-bold);
box-shadow: var(--shadow-lg); z-index: var(--z-toast);
display: flex; align-items: center; gap: 10px;
transition: transform var(--tr-slow); pointer-events: none;
}
.toast.on { transform: translateX(-50%) translateY(0); }
.toast.ok, .toast.success { background: var(--success); }
.toast.erro, .toast.error { background: var(--danger); }
.toast.info { background: var(--info); }
/* ================================================================================
* SPINNER
* ================================================================================ */
.spinner {
width: 36px; height: 36px;
border: 4px solid var(--border); border-top-color: var(--tema-c1);
border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ================================================================================
* EMPTY STATE
* ================================================================================ */
.empty-state {
padding: 48px var(--sp-6);
display: flex; flex-direction: column; align-items: center; text-align: center;
}
.empty-state > i { font-size: 64px; color: var(--border-strong); }
.empty-title { font-size: var(--fs-lg); font-weight: var(--fw-extra); color: var(--text); margin-top: var(--sp-4); }
.empty-sub { font-size: var(--fs-md); color: var(--text-2); margin-top: var(--sp-2); line-height: 1.5; }
/* ================================================================================
* SECTITLE (rótulo de seção)
* ================================================================================ */
.sectitle {
font-size: var(--fs-sm); font-weight: var(--fw-extra);
color: var(--text-3); text-transform: uppercase; letter-spacing: .5px;
margin: var(--sp-4) 0 var(--sp-3);
}
/* ================================================================================
* PROGRESS BAR (ex: meta de biscoitos)
* ================================================================================ */
.progress-bar { height: 10px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.progress-bar > span { display: block; height: 100%; border-radius: 999px;
background: linear-gradient(90deg, var(--tema-c1), var(--tema-c2)); transition: width var(--tr-slow); }
/* ================================================================================
* UTILITÁRIOS
* ================================================================================ */
.no-scroll { overflow: hidden; }
.hidden { display: none !important; }
.scrollbar-thin::-webkit-scrollbar { width: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
/* ================================================================================
* ANIMAÇÕES BASE
* ================================================================================ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes flutua { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.flutua { animation: flutua 3s var(--tr-ease) infinite; }