/* tokens.css — gerado a partir do Figma, arquivo WKhAlabqvaKu6yikvhnCaw. NAO EDITAR A MAO. Toda alteracao nasce no Figma e e regerada aqui. Colecoes lidas: M3 (VariableCollectionId:54778:406) modos Light 54778:1 e Dark 54778:4 Font theme (VariableCollectionId:55064:15502) modo Baseline Typescale (VariableCollectionId:55064:15508) modo Baseline Shape (VariableCollectionId:55064:15586) modo Baseline Spacing (VariableCollectionId:60802:71) modo Baseline State (VariableCollectionId:60809:23575) modo Baseline Nome de cada custom property = code syntax WEB da variavel no Figma. As opacidades da colecao State estao em percentual no Figma e entram aqui como fracao (valor / 100). Ficam de fora, por nao terem code syntax WEB: as 147 State Layers e o Add-ons/Section background — 148 variaveis no total. */ /* O SEGUNDO SELETOR ENTROU NO LOTE 32, e nao e enfeite: sem ele o tema claro so existe na RAIZ. Os valores sao herdados, entao marcar um trecho com `data-theme="light"` dentro de uma pagina escura nao mudava nada — as variaveis continuavam chegando do `:root` escuro. O Header precisa disso: o pedido do Matheus e que o CONTEUDO dele fique no tema claro tambem no escuro ("o preto nao fica legal em cima do vermelho"). No Figma isso e o modo M3=Light fixado nas camadas `logo`, `busca`, `tema`, `linha-logo` e `barra` do Header; aqui e o mesmo atributo de tema que o site ja usa, aplicado so nessas partes. Nenhuma cor escrita. */ :root, [data-theme="light"] { color-scheme: light; /* Font theme — colecao "Font theme", modo Baseline (8 variaveis) */ --md-ref-typeface-brand: Manrope; --md-ref-typeface-plain: Manrope; --md-ref-typeface-weight-regular: 400; --md-ref-typeface-weight-medium: 500; --md-ref-typeface-weight-bold: 700; --md-ref-typeface-weight-extrabold: 800; --md-ref-tracking-none: 0px; --md-ref-tracking-small: 0.1px; /* Typescale — colecao "Typescale", modo Baseline (90 variaveis) */ --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand); --md-sys-typescale-display-large-size: 57px; --md-sys-typescale-display-large-line-height: 64px; --md-sys-typescale-display-large-tracking: -0.25px; --md-sys-typescale-display-large-weight: var(--md-ref-typeface-weight-regular); --md-sys-typescale-display-large-weight-emphasized: var(--md-ref-typeface-weight-medium); --md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand); --md-sys-typescale-display-medium-size: 45px; --md-sys-typescale-display-medium-line-height: 52px; --md-sys-typescale-display-medium-tracking: 0px; --md-sys-typescale-display-medium-weight: var(--md-ref-typeface-weight-regular); --md-sys-typescale-display-medium-weight-emphasized: var(--md-ref-typeface-weight-medium); --md-sys-typescale-display-small-font: var(--md-ref-typeface-brand); --md-sys-typescale-display-small-size: 36px; --md-sys-typescale-display-small-line-height: 44px; --md-sys-typescale-display-small-tracking: 0px; --md-sys-typescale-display-small-weight: var(--md-ref-typeface-weight-regular); --md-sys-typescale-display-small-weight-emphasized: var(--md-ref-typeface-weight-medium); --md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand); --md-sys-typescale-headline-large-size: 32px; --md-sys-typescale-headline-large-line-height: 40px; --md-sys-typescale-headline-large-tracking: 0px; --md-sys-typescale-headline-large-weight: var(--md-ref-typeface-weight-bold); --md-sys-typescale-headline-large-weight-emphasized: var(--md-ref-typeface-weight-extrabold); --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand); --md-sys-typescale-headline-medium-size: 28px; --md-sys-typescale-headline-medium-line-height: 36px; --md-sys-typescale-headline-medium-tracking: 0px; --md-sys-typescale-headline-medium-weight: var(--md-ref-typeface-weight-bold); --md-sys-typescale-headline-medium-weight-emphasized: var(--md-ref-typeface-weight-extrabold); --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand); --md-sys-typescale-headline-small-size: 24px; --md-sys-typescale-headline-small-line-height: 32px; --md-sys-typescale-headline-small-tracking: 0px; --md-sys-typescale-headline-small-weight: var(--md-ref-typeface-weight-bold); --md-sys-typescale-headline-small-weight-emphasized: var(--md-ref-typeface-weight-extrabold); --md-sys-typescale-title-large-font: var(--md-ref-typeface-brand); --md-sys-typescale-title-large-size: 22px; --md-sys-typescale-title-large-line-height: 28px; --md-sys-typescale-title-large-tracking: 0px; --md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-bold); --md-sys-typescale-title-large-weight-emphasized: var(--md-ref-typeface-weight-extrabold); --md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain); --md-sys-typescale-title-medium-size: 16px; --md-sys-typescale-title-medium-line-height: 24px; --md-sys-typescale-title-medium-tracking: 0.15px; --md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-bold); --md-sys-typescale-title-medium-weight-emphasized: var(--md-ref-typeface-weight-extrabold); --md-sys-typescale-title-small-font: var(--md-ref-typeface-plain); --md-sys-typescale-title-small-size: 14px; --md-sys-typescale-title-small-line-height: 20px; --md-sys-typescale-title-small-tracking: 0.1px; --md-sys-typescale-title-small-weight: var(--md-ref-typeface-weight-bold); --md-sys-typescale-title-small-weight-emphasized: var(--md-ref-typeface-weight-extrabold); --md-sys-typescale-body-large-font: var(--md-ref-typeface-plain); --md-sys-typescale-body-large-size: 16px; --md-sys-typescale-body-large-line-height: 24px; --md-sys-typescale-body-large-tracking: 0.5px; --md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular); --md-sys-typescale-body-large-weight-emphasized: var(--md-ref-typeface-weight-medium); --md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain); --md-sys-typescale-body-medium-size: 14px; --md-sys-typescale-body-medium-line-height: 20px; --md-sys-typescale-body-medium-tracking: 0.25px; --md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular); --md-sys-typescale-body-medium-weight-emphasized: var(--md-ref-typeface-weight-medium); --md-sys-typescale-body-small-font: var(--md-ref-typeface-plain); --md-sys-typescale-body-small-size: 12px; --md-sys-typescale-body-small-line-height: 16px; --md-sys-typescale-body-small-tracking: 0.4px; --md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular); --md-sys-typescale-body-small-weight-emphasized: var(--md-ref-typeface-weight-medium); --md-sys-typescale-label-large-font: var(--md-ref-typeface-plain); --md-sys-typescale-label-large-size: 14px; --md-sys-typescale-label-large-line-height: 20px; --md-sys-typescale-label-large-tracking: 0.1px; --md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium); --md-sys-typescale-label-large-weight-emphasized: var(--md-ref-typeface-weight-bold); --md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain); --md-sys-typescale-label-medium-size: 12px; --md-sys-typescale-label-medium-line-height: 16px; --md-sys-typescale-label-medium-tracking: 0.5px; --md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium); --md-sys-typescale-label-medium-weight-emphasized: var(--md-ref-typeface-weight-bold); --md-sys-typescale-label-small-font: var(--md-ref-typeface-plain); --md-sys-typescale-label-small-size: 11px; --md-sys-typescale-label-small-line-height: 16px; --md-sys-typescale-label-small-tracking: 0.5px; --md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium); --md-sys-typescale-label-small-weight-emphasized: var(--md-ref-typeface-weight-bold); /* Shape — colecao "Shape", modo Baseline (11 variaveis) */ --md-sys-shape-corner-none: 0px; --md-sys-shape-corner-extra-small: 4px; --md-sys-shape-corner-small: 8px; --md-sys-shape-corner-medium: 12px; --md-sys-shape-corner-large: 16px; --md-sys-shape-corner-large-increased: 20px; --md-sys-shape-corner-large-plus: 24px; --md-sys-shape-corner-extra-large: 28px; --md-sys-shape-corner-extra-large-increased: 32px; --md-sys-shape-corner-extra-extra-large: 48px; --md-sys-shape-corner-full: 1000px; /* Spacing — colecao "Spacing", modo Baseline (18 variaveis) */ --md-sys-measurement-space0: 0px; --md-sys-measurement-space25: 2px; --md-sys-measurement-space50: 4px; --md-sys-measurement-space75: 6px; --md-sys-measurement-space100: 8px; --md-sys-measurement-space125: 10px; --md-sys-measurement-space150: 12px; --md-sys-measurement-space175: 14px; --md-sys-measurement-space200: 16px; --md-sys-measurement-space250: 20px; --md-sys-measurement-space300: 24px; --md-sys-measurement-space400: 32px; --md-sys-measurement-space450: 36px; --md-sys-measurement-space500: 40px; --md-sys-measurement-space600: 48px; --md-sys-measurement-space700: 56px; --md-sys-measurement-space800: 64px; --md-sys-measurement-space900: 72px; /* State — colecao "State", modo Baseline (5 variaveis), percentual dividido por 100 */ --md-sys-state-hover-state-layer-opacity: 0.08; --md-sys-state-focus-state-layer-opacity: 0.10; --md-sys-state-pressed-state-layer-opacity: 0.10; --md-sys-state-dragged-state-layer-opacity: 0.16; --md-sys-state-scrim-opacity: 0.32; /* Sombra — os dois estilos de efeito KD do Figma (lote 26). Sao os UNICOS `box-shadow` decorativos permitidos no site e no painel, e por isso moram aqui e nao no `app.css`: token de sombra e token como qualquer outro. Medidos nos estilos `KD/Sombra leve` (S:afc49af0f9470ed7889d677cf7a6d2cd04828df1) e `KD/Sombra flutuante` (S:6009a0e51b749834cea050721acfba762a3a78fd) em 25/09/2026: leve 0 1px 2px + 0 2px 6px, as duas a 8% flutuante 0 2px 4px a 8% + 0 6px 16px a 10% A LEVE e para destacar algo que esta NO FUNDO da pagina: a aba escolhida, o card no hover, o Header rolado. A FLUTUANTE e para o que fica POR CIMA do conteudo: menus, seta de carrossel e o Aviso de ofertas novas. A COR E MONTADA, e nao copiada. No Figma ela vem das variaveis `State Layers/Shadow/Opacity-08` e `Opacity-10`, que este arquivo NAO tem: a colecao gerada traz `--md-sys-color-shadow` (#000000) e as cinco opacidades de State, mas nenhuma opacidade de sombra. Entao a cor sai do token de sombra do M3 com a opacidade do Figma, por `color-mix` — a mesma tecnica que o `app.css` ja usa em quatro lugares. Nenhuma cor literal entra aqui. As opacidades ficam escritas na propria conta (8% e 10%) porque sao a MEDIDA da sombra, e nao a da camada de estado: usar `--md-sys-state-hover-state-layer-opacity`, que por acaso tambem vale 0.08, amarraria a sombra ao hover — no dia em que o M3 mudasse um, o outro mudaria junto sem ninguem pedir. IGUAIS NOS DOIS TEMAS, como o Figma manda. No escuro elas quase nao aparecem, e esta certo: la o destaque ja vem do tom da superficie. */ /* KD/Fundo da marca (colecao M3, lote 32). O vermelho do Header em todas as paginas e da faixa da Home. No claro e o mesmo do primary; no escuro e mais fechado, para nao ofuscar. Medido na variavel do Figma. */ --kd-fundo-da-marca: #e3262f; --kd-sombra-leve: 0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 8%, transparent), 0 2px 6px color-mix(in srgb, var(--md-sys-color-shadow) 8%, transparent); --kd-sombra-flutuante: 0 2px 4px color-mix(in srgb, var(--md-sys-color-shadow) 8%, transparent), 0 6px 16px color-mix(in srgb, var(--md-sys-color-shadow) 10%, transparent); /* Cores — colecao "M3", modo Light (49 variaveis) */ --md-sys-color-primary: #e3262f; --md-sys-color-surface-tint: #ffffff; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #e3262f; --md-sys-color-on-primary-container: #ffffff; --md-sys-color-secondary: #1a1a1a; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #f2f2f2; --md-sys-color-on-secondary-container: #1a1a1a; --md-sys-color-tertiary: #ffc400; --md-sys-color-on-tertiary: #1a1a1a; --md-sys-color-tertiary-container: #ffc400; --md-sys-color-on-tertiary-container: #1a1a1a; --md-sys-color-error: #ba1a1a; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #ffdad6; --md-sys-color-on-error-container: #410002; --md-sys-color-background: #ffffff; --md-sys-color-on-background: #1a1a1a; --md-sys-color-surface: #ffffff; --md-sys-color-on-surface: #1a1a1a; --md-sys-color-surface-variant: #f2f2f2; --md-sys-color-on-surface-variant: #636363; --md-sys-color-outline: #8a8a8a; --md-sys-color-outline-variant: #e6e6e6; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-inverse-surface: #1a1a1a; --md-sys-color-inverse-on-surface: #ffffff; --md-sys-color-inverse-primary: #ff4d55; --md-sys-color-primary-fixed: #e3262f; --md-sys-color-on-primary-fixed: #ffffff; --md-sys-color-primary-fixed-dim: #c41e26; --md-sys-color-on-primary-fixed-variant: #ffffff; --md-sys-color-secondary-fixed: #f2f2f2; --md-sys-color-on-secondary-fixed: #1a1a1a; --md-sys-color-secondary-fixed-dim: #e0e0e0; --md-sys-color-on-secondary-fixed-variant: #1a1a1a; --md-sys-color-tertiary-fixed: #ffc400; --md-sys-color-on-tertiary-fixed: #1a1a1a; --md-sys-color-tertiary-fixed-dim: #ffc400; --md-sys-color-on-tertiary-fixed-variant: #1a1a1a; --md-sys-color-surface-dim: #ebebeb; --md-sys-color-surface-bright: #ffffff; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f7f7f7; --md-sys-color-surface-container: #f2f2f2; --md-sys-color-surface-container-high: #ebebeb; --md-sys-color-surface-container-highest: #e0e0e0; } /* Tema escuro forcado. Cores da colecao "M3", modo Dark (49 variaveis). */ [data-theme="dark"] { color-scheme: dark; --kd-fundo-da-marca: #b81f27; --md-sys-color-primary: #e3262f; --md-sys-color-surface-tint: #ffffff; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #e3262f; --md-sys-color-on-primary-container: #ffffff; --md-sys-color-secondary: #ffffff; --md-sys-color-on-secondary: #1a1a1a; --md-sys-color-secondary-container: #2a2a2a; --md-sys-color-on-secondary-container: #ffffff; --md-sys-color-tertiary: #ffc400; --md-sys-color-on-tertiary: #1a1a1a; --md-sys-color-tertiary-container: #ffc400; --md-sys-color-on-tertiary-container: #1a1a1a; --md-sys-color-error: #f2b8b5; --md-sys-color-on-error: #601410; --md-sys-color-error-container: #8c1d18; --md-sys-color-on-error-container: #f9dedc; --md-sys-color-background: #121212; --md-sys-color-on-background: #ffffff; --md-sys-color-surface: #121212; --md-sys-color-on-surface: #ffffff; --md-sys-color-surface-variant: #2a2a2a; --md-sys-color-on-surface-variant: #a3a3a3; --md-sys-color-outline: #7a7a7a; --md-sys-color-outline-variant: #2e2e2e; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-inverse-surface: #f2f2f2; --md-sys-color-inverse-on-surface: #1a1a1a; --md-sys-color-inverse-primary: #e3262f; --md-sys-color-primary-fixed: #e3262f; --md-sys-color-on-primary-fixed: #ffffff; --md-sys-color-primary-fixed-dim: #c41e26; --md-sys-color-on-primary-fixed-variant: #ffffff; --md-sys-color-secondary-fixed: #f2f2f2; --md-sys-color-on-secondary-fixed: #1a1a1a; --md-sys-color-secondary-fixed-dim: #e0e0e0; --md-sys-color-on-secondary-fixed-variant: #1a1a1a; --md-sys-color-tertiary-fixed: #ffc400; --md-sys-color-on-tertiary-fixed: #1a1a1a; --md-sys-color-tertiary-fixed-dim: #ffc400; --md-sys-color-on-tertiary-fixed-variant: #1a1a1a; --md-sys-color-surface-dim: #121212; --md-sys-color-surface-bright: #383838; --md-sys-color-surface-container-lowest: #0a0a0a; --md-sys-color-surface-container-low: #1c1c1c; --md-sys-color-surface-container: #242424; --md-sys-color-surface-container-high: #2e2e2e; --md-sys-color-surface-container-highest: #383838; } /* Tema escuro pela preferencia do sistema, quando o tema nao foi forcado para claro. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --kd-fundo-da-marca: #b81f27; --md-sys-color-primary: #e3262f; --md-sys-color-surface-tint: #ffffff; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #e3262f; --md-sys-color-on-primary-container: #ffffff; --md-sys-color-secondary: #ffffff; --md-sys-color-on-secondary: #1a1a1a; --md-sys-color-secondary-container: #2a2a2a; --md-sys-color-on-secondary-container: #ffffff; --md-sys-color-tertiary: #ffc400; --md-sys-color-on-tertiary: #1a1a1a; --md-sys-color-tertiary-container: #ffc400; --md-sys-color-on-tertiary-container: #1a1a1a; --md-sys-color-error: #f2b8b5; --md-sys-color-on-error: #601410; --md-sys-color-error-container: #8c1d18; --md-sys-color-on-error-container: #f9dedc; --md-sys-color-background: #121212; --md-sys-color-on-background: #ffffff; --md-sys-color-surface: #121212; --md-sys-color-on-surface: #ffffff; --md-sys-color-surface-variant: #2a2a2a; --md-sys-color-on-surface-variant: #a3a3a3; --md-sys-color-outline: #7a7a7a; --md-sys-color-outline-variant: #2e2e2e; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-inverse-surface: #f2f2f2; --md-sys-color-inverse-on-surface: #1a1a1a; --md-sys-color-inverse-primary: #e3262f; --md-sys-color-primary-fixed: #e3262f; --md-sys-color-on-primary-fixed: #ffffff; --md-sys-color-primary-fixed-dim: #c41e26; --md-sys-color-on-primary-fixed-variant: #ffffff; --md-sys-color-secondary-fixed: #f2f2f2; --md-sys-color-on-secondary-fixed: #1a1a1a; --md-sys-color-secondary-fixed-dim: #e0e0e0; --md-sys-color-on-secondary-fixed-variant: #1a1a1a; --md-sys-color-tertiary-fixed: #ffc400; --md-sys-color-on-tertiary-fixed: #1a1a1a; --md-sys-color-tertiary-fixed-dim: #ffc400; --md-sys-color-on-tertiary-fixed-variant: #1a1a1a; --md-sys-color-surface-dim: #121212; --md-sys-color-surface-bright: #383838; --md-sys-color-surface-container-lowest: #0a0a0a; --md-sys-color-surface-container-low: #1c1c1c; --md-sys-color-surface-container: #242424; --md-sys-color-surface-container-high: #2e2e2e; --md-sys-color-surface-container-highest: #383838; } } /* --------------------------------------------------------------------------- Modo claro preso, para a caixa da foto de produto e o circulo do logo da loja. No Figma esses frames tem o modo da colecao de cores fixado em Light (`explicitVariableModes` = 54778:1), entao ficam brancos tambem no tema escuro — a foto de marketplace ja vem com fundo branco, e no escuro ela viraria um retangulo branco sobre fundo preto. O que esta dentro (icone de reserva, selo, iniciais) acompanha. Decidido pelo Matheus em 24/09/2026. Este bloco e a mesma coisa em CSS: redeclara, so dentro do elemento, as 49 cores que o modo escuro sobrescreve, com o valor que elas tem no :root. Nenhum valor novo — todos sao os mesmos que estao acima, gerados do Figma. --------------------------------------------------------------------------- */ .kd-modo-claro { color-scheme: light; --md-sys-color-primary: #e3262f; --md-sys-color-surface-tint: #ffffff; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #e3262f; --md-sys-color-on-primary-container: #ffffff; --md-sys-color-secondary: #1a1a1a; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #f2f2f2; --md-sys-color-on-secondary-container: #1a1a1a; --md-sys-color-tertiary: #ffc400; --md-sys-color-on-tertiary: #1a1a1a; --md-sys-color-tertiary-container: #ffc400; --md-sys-color-on-tertiary-container: #1a1a1a; --md-sys-color-error: #ba1a1a; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #ffdad6; --md-sys-color-on-error-container: #410002; --md-sys-color-background: #ffffff; --md-sys-color-on-background: #1a1a1a; --md-sys-color-surface: #ffffff; --md-sys-color-on-surface: #1a1a1a; --md-sys-color-surface-variant: #f2f2f2; --md-sys-color-on-surface-variant: #636363; --md-sys-color-outline: #8a8a8a; --md-sys-color-outline-variant: #e6e6e6; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-inverse-surface: #1a1a1a; --md-sys-color-inverse-on-surface: #ffffff; --md-sys-color-inverse-primary: #ff4d55; --md-sys-color-primary-fixed: #e3262f; --md-sys-color-on-primary-fixed: #ffffff; --md-sys-color-primary-fixed-dim: #c41e26; --md-sys-color-on-primary-fixed-variant: #ffffff; --md-sys-color-secondary-fixed: #f2f2f2; --md-sys-color-on-secondary-fixed: #1a1a1a; --md-sys-color-secondary-fixed-dim: #e0e0e0; --md-sys-color-on-secondary-fixed-variant: #1a1a1a; --md-sys-color-tertiary-fixed: #ffc400; --md-sys-color-on-tertiary-fixed: #1a1a1a; --md-sys-color-tertiary-fixed-dim: #ffc400; --md-sys-color-on-tertiary-fixed-variant: #1a1a1a; --md-sys-color-surface-dim: #ebebeb; --md-sys-color-surface-bright: #ffffff; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f7f7f7; --md-sys-color-surface-container: #f2f2f2; --md-sys-color-surface-container-high: #ebebeb; --md-sys-color-surface-container-highest: #e0e0e0; }