/* ========================================================================== Digiliza — Design Tokens -------------------------------------------------------------------------- Fonte única de verdade para cor, tipografia, espaçamento e elevação. Valores levantados no portal oficial de marca — ver BRANDING.md. REGRA: nenhum HEX, nome de fonte ou tamanho literal fora deste arquivo. Todo o resto do CSS consome estas custom properties. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tipografia — arquivos self-hosted (sem CDN em runtime) Space Grotesk e DM Sans são as fontes que o portal indica para interfaces digitais e usa no próprio site. Ambas SIL OFL 1.1 → self-host permitido. A fonte principal da marca (Univia Pro) é comercial e não tem licença de webfont; ver BRANDING.md §5.3. Os dois arquivos são variáveis: um arquivo cobre toda a faixa de pesos. -------------------------------------------------------------------------- */ @font-face { font-family: 'Space Grotesk'; src: url('../assets/fonts/SpaceGrotesk-latin-var.woff2') format('woff2-variations'), url('../assets/fonts/SpaceGrotesk-latin-var.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; /* Latin + Latin-1 Supplement: cobre todos os acentos do pt-BR */ 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: 'DM Sans'; src: url('../assets/fonts/DMSans-latin-var.woff2') format('woff2-variations'), url('../assets/fonts/DMSans-latin-var.woff2') format('woff2'); font-weight: 100 1000; font-style: normal; font-display: swap; 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; } :root { /* ======================================================================== 2. PALETA DA MARCA — portal /cores Valores canônicos. O Tiffany foi confirmado por amostragem de pixel no PNG oficial do logo (#00D8CC em 99,8% dos pixels coloridos). ======================================================================== */ /* --- Tiffany — primária. "CTAs, links, destaques digitais e interfaces" --- */ --brand-tiffany-50: #F2FDFC; --brand-tiffany-100: #CBF5F2; --brand-tiffany-300: #7EE8DF; --brand-tiffany-500: #2AD4C8; --brand-tiffany-700: #00D8CC; --brand-tiffany: var(--brand-tiffany-700); /* Parada final do gradiente da marca, do CSS de produção do portal. */ --brand-tiffany-deep: #00C4C4; /* --- Laranja — "Alertas, badges, campanhas e pontos de atenção" --- */ --brand-orange-50: #FFF5F0; --brand-orange-100: #FFE6D3; --brand-orange-300: #FFAA73; --brand-orange-500: #FF8439; --brand-orange-700: #FF6625; --brand-orange: var(--brand-orange-700); /* --- Cinza — "Textos, fundos institucionais e hierarquia visual" --- */ --brand-gray-50: #F5F5F5; --brand-gray-100: #D4D4D4; --brand-gray-300: #949494; --brand-gray-500: #5C5C5C; --brand-gray-700: #303030; --brand-gray: var(--brand-gray-700); /* --- Branco — "Fundos, respiro visual e contraste com a paleta" --- */ --brand-white-50: #FFFFFF; --brand-white-100: #FAFAFA; --brand-white-300: #F0F0F0; --brand-white-500: #E8E8E8; --brand-white-700: #D9D9D9; --brand-white: var(--brand-white-50); /* ======================================================================== 3. PAPÉIS SEMÂNTICOS A camada que o resto do CSS realmente consome. Trocar uma cor da marca acima reflete automaticamente em tudo que usa estes papéis. Pares de contraste verificados pela WCAG 2.1 — ver BRANDING.md §3.5. ======================================================================== */ --color-bg: var(--brand-white-50); --color-bg-subtle: var(--brand-tiffany-50); --color-surface: var(--brand-white-50); --color-surface-sunken: var(--brand-gray-50); --color-text: var(--brand-gray-700); /* 13,20:1 sobre bg — AAA */ --color-text-muted: var(--brand-gray-500); /* 6,69:1 sobre bg — AA */ --color-text-on-accent: var(--brand-gray-700); /* 7,35:1 sobre Tiffany — AAA. Branco daria 1,80:1: reprovado. */ --color-text-inverse: var(--brand-white-50); /* 13,20:1 sobre Cinza — AAA */ --color-accent: var(--brand-tiffany); --color-accent-hover: var(--brand-tiffany-500); --color-accent-soft: var(--brand-tiffany-100); --color-attention: var(--brand-orange); /* Cinza 300 é limítrofe (3,03:1): só borda e separador, nunca texto. */ --color-border: var(--brand-white-700); --color-border-strong: var(--brand-gray-300); --color-focus-ring: var(--brand-gray-700); /* ======================================================================== 4. TIPOGRAFIA Escala conforme portal /tipografia. Famílias conforme BRANDING.md §5. ======================================================================== */ --font-display: 'Space Grotesk', 'Univia Pro', ui-sans-serif, system-ui, sans-serif; --font-sans: 'DM Sans', 'Univia Pro', ui-sans-serif, system-ui, sans-serif; /* Escala documentada pelo portal (px → rem, base 16px) */ --text-h1: 3rem; /* 48px — Título */ --text-h2: 2rem; /* 32px — Subtítulo */ --text-h3: 1.5rem; /* 24px — Destaque */ --text-body: 1.125rem; /* 18px — Corpo */ --text-caption: 0.875rem; /* 14px — Legenda */ --text-button: 0.875rem; /* 14px — Botão */ /* Abaixo da menor escala do portal. Usado só em rótulo de seção e linha de apoio, nunca em texto corrido. */ --text-micro: 0.75rem; /* 12px */ /* Pesos */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Entrelinha e tracking — do CSS de produção do portal */ --leading-tight: 1.25; --leading-snug: 1.375; --leading-relaxed: 1.625; --tracking-tight: -0.025em; --tracking-wide: 0.1em; /* ======================================================================== 5. ESPAÇAMENTO — unidade base 0.25rem (--spacing do portal) ======================================================================== */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* ======================================================================== 6. FORMA E ELEVAÇÃO — do CSS de produção do portal ======================================================================== */ --radius: 0.85rem; /* raio base da marca */ --radius-sm: calc(var(--radius) * 0.5); --radius-lg: calc(var(--radius) * 1.5); --radius-full: 999px; --shadow-soft: 0 1px 2px rgb(22 22 22 / 0.04), 0 8px 24px -12px rgb(22 22 22 / 0.12); /* Deriva do token: trocar o Tiffany troca a sombra junto. */ --shadow-glow: 0 10px 40px -12px color-mix(in oklab, var(--brand-tiffany) 45%, transparent); --gradient-brand: linear-gradient(135deg, var(--brand-tiffany), var(--brand-tiffany-deep)); /* ======================================================================== 7. MOVIMENTO ======================================================================== */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --duration: 0.15s; /* ======================================================================== 8. LAYOUT ======================================================================== */ --card-max-width: 26rem; /* 416px — cartão confortável no desktop */ --foto-size: 8.25rem; /* 132px — retrato da pessoa */ --tap-target-min: 2.75rem; /* 44px — alvo mínimo de toque (WCAG) */ /* Logo: mínimo digital de 24px é regra da marca (portal /logo). */ --logo-height: 2.25rem; /* 36px — acima do mínimo de 24px */ --logo-height-min: 1.5rem; /* 24px — nunca aplicar abaixo disso */ } /* -------------------------------------------------------------------------- 9. Redução de movimento Deliberadamente NÃO zeramos --duration aqui. `prefers-reduced-motion` existe para desarmar gatilho vestibular — deslocamento, escala, parallax. Transição de cor não é movimento, e é ela que sinaliza hover e foco. Zerar tudo removeria o feedback sem remover risco nenhum. O que de fato se desliga está em cartao.css: animação e deslocamento. -------------------------------------------------------------------------- */