/* ========================================================================== Edifício Montello — tokens.css -------------------------------------------------------------------------- GERADO a partir do frontmatter de Site/docs/DESIGN.md. NÃO editar à mão. Para mudar um token: edite o frontmatter do DESIGN.md e regenere. Mapeamento: {colors.x} → --color-x · {typography.x} → --font-x-* {rounded.x} → --radius-x · {spacing.x} → --space-x Padrão: Material/sites/design-system-sites.md ========================================================================== */ /* ----- Fonte Inter auto-hospedada (variável: todos os pesos num arquivo) --- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/InterVariable.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/InterVariable-Italic.woff2") format("woff2"); } :root { /* ====================================================================== COLORS (frontmatter colors → --color-*) ====================================================================== */ --color-brand-deep: #212b24; /* Verde Profundo */ --color-brand: #425e4c; /* Verde Principal */ --color-brand-corporate: #303a32; /* Verde Corporativo */ --color-brand-soft: #e6eae7; /* Verde Suave */ --color-ink: #1d201c; --color-ink-muted: #41463f; --color-ink-subtle: #5f655f; --color-canvas: #f8f9f8; /* Branco Institucional — fundo de página */ --color-surface: #ffffff; /* cards (branco puro só aqui) */ --color-surface-sunken: #eef0ee; --color-hairline: #e0e3e0; --color-hairline-strong: #cbcfca; --color-on-dark: #f8f9f8; --color-on-dark-muted: rgba(248, 249, 248, 0.66); --color-accent: #2f8b56; /* verde-vivo — CTA sólido + highlight de ícone */ --color-accent-pressed: #27764a; --color-accent-tint: #d9ece1; --color-on-accent: #ffffff; --color-focus: #6b8c77; --color-error: #b3402f; --color-error-tint: #f6e0db; --color-success: #3f8757; /* --color-*-rgb (para uso com alpha em rgba()) */ --color-brand-deep-rgb: 33, 43, 36; --color-ink-rgb: 29, 32, 28; --color-accent-rgb: 47, 139, 86; /* ====================================================================== TYPOGRAPHY (frontmatter typography → --font-*) Tamanhos grandes são fluidos (clamp): o teto é o valor do frontmatter (desktop) e encolhe no mobile (mobile-first). ====================================================================== */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* display */ --font-display-size: clamp(2.25rem, 1.60rem + 2.80vw, 3.25rem); --font-display-weight: 700; --font-display-leading: 1.05; --font-display-tracking:-0.02em; /* h1 */ --font-h1-size: clamp(2rem, 1.55rem + 1.95vw, 2.5rem); --font-h1-weight: 700; --font-h1-leading: 1.1; --font-h1-tracking:-0.02em; /* h2 */ --font-h2-size: clamp(1.5rem, 1.28rem + 0.95vw, 1.75rem); --font-h2-weight: 600; --font-h2-leading: 1.2; --font-h2-tracking:-0.01em; /* h3 */ --font-h3-size: clamp(1.25rem, 1.16rem + 0.40vw, 1.375rem); --font-h3-weight: 600; --font-h3-leading: 1.3; /* body-lg */ --font-body-lg-size: 1.1875rem; --font-body-lg-weight: 400; --font-body-lg-leading: 1.6; /* body */ --font-body-size: 1.0625rem; /* 17px — corpo, público 30-55 */ --font-body-weight: 400; --font-body-leading: 1.6; /* body-sm */ --font-body-sm-size: 0.9375rem; --font-body-sm-weight: 400; --font-body-sm-leading: 1.5; /* label */ --font-label-size: 0.9375rem; --font-label-weight: 600; --font-label-leading: 1.2; /* eyebrow */ --font-eyebrow-size: 0.8125rem; --font-eyebrow-weight: 600; --font-eyebrow-leading: 1.2; --font-eyebrow-tracking:0.08em; /* button (rótulo do CTA — texto grande p/ AA com o acento) */ --font-button-size: 1.1875rem; /* 19px / 700 */ --font-button-weight: 700; --font-button-leading: 1.2; /* tag */ --font-tag-size: 0.8125rem; --font-tag-weight: 600; --font-tag-leading: 1.2; /* pesos nomeados (manual: usar só a partir de Light) */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ====================================================================== RADIUS (frontmatter rounded → --radius-*) ====================================================================== */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 9999px; /* ====================================================================== SPACING (frontmatter spacing → --space-*) ====================================================================== */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-section: 96px; /* Padding interno de componente (do bloco `components` do DESIGN.md: paddingBlock/paddingInline). É token de COMPONENTE, ajustado opticamente para o controle — não um passo da escala de layout acima. Assim "todo espaço vem de token" vale literalmente: nada de rem cru no CSS. */ --space-pad-button: 0.95rem 1.6rem; /* button-primary / button-secondary */ --space-pad-tag: 0.25rem 0.625rem; /* tag */ --space-pad-selo: 0.375rem 0.875rem; /* selo-local */ --space-pad-input: 0.75rem 0.875rem; /* input */ /* ====================================================================== ICON SIZES — sistema de iconografia two-tone (SVGs em src/icons/). Estilo: estrutura em brand-deep + destaque em verde-vivo num sub-elemento (cores embutidas no SVG). O verde-vivo é o highlight do ícone; o CTA segue sendo o único bloco sólido grande na cor. Informa, não decora: 1 por tag/selo. ====================================================================== */ --icon-sm: 16px; /* dentro de tag */ --icon-md: 20px; /* selo / inline com corpo */ --icon-lg: 24px; /* destaque e documentação */ /* ====================================================================== COMPLEMENTO VERID — não vem do frontmatter do DESIGN.md. O spec do Google Labs não modela motion/z-index/sombra/gradiente; estes são defaults da stack Verid (arquitetura-sites.md). ====================================================================== */ /* Sombra — sutil, com tinta verde (base = brand-deep), não preto puro */ --shadow-sm: 0 1px 2px rgba(var(--color-brand-deep-rgb), 0.06), 0 1px 3px rgba(var(--color-brand-deep-rgb), 0.08); --shadow-card: 0 4px 12px rgba(var(--color-brand-deep-rgb), 0.08), 0 2px 6px rgba(var(--color-brand-deep-rgb), 0.06); --shadow-lg: 0 18px 40px rgba(var(--color-brand-deep-rgb), 0.14), 0 6px 14px rgba(var(--color-brand-deep-rgb), 0.08); /* Scrim do hero — único gradiente do projeto (funcional, legibilidade) */ --scrim-hero: linear-gradient( to top, rgba(var(--color-brand-deep-rgb), 0.92) 0%, rgba(var(--color-brand-deep-rgb), 0.72) 32%, rgba(var(--color-brand-deep-rgb), 0.45) 64%, rgba(var(--color-brand-deep-rgb), 0.30) 100%); /* Movimento */ --motion-fast: 160ms; --motion-base: 240ms; --motion-slow: 400ms; --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --motion-ease: cubic-bezier(0.4, 0, 0.2, 1); /* Camadas */ --z-base: 1; --z-cta-bar: 90; --z-header: 100; --z-overlay: 200; /* Layout */ --container-max: 1200px; --container-narrow: 680px; --gutter: clamp(1.25rem, 5vw, 2.5rem); --header-h: 4.25rem; /* ====================================================================== MONTELLO-LOCAL — polish de interação (estética "Apple", SÓ deste site). Não faz parte do contrato de tokens canônico Verid; vive só aqui, por decisão do gestor (não bagunçar a organização compartilhada). ====================================================================== */ --ease-ios: cubic-bezier(0.32, 0.72, 0, 1); /* curva "mola" iOS: aberturas e gestos */ --blur-glass: 16px; /* vidro fosco (backdrop-filter) */ --scrim-immersive: #0e1310; /* fundo do lightbox: quase preto, tinta verde */ --radius-media: 14px; /* cantos da mídia no lightbox */ } /* Acessibilidade [INVARIANTE]: respeitar quem pediu menos movimento */ @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; } }