/* * DoceLar — tokens de design. * Cores e tipografia: variáveis do Figma 134607:3279 + componentes 134614:8. * Forma e espaçamento: decisão D1 (2026-09-22) — não existem como token no Figma. * Toda tela consome var(--dl-*); nunca hardcode cor/fonte no CSS de tela. * Molde de estrutura: tokens do paginas-conecta [REF:paginas-conecta] */ /* A ordem das camadas é declarada aqui, uma vez: componente sempre vence token, sem depender da ordem de carregamento das folhas (lição 13 §23). */ @layer dl-tokens, dl-components, dl-tema, dl-telas; @layer dl-tokens { /* Inter auto-hospedada [DECISÃO:2026-09-23] — OFL, só os pesos que as variáveis do Figma usam (400/500/600). */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter/inter-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter/inter-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter/inter-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter/inter-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter/inter-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter/inter-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* Forma da aba dobrada: máscara (fill preto = área visível), não cor. Usada pelo card de categoria e pelas telas. */ --dl-dobra-forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 62' preserveAspectRatio='none'%3E%3Cpath d='M0 0C2.85123 0 3.80098 0 7.62884 3.55004C25.8383 21.6485 37.1586 32.7087 58.8137 53.8235C62.7192 57.632 63.7147 58.8737 63.7147 61.8672C60.7281 61.8672 24.3619 61.8672 24.3619 61.8672C11.3143 61.8672 0.738697 51.0633 0.738697 37.736C0.738697 37.736 0 8.98073 0 0Z' fill='black'/%3E%3C/svg%3E"); /* ---- Cores institucionais — [FIGMA-NOTA:134607:3279] ---- */ --dl-azul-marinho: #323D6D; /* títulos, texto forte */ --dl-azul: #2F5AB1; /* AÇÃO: botão, seleção, tab ativa */ --dl-azul-claro: #7793CC; /* avatar, apoio */ /* Faixas de 134834:3229 (login), 134834:3137 (início) e 134834:4330 (em análise): gradientTransform [[0,1,0],[-1,0,1]] = de cima para baixo. D11 revista [DECISÃO:2026-09-24]. */ --dl-degrade-marca: linear-gradient(180deg, var(--dl-azul) 0%, var(--dl-azul-claro) 100%); /* ---- Escala de cinza — [FIGMA-NOTA:134607:3279] ---- */ --dl-branco: #FFFFFF; --dl-cinza-claro: #F5F5F5; /* Light Grey — caixa neutra */ --dl-cinza-10: #E6E6E6; /* borda padrão de card e input */ --dl-cinza-30: #B3B3B3; /* placeholder, desabilitado, dia indisponível */ --dl-cinza-50: #808080; /* meta, timestamp, badge Concluído */ --dl-cinza-70: #4D4D4D; /* corpo de texto */ --dl-cinza-90: #1A1A1A; /* valor preenchido */ --dl-preto: #000000; /* ---- Semânticas ---- Ligadas aos componentes de 134614:8, mas ausentes do frame do DS (D3). */ --dl-sucesso: #2C8B5F; --dl-sucesso-claro: #E1F4EB; --dl-atencao: #BE892D; --dl-atencao-claro: #F7EEDE; --dl-erro: #C13833; --dl-erro-claro: #F8E8E7; /* feedback/info e feedback/info-bg do RR "INFO" (134834:2869). */ --dl-info: #14539E; --dl-info-claro: #E4EEFB; /* feedback/warning e feedback/warning-bg do RR "Sobre o Cancelamento" (134834:3572). Só a pele do Aviso de atenção; badge e estrela seguem em --dl-atencao. */ --dl-aviso-atencao: #A15C00; --dl-aviso-atencao-claro: #FFF1DB; /* A estrela cheia não é variável no Figma — D8 [DECISÃO:2026-09-23]. */ --dl-estrela: #BE892D; /* = Semântica/Atenção */ /* ---- Derivadas — transparências e estados de interação ---- O Figma não desenha hover/pressionado nem véu de modal. Nenhuma cor nova: cada uma é uma cor acima com alfa ou misturada a preto/branco. */ --dl-overlay: rgba(0, 0, 0, 0.55); /* --dl-preto a 55% */ --dl-hover-veu: rgba(26, 26, 26, 0.08); /* --dl-cinza-90 a 8% */ --dl-active-veu: rgba(26, 26, 26, 0.16); /* --dl-cinza-90 a 16% */ --dl-branco-16: rgba(255, 255, 255, 0.16); /* botão Editar do topo 134834:4830 */ --dl-branco-24: rgba(255, 255, 255, 0.24); /* véu sobre superfície azul */ --dl-branco-36: rgba(255, 255, 255, 0.36); --dl-estrela-brilho: rgba(190, 137, 45, 0.75); /* --dl-estrela a 75% */ --dl-estrela-halo: rgba(190, 137, 45, 0.35); /* --dl-estrela a 35% */ /* Escurecer o que é saturado; clarear o que já é escuro — escurecer o marinho o aproximaria do preto e o estado sumiria. */ --dl-azul-hover: color-mix(in srgb, var(--dl-azul) 90%, var(--dl-preto)); --dl-azul-active: color-mix(in srgb, var(--dl-azul) 80%, var(--dl-preto)); --dl-azul-marinho-hover: color-mix(in srgb, var(--dl-azul-marinho) 88%, var(--dl-branco)); --dl-azul-marinho-active: color-mix(in srgb, var(--dl-azul-marinho) 78%, var(--dl-branco)); --dl-erro-hover: color-mix(in srgb, var(--dl-erro) 90%, var(--dl-preto)); --dl-erro-active: color-mix(in srgb, var(--dl-erro) 80%, var(--dl-preto)); --dl-cinza-50-hover: color-mix(in srgb, var(--dl-cinza-50) 90%, var(--dl-branco)); --dl-cinza-50-active: color-mix(in srgb, var(--dl-cinza-50) 85%, var(--dl-preto)); /* ---- Tipografia — [FIGMA-NOTA:134607:3279] ---- Valores das VARIÁVEIS, não da tabela desenhada no frame (D-A). */ --dl-fonte: 'Inter', sans-serif; --dl-h1-tamanho: 32px; --dl-h1-peso: 500; --dl-h1-lh: 32px; --dl-h2-tamanho: 24px; --dl-h2-peso: 500; --dl-h2-lh: 24px; --dl-h3-tamanho: 20px; --dl-h3-peso: 600; --dl-h3-lh: 24px; --dl-body1-tamanho: 14px; --dl-body1-peso: 400; --dl-body1-lh: 1.5; --dl-body1-tom-peso: 600; --dl-body2-tamanho: 12px; --dl-body2-peso: 400; --dl-body2-lh: 1.5; --dl-body2-bold-peso: 600; --dl-body8-tamanho: 8px; --dl-body8-peso: 400; --dl-body8-lh: 1.12; --dl-body8-bold-peso: 600; --dl-body8-bold-lh: 1.2; /* 6px não é token (D2): pesos trocados no Figma e ilegível em mobile. */ /* ---- Forma — [DECISÃO:2026-09-22] (D1) ---- */ --dl-radius-card: 12px; /* card, botão large, tab bar, notificação */ --dl-radius-botao: 8px; /* botão small */ --dl-radius-pill: 999px; /* chip, badge, switch */ /* Nenhum componente tem sombra, exceto a folha do Modal/Info: a separação é por borda e fundo. */ --dl-sombra: none; /* Única sombra do DS: a folha do Modal/Info (134624:275) — marinho a 16%. */ --dl-sombra-folha: 0 -4px 24px rgba(50, 61, 109, 0.16); --dl-foco-anel: 0 0 0 3px rgba(47, 90, 177, 0.35); /* --dl-azul a 35% */ --dl-foco-anel-escuro: 0 0 0 3px rgba(50, 61, 109, 0.45); /* sobre superfície azul */ /* ---- Espaçamento — [DECISÃO:2026-09-22] (D1) ---- 14 e 18 ficam fora da escala e permanecem medidas locais. */ --dl-espaco-1: 4px; --dl-espaco-2: 8px; --dl-espaco-3: 12px; --dl-espaco-4: 16px; --dl-espaco-5: 20px; --dl-espaco-6: 24px; --dl-espaco-8: 32px; /* ---- Motion — o Figma não anima nada (get_motion_context vazio, docs/19). Curvas e durações do DS da VIME (vime-digital-dashboard, tokens/spacing.css) [TELA-NOVA:2026-09-25]. Mobile e desktop: docs/19 e docs/21. */ --dl-ease-saida: cubic-bezier(0.22, 1, 0.36, 1); /* entradas, hover */ --dl-ease-troca: cubic-bezier(0.65, 0, 0.35, 1); /* troca de estado, traço */ --dl-ease-mola: cubic-bezier(0.34, 1.56, 0.64, 1); /* pop: seleção, badge, switch */ --dl-dur-rapida: 120ms; --dl-dur-base: 200ms; --dl-dur-lenta: 360ms; /* ---- Ícones de 134615:2 como máscara ---- Só onde o CSS precisa desenhar sem markup (seta do select, toast, check). Pintados por background-color: a cor continua vindo dos tokens acima. */ --dl-icone-cancelar: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 9L9 15' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 9L15 15' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --dl-icone-sucesso: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 11.08V12C21.9988 14.1564 21.3005 16.2547 20.0093 17.9818C18.7182 19.709 16.9033 20.9725 14.8354 21.5839C12.7674 22.1953 10.5573 22.1219 8.53447 21.3746C6.51168 20.6273 4.78465 19.2461 3.61096 17.4371C2.43727 15.628 1.87979 13.4881 2.02168 11.3363C2.16356 9.18455 2.99721 7.13631 4.39828 5.49706C5.79935 3.85781 7.69279 2.71537 9.79619 2.24013C11.8996 1.7649 14.1003 1.98232 16.07 2.85999' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22 4L12 14.01L9 11.01' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --dl-icone-baixo: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --dl-icone-check: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17L4 12' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* ---- Shell ---- Artboard 375 com conteúdo 335: a régua é a RAZÃO (≈89,3%), não o px. Sem teto e sem breakpoint — acima de 375px não há desenho (D16). */ --dl-largura-tela: 375px; --dl-largura-shell: 100vw; --dl-respiro-lateral: calc(var(--dl-largura-shell) * 20 / 375); --dl-largura-conteudo: calc(var(--dl-largura-shell) - var(--dl-respiro-lateral) * 2); } * { box-sizing: border-box; } body { color: var(--dl-cinza-70); font-family: var(--dl-fonte); font-size: var(--dl-body1-tamanho); line-height: var(--dl-body1-lh); margin: 0; } ::selection { background: var(--dl-azul-claro); color: var(--dl-branco); } /* Foco só no teclado, desenhado com box-shadow: acompanha o raio do elemento, o outline do navegador é sempre retângulo. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus { outline: none; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--dl-foco-anel), var(--dl-sombra-propria, 0 0 transparent); } :where(a, button, summary, label, [role="tab"], [role="button"], [role="link"]) { -webkit-tap-highlight-color: transparent; } /* Rótulo de ação não é texto para copiar; de conteúdo continua selecionável. */ :where( button, summary, [role="tab"], [role="button"], .dl-botao, .dl-btn-pill, .dl-bottom-nav__link, .dl-chip, .dl-lista-item, .dl-paginacao__item, .dl-avaliacao__acao ) { -webkit-user-select: none; user-select: none; } /* Véu por cima da própria superfície em vez de trocar a cor: uma regra serve a todo clicável claro. .dl-botao fica de fora — reage na própria cor. */ :where( .dl-chip, .dl-paginacao__item, .dl-lista-item, .dl-avaliacao__acao, .dl-busca__local-texto ) { transition: box-shadow var(--dl-dur-base) var(--dl-ease-saida), transform var(--dl-dur-base) var(--dl-ease-saida), filter var(--dl-dur-base) var(--dl-ease-saida); } @media (hover: hover) { :where( .dl-chip, .dl-paginacao__item, .dl-lista-item, .dl-avaliacao__acao, .dl-busca__local-texto ):hover:not(:disabled) { box-shadow: inset 0 0 0 999px var(--dl-hover-veu), var(--dl-sombra-propria, 0 0 transparent); } } /* Pressionado afunda 1px: no toque é o único retorno que existe. */ :where( .dl-chip, .dl-paginacao__item, .dl-lista-item, .dl-avaliacao__acao, .dl-busca__local-texto ):active:not(:disabled) { box-shadow: inset 0 0 0 999px var(--dl-active-veu), var(--dl-sombra-propria, 0 0 transparent); transform: translateY(1px); } /* O reduced-motion do .dl-botao mora em dl-components.css: aqui, na camada de tokens, ele perdia para a transition e o scale(.97) do próprio componente. */ @media (prefers-reduced-motion: reduce) { :where(.dl-chip, .dl-paginacao__item, .dl-lista-item, .dl-avaliacao__acao, .dl-busca__local-texto) { transition: none; transform: none; } } h1, h2, h3 { font-family: var(--dl-fonte); color: var(--dl-azul-marinho); } h1 { font-size: var(--dl-h1-tamanho); font-weight: var(--dl-h1-peso); line-height: var(--dl-h1-lh); } h2 { font-size: var(--dl-h2-tamanho); font-weight: var(--dl-h2-peso); line-height: var(--dl-h2-lh); } h3 { font-size: var(--dl-h3-tamanho); font-weight: var(--dl-h3-peso); line-height: var(--dl-h3-lh); } /* O padding é o próprio respiro lateral: o miolo resulta em ≈89,3% da tela. */ .dl-container { box-sizing: border-box; width: var(--dl-largura-shell); max-width: 100%; margin-inline: auto; padding-inline: var(--dl-respiro-lateral); } /* O respiro vale uma vez por tela. !important porque esta folha é camada e o CSS do Elementor não: sem ele, qualquer regra não-camada do Elementor venceria independentemente da especificidade (lição 13 §20). */ .elementor-element.e-con:has(.dl-container), .elementor-element.e-con-boxed:has(.dl-container), .elementor-widget-shortcode:has(.dl-container) { --content-width: 100% !important; --container-max-width: 100% !important; --padding-left: 0px !important; --padding-right: 0px !important; --padding-inline-start: 0px !important; --padding-inline-end: 0px !important; --padding-top: 0px !important; --padding-bottom: 0px !important; --padding-block-start: 0px !important; --padding-block-end: 0px !important; padding-inline: 0 !important; padding-block: 0 !important; } .elementor-element.e-con:has(.dl-container) > .e-con-inner { max-width: 100% !important; width: 100% !important; padding-inline: 0 !important; padding-block: 0 !important; } .dl-container .dl-container, .elementor .elementor-shortcode > .dl-container, .elementor .elementor-widget-shortcode .dl-container { width: 100%; max-width: 100%; padding-inline: 0; } .dl-card { background: var(--dl-branco); border: 1px solid var(--dl-cinza-10); border-radius: var(--dl-radius-card); } /* Classe herdada do markup do fork; o raio real vem de .dl-botao, que está numa camada acima. */ .dl-btn-pill { border-radius: var(--dl-radius-pill); font-family: var(--dl-fonte); font-weight: 600; border: none; cursor: pointer; } }