/* ========================================================== tokens.css — Design tokens compartilhados do Divulgador Fase 1: estrutura/aliases sem quebrar CSS existente. ========================================================== */ :root { /* ── Fontes ── */ --font-display: 'Syne', system-ui, sans-serif; --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Monaco', 'Courier New', monospace; /* ── Font weights ── */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* ── Escala tipográfica ── */ --text-xs: .72rem; --text-sm: .82rem; --text-base: .92rem; --text-lg: 1.05rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 2rem; /* ── Espaçamentos (base 4px) ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* ── Radii ── */ --radius-sm: 4px; --radius: 8px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; /* ── Sombras ── */ --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow: 0 2px 8px rgba(0,0,0,.08); --shadow-lg: 0 8px 24px rgba(0,0,0,.12); } /* ========================================================== TEMA: Admin / Master (dark navy) Paleta canônica: série #07111f (navy profundo) Aplicar com class="admin-area" ou class="theme-dark-navy" ========================================================== */ .theme-dark-navy, .admin-area { --color-bg: #07111f; --color-bg-2: #0d1728; --color-bg-3: #13233a; --color-bg-4: #1a2b45; --color-sidebar-bg: #08111d; --color-text: #ecf3fb; --color-text-2: #9fb0c6; --color-text-3: #6f829d; --color-border: rgba(148,163,184,.16); --color-input-bg: #0a1524; --color-input-border: rgba(148,163,184,.18); --color-card-bg: rgba(13,23,40,.84); --color-card-border: rgba(148,163,184,.14); --color-hover: rgba(255,255,255,.05); --color-shadow: 0 20px 45px rgba(0,0,0,.28); /* ── aliases para CSS existente não quebrar ── */ --bg: var(--color-bg); --bg2: var(--color-bg-2); --bg3: var(--color-bg-3); --bg4: var(--color-bg-4); --sidebar-bg: var(--color-sidebar-bg); --text: var(--color-text); --text2: var(--color-text-2); --text3: var(--color-text-3); --border: var(--color-border); --input-bg: var(--color-input-bg); --input-border: var(--color-input-border); --card-bg: var(--color-card-bg); --card-border: var(--color-card-border); --hover: var(--color-hover); --shadow: var(--color-shadow); } /* ========================================================== TEMA: Admin / Master — variante light (toggle) Ativada quando está presente. Os templates definem [data-theme="light"]{...} no :root, mas a cascata perde pro .admin-area do body — por isso o override precisa ter especificidade compatível aqui. ========================================================== */ [data-theme="light"] .admin-area, [data-theme="light"].admin-area { /* Paleta light suavizada — sem branco puro, contraste WCAG AA */ --color-bg: #e7ecf2; /* fundo principal */ --color-bg-2: #f1f4f8; /* superfícies secundárias off-white */ --color-bg-3: #eaeff5; --color-bg-4: #dfe5ed; --color-sidebar-bg: #d6dde6; /* sidebar com mais profundidade (antes #e0e6ee) */ --color-text: #121c2b; /* texto principal (max contraste) */ --color-text-2: #2a3545; /* texto secundario bem mais escuro */ --color-text-3: #4a5669; /* texto terciario legivel */ --color-border: rgba(15,23,42,.12); --color-input-bg: #f6f8fb; --color-input-border: rgba(15,23,42,.1); --color-card-bg: #f3f6fa; --color-card-border: rgba(15,23,42,.07); --color-hover: rgba(15,23,42,.05); --color-shadow: 0 10px 28px rgba(15,23,42,.06); } /* ========================================================== TEMA: Master Admin (dark navy + accent vermelho) Herda tudo de .admin-area, sobrescreve apenas --accent. O vermelho sinaliza a área master (dono da plataforma). Aplicar com class="admin-area master-area" ========================================================== */ .master-area { --accent: #e53e3e; --accent2: #f87171; } /* ========================================================== TEMA: Site público (light) Aplicar com class="theme-public-light" ========================================================== */ .theme-public-light { --color-bg: #f4f5f8; --color-bg-card: #ffffff; --color-text: #1a1d23; --color-text-muted:#6b7280; --color-border: #e5e7eb; /* ── aliases para CSS existente não quebrar ── */ --bg: var(--color-bg); --card: var(--color-bg-card); --txt: var(--color-text); --muted: var(--color-text-muted); --border: var(--color-border); } /* ========================================================== MODIFIER: header/footer claros (--c2 / --cor2 com fundo claro) Aplicado quando luminância de site_cor_secundaria é alta. Sobrescreve texto/bordas brancos hardcoded nos templates. Especificidade body.header-light > seletores internos. ========================================================== */ body.header-light header { color: #1a1d23; box-shadow: 0 1px 4px rgba(0,0,0,.08); } body.header-light header a:not(.btn-ir):not(.nav-a):not(.mob-nav-a):not(.logo) { color: inherit; } /* Header — busca */ body.header-light .srch input { color: #1a1d23; } body.header-light .srch input::placeholder { color: rgba(0,0,0,.42); } body.header-light .srch form { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.12); } /* Header — navegação */ body.header-light .nav-a { color: rgba(0,0,0,.72); } body.header-light .nav-a:hover { color: #1a1d23; background: rgba(0,0,0,.05); } body.header-light .voltar { color: rgba(0,0,0,.6); } body.header-light .voltar:hover { color: #1a1d23; } body.header-light .h-menu-btn { color: #1a1d23; } body.header-light .h-menu-btn:hover { background: rgba(0,0,0,.06); } /* Header — barra de cupons */ body.header-light .cupons-bar { border-top-color: rgba(0,0,0,.07); } body.header-light .c-lbl { color: rgba(0,0,0,.5); } body.header-light .c-chip { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); color: rgba(0,0,0,.78); } /* Mobile drawer */ body.header-light .mob-drawer-header { border-bottom-color: rgba(0,0,0,.08); } body.header-light .mob-drawer-title { color: var(--c1, var(--cor1)); } body.header-light .mob-close-btn { color: rgba(0,0,0,.6); } body.header-light .mob-close-btn:hover { color: #1a1d23; background: rgba(0,0,0,.05); } body.header-light .mob-nav-a { color: rgba(0,0,0,.75); } /* Footer */ body.header-light footer { color: rgba(0,0,0,.58); } body.header-light .f-desc { color: rgba(0,0,0,.5); } body.header-light .soc-lbl { color: rgba(0,0,0,.5); } body.header-light .soc-a { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); color: rgba(0,0,0,.7); } body.header-light .f-bottom { border-top-color: rgba(0,0,0,.07); } body.header-light .selo { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.08); color: rgba(0,0,0,.65); } body.header-light .f-link { color: rgba(0,0,0,.65); } body.header-light .f-link:hover { color: #1a1d23; } /* ========================================================== FIX: mob-overlay bloqueia cliques no mobile No mobile (≤768px) o overlay fica display:block + opacity:0, mas SEM pointer-events:none ele captura todos os cliques. ========================================================== */ .mob-overlay { pointer-events: none; } .mob-overlay.open { pointer-events: auto; }