/* Caminho: public_html/assets/css/tokens.css
PONTO ÚNICO DE VERDADE DO DESIGN.
Toda cor, espacamento, tipografia, raio e duração do projeto nasce aqui.
Trocar de tema e trocar o atributo data-tema no elemento .
Nenhum arquivo pode escrever cor em hexadecimal fora deste arquivo. */
:root {
/* --------------------------------------------------------------
Tipografia fluida (clamp), escala 1.25
-------------------------------------------------------------- */
--fonte-titulo: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
--fonte-texto: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
--fonte-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
--t-xs: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
--t-sm: clamp(0.82rem, 0.79rem + 0.15vw, 0.90rem);
--t-md: clamp(0.94rem, 0.90rem + 0.20vw, 1.03rem);
--t-lg: clamp(1.12rem, 1.05rem + 0.35vw, 1.30rem);
--t-xl: clamp(1.40rem, 1.25rem + 0.75vw, 1.85rem);
--t-2xl: clamp(1.85rem, 1.55rem + 1.50vw, 2.75rem);
--t-3xl: clamp(2.40rem, 1.90rem + 2.50vw, 4.00rem);
--peso-normal: 400;
--peso-medio: 500;
--peso-forte: 650;
--peso-black: 800;
--altura-apertada: 1.12;
--altura-normal: 1.55;
/* --------------------------------------------------------------
Ritmo de espacamento (base 4px)
-------------------------------------------------------------- */
--e-1: 0.25rem;
--e-2: 0.5rem;
--e-3: 0.75rem;
--e-4: 1rem;
--e-5: 1.5rem;
--e-6: 2rem;
--e-7: 3rem;
--e-8: 4rem;
--e-9: 6rem;
--largura-max: 1160px;
--largura-texto: 68ch;
/* Recuo lateral do conteúdo. Fica em variável porque a fila horizontal
precisa saber onde o container começa para alinhar o primeiro card. */
--recuo-lateral: 1rem;
/* --------------------------------------------------------------
Raios, sombras e desfoque
-------------------------------------------------------------- */
--r-sm: 8px;
--r-md: 14px;
--r-lg: 22px;
--r-xl: 32px;
--r-pill: 999px;
--desfoque-vidro: saturate(180%) blur(18px);
/* --------------------------------------------------------------
Movimento
-------------------------------------------------------------- */
--d-rapida: 140ms;
--d-media: 260ms;
--d-lenta: 460ms;
--easing: cubic-bezier(0.22, 1, 0.36, 1);
--easing-suave: cubic-bezier(0.4, 0, 0.2, 1);
/* --------------------------------------------------------------
Camadas
-------------------------------------------------------------- */
--z-base: 1;
--z-sticky: 50;
--z-cabecalho: 60;
--z-barra: 70;
--z-modal: 100;
--z-toast: 120;
/* Alturas de area segura no celular */
--safe-baixo: env(safe-area-inset-bottom, 0px);
--safe-cima: env(safe-area-inset-top, 0px);
}
/* ==================================================================
TEMA 1 - SUMI (padrão)
Preto tinta nanquim, vermelho de selo japonês e dourado.
Aposta principal: apetitoso, sofisticado e atemporal.
================================================================== */
:root,
[data-tema="sumi"] {
color-scheme: dark;
--fundo: #0c0a0b;
--fundo-2: #141011;
--fundo-3: #1c1718;
--superficie: rgba(255, 255, 255, 0.045);
--superficie-forte: rgba(255, 255, 255, 0.085);
--borda: rgba(255, 255, 255, 0.10);
--borda-forte: rgba(255, 255, 255, 0.20);
--texto: #f6f1ea;
--texto-2: rgba(246, 241, 234, 0.72);
--texto-3: rgba(246, 241, 234, 0.46);
/* Vermelho tirado pixel a pixel do logotipo oficial: #ed3237 */
--marca: #ed3237;
--marca-forte: #f8535a;
--marca-suave: rgba(237, 50, 55, 0.15);
--marca-texto: #ffffff;
--acento: #e8b465;
--acento-suave: rgba(232, 180, 101, 0.16);
--ok: #35c07a;
--alerta: #f0a63a;
--erro: #ff5f6d;
--info: #5aa9e6;
--sombra-1: 0 2px 10px rgba(0, 0, 0, 0.45);
--sombra-2: 0 12px 34px rgba(0, 0, 0, 0.55);
--sombra-marca: 0 14px 40px rgba(237, 50, 55, 0.30);
--brilho-borda: 0 0 0 1px rgba(232, 180, 101, 0.28);
--hero-1: #17090c;
--hero-2: #2a0d13;
--hero-3: #0c0a0b;
}
/* ==================================================================
TEMA 2 - WASHI
Papel artesanal claro, indigo e coral salmão. Leve e premium.
================================================================== */
[data-tema="washi"] {
color-scheme: light;
--fundo: #f7f4ee;
--fundo-2: #ffffff;
--fundo-3: #efeae1;
--superficie: rgba(23, 34, 59, 0.035);
--superficie-forte: rgba(23, 34, 59, 0.07);
--borda: rgba(23, 34, 59, 0.12);
--borda-forte: rgba(23, 34, 59, 0.24);
--texto: #17223b;
--texto-2: rgba(23, 34, 59, 0.70);
--texto-3: rgba(23, 34, 59, 0.48);
--marca: #1f3a93;
--marca-forte: #2a4dbd;
--marca-suave: rgba(31, 58, 147, 0.10);
--marca-texto: #ffffff;
--acento: #ff7a5c;
--acento-suave: rgba(255, 122, 92, 0.16);
--ok: #1f9d55;
--alerta: #c77700;
--erro: #d13b3b;
--info: #1f6fb2;
--sombra-1: 0 2px 10px rgba(23, 34, 59, 0.08);
--sombra-2: 0 16px 40px rgba(23, 34, 59, 0.12);
--sombra-marca: 0 14px 36px rgba(31, 58, 147, 0.20);
--brilho-borda: 0 0 0 1px rgba(31, 58, 147, 0.18);
--hero-1: #eae3d6;
--hero-2: #f7f4ee;
--hero-3: #ffe7df;
}
/* ==================================================================
TEMA 3 - NEO TOKYO
Escuro com neon controlado. Cara de aplicativo, atrai público jovem.
================================================================== */
[data-tema="neotokyo"] {
color-scheme: dark;
--fundo: #07080f;
--fundo-2: #0d1020;
--fundo-3: #141a30;
--superficie: rgba(120, 180, 255, 0.06);
--superficie-forte: rgba(120, 180, 255, 0.12);
--borda: rgba(130, 200, 255, 0.16);
--borda-forte: rgba(130, 200, 255, 0.32);
--texto: #eaf2ff;
--texto-2: rgba(234, 242, 255, 0.72);
--texto-3: rgba(234, 242, 255, 0.45);
--marca: #ff3d81;
--marca-forte: #ff5f9a;
--marca-suave: rgba(255, 61, 129, 0.16);
--marca-texto: #ffffff;
--acento: #35e0e8;
--acento-suave: rgba(53, 224, 232, 0.16);
--ok: #2fe08a;
--alerta: #ffc44d;
--erro: #ff5470;
--info: #4dc3ff;
--sombra-1: 0 2px 12px rgba(0, 0, 0, 0.6);
--sombra-2: 0 16px 44px rgba(0, 0, 0, 0.7);
--sombra-marca: 0 12px 44px rgba(255, 61, 129, 0.35);
--brilho-borda: 0 0 0 1px rgba(53, 224, 232, 0.35);
--hero-1: #12042a;
--hero-2: #051f33;
--hero-3: #07080f;
}
/* ==================================================================
TEMA 4 - MATCHA
Verde cha, creme e madeira. Sensacao fresca e saudável.
================================================================== */
[data-tema="matcha"] {
color-scheme: light;
--fundo: #f6f7f0;
--fundo-2: #ffffff;
--fundo-3: #e9ede0;
--superficie: rgba(31, 51, 34, 0.04);
--superficie-forte: rgba(31, 51, 34, 0.08);
--borda: rgba(31, 51, 34, 0.13);
--borda-forte: rgba(31, 51, 34, 0.26);
--texto: #1f3322;
--texto-2: rgba(31, 51, 34, 0.70);
--texto-3: rgba(31, 51, 34, 0.48);
--marca: #4a7c39;
--marca-forte: #5d9847;
--marca-suave: rgba(74, 124, 57, 0.12);
--marca-texto: #ffffff;
--acento: #d98324;
--acento-suave: rgba(217, 131, 36, 0.16);
--ok: #3f8f4f;
--alerta: #c07d10;
--erro: #c0392b;
--info: #2a7ea1;
--sombra-1: 0 2px 10px rgba(31, 51, 34, 0.08);
--sombra-2: 0 16px 40px rgba(31, 51, 34, 0.12);
--sombra-marca: 0 14px 36px rgba(74, 124, 57, 0.22);
--brilho-borda: 0 0 0 1px rgba(74, 124, 57, 0.2);
--hero-1: #dfe8d2;
--hero-2: #f6f7f0;
--hero-3: #fbe8cd;
}
/* ==================================================================
TEMA 5 - SAKURA
Rosa cerejeira suave com carvao. Convida e vende sobremesa.
================================================================== */
[data-tema="sakura"] {
color-scheme: light;
--fundo: #fdf5f6;
--fundo-2: #ffffff;
--fundo-3: #f7e6ea;
--superficie: rgba(56, 30, 38, 0.035);
--superficie-forte: rgba(56, 30, 38, 0.07);
--borda: rgba(56, 30, 38, 0.12);
--borda-forte: rgba(56, 30, 38, 0.24);
--texto: #38222b;
--texto-2: rgba(56, 34, 43, 0.70);
--texto-3: rgba(56, 34, 43, 0.48);
--marca: #d8496b;
--marca-forte: #e86282;
--marca-suave: rgba(216, 73, 107, 0.12);
--marca-texto: #ffffff;
--acento: #7a5fa8;
--acento-suave: rgba(122, 95, 168, 0.15);
--ok: #3f9d6b;
--alerta: #c78a1e;
--erro: #cf3a4e;
--info: #4d7fc0;
--sombra-1: 0 2px 10px rgba(56, 34, 43, 0.08);
--sombra-2: 0 16px 40px rgba(56, 34, 43, 0.13);
--sombra-marca: 0 14px 36px rgba(216, 73, 107, 0.24);
--brilho-borda: 0 0 0 1px rgba(216, 73, 107, 0.2);
--hero-1: #ffe3ea;
--hero-2: #fdf5f6;
--hero-3: #efe4f7;
}
/* ==================================================================
TEMA 6 - UMAMI
Marrom shoyu, ambar e creme. Quente, acolhedor, ideal a noite.
================================================================== */
[data-tema="umami"] {
color-scheme: dark;
--fundo: #16100c;
--fundo-2: #1e1610;
--fundo-3: #2a1f17;
--superficie: rgba(255, 235, 210, 0.05);
--superficie-forte: rgba(255, 235, 210, 0.09);
--borda: rgba(255, 226, 189, 0.13);
--borda-forte: rgba(255, 226, 189, 0.26);
--texto: #f6ecdf;
--texto-2: rgba(246, 236, 223, 0.72);
--texto-3: rgba(246, 236, 223, 0.46);
--marca: #e08b2c;
--marca-forte: #f2a444;
--marca-suave: rgba(224, 139, 44, 0.16);
--marca-texto: #20160e;
--acento: #9ec26b;
--acento-suave: rgba(158, 194, 107, 0.16);
--ok: #7fb45a;
--alerta: #e0a83a;
--erro: #e2603f;
--info: #6aa9c9;
--sombra-1: 0 2px 12px rgba(0, 0, 0, 0.5);
--sombra-2: 0 16px 42px rgba(0, 0, 0, 0.6);
--sombra-marca: 0 14px 40px rgba(224, 139, 44, 0.28);
--brilho-borda: 0 0 0 1px rgba(224, 139, 44, 0.3);
--hero-1: #2a1a0d;
--hero-2: #16100c;
--hero-3: #3a2413;
}
/* ==================================================================
Telas largas
Um monitor de 1900px com o conteúdo preso em 1160px deixa metade da
tela vazia enquanto a fila de destaques termina cortada no meio. Fica
com cara de página quebrada, e não de página centralizada. A partir
daqui o conteúdo cresce junto com a tela, até um limite que ainda
permite ler uma linha de texto sem virar a cabeça.
================================================================== */
@media (min-width: 1400px) {
:root {
--largura-max: 1280px;
--recuo-lateral: 1.5rem;
}
}
@media (min-width: 1700px) {
:root { --largura-max: 1400px; }
}
/* ==================================================================
Acessibilidade do movimento.
Quem desativou animações no sistema recebe a versão estática.
================================================================== */
@media (prefers-reduced-motion: reduce) {
:root {
--d-rapida: 1ms;
--d-media: 1ms;
--d-lenta: 1ms;
}
*,
*::before,
*::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
scroll-behavior: auto !important;
}
}