/* Fonte do projeto (self-hosted) — define a família @font-face "Inter". */ @import url("../fonts/fonts.css"); /* ============================================================= Static Sites DS — tokens Fonte única de verdade para cores, tipografia, espaçamento, raios, sombra e grid. Nenhum valor visual deve nascer fora daqui: se não está como token, não se usa. Dois itens variam por PROJETO (e só esses dois): 1. A matiz principal (--hue / --sat abaixo). 2. A família tipográfica (--ff abaixo). Todo o resto é fixo no sistema. ============================================================= */ :root { /* ---------------------------------------------------------- COR — paleta de espectro único A paleta nasce de UMA matiz principal em HSL. Todos os tons (claros, escuros, neutros) mantêm a mesma matiz, variando só luminosidade e saturação. Nos tons muito escuros a saturação cai de propósito (escuro saturado lê como "sujo"). Proibido branco absoluto (#fff) e preto absoluto (#000): o "branco" e o "preto" são versões tingidas da matiz. >>> NENHUMA COR É DEFINIDA PELO SISTEMA. <<< Só a REGRA (a rampa derivada) é fixa. Os valores --hue/--sat abaixo são PLACEHOLDER — existem só para o showcase e o UI kit renderizarem. Cada projeto define a matiz e a rampa se recolore sozinha. Não tratar 220 como cor "oficial". ---------------------------------------------------------- */ --hue: 220; /* PLACEHOLDER — definir por projeto */ --sat: 46%; /* PLACEHOLDER — definir por projeto */ --c-50: hsl(var(--hue) var(--sat) 97%); /* "branco" da paleta */ --c-100: hsl(var(--hue) 44% 88%); --c-200: hsl(var(--hue) 44% 78%); --c-300: hsl(var(--hue) 45% 66%); --c-400: hsl(var(--hue) var(--sat) 58%); --c-500: hsl(var(--hue) var(--sat) 50%); /* cor principal */ --c-600: hsl(var(--hue) 48% 42%); --c-700: hsl(var(--hue) 50% 32%); --c-800: hsl(var(--hue) 30% 18%); --c-900: hsl(var(--hue) 16% 9%); --c-950: hsl(var(--hue) 8% 3%); /* "preto" da paleta */ /* Aliases semânticos — usar estes no código de produto */ --c-bg: var(--c-50); /* fundo claro tingido (no lugar do branco) */ --c-surface: hsl(var(--hue) 40% 99%); --c-ink: var(--c-950); /* texto principal (no lugar do preto) */ --c-muted: var(--c-700); /* texto secundário */ --c-border: var(--c-200); --c-primary: var(--c-500); --c-primary-strong: var(--c-600); /* Cor secundária OPCIONAL — só via esquema de harmonia com a principal. Exemplo: complementar (matiz oposta, +180°). 220 + 180 = 40. Usar com parcimônia (CTA, destaque, alerta); fundos extensos e texto corrido continuam na matiz principal. */ --c-accent: hsl(40 80% 55%); /* PLACEHOLDER de exemplo — não é cor oficial */ /* ---------------------------------------------------------- TIPOGRAFIA 6 títulos (H1–H6) + 4 parágrafos (XL/L/M/S). Títulos: peso 600 (SemiBold), line-height 120%. Parágrafos: peso 300 (Light), line-height 150%. Tamanhos abaixo são DESKTOP; o bloco mobile está em base.css (troca em ≤ 880px). A família varia por projeto. ---------------------------------------------------------- */ --ff: "Bricolage Grotesque", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* Família de DISPLAY (títulos H1–H6). Mesmo família do corpo neste projeto. */ --ff-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif; --fw-title: 600; --fw-body: 300; --lh-title: 1.2; --lh-body: 1.5; --fs-h1: 56px; --fs-h2: 48px; --fs-h3: 40px; --fs-h4: 32px; --fs-h5: 24px; --fs-h6: 20px; --fs-p-xl: 28px; --fs-p-l: 24px; --fs-p-m: 20px; --fs-p-s: 16px; /* ---------------------------------------------------------- ESPAÇAMENTO — múltiplos de 4 até 32, múltiplos de 8 acima. Zona fina (4–32): 4 · 8 · 12 · 16 · 20 · 24 · 28 · 32. Zona ampla (40+): 40 · 48 · 64 · 80 · 96 · 128 · 168 · 192 · 256. Acima de 32 todo valor é múltiplo de 8; nada de ímpares (56→64 etc. continuam na régua de 8). Faltou? Sobe pro próximo. ---------------------------------------------------------- */ --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-28: 28px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; --sp-64: 64px; --sp-80: 80px; --sp-96: 96px; --sp-128: 128px; --sp-168: 168px; --sp-192: 192px; --sp-256: 256px; /* ---------------------------------------------------------- RAIOS — cinco valores no sistema inteiro: 1 · 4 · 8 · 24 · 99 (99 = pílula / círculo). Qualquer outro (2, 6, 12, 16, 32) é proibido. ---------------------------------------------------------- */ --r-xs: 1px; --r-sm: 4px; --r-md: 8px; --r-lg: 24px; --r-full: 99px; /* ---------------------------------------------------------- SOMBRA — ou o efeito completo, ou nada Stack de 5 camadas progressivas (quase invisível → visível). Não cortar camadas, não mudar distâncias, não mudar a cor base rgba(10, 39, 41, …). ---------------------------------------------------------- */ --shadow: 0 413px 116px 0 rgba(10, 39, 41, 0.00), 0 264px 106px 0 rgba(10, 39, 41, 0.01), 0 149px 89px 0 rgba(10, 39, 41, 0.02), 0 66px 66px 0 rgba(10, 39, 41, 0.03), 0 17px 36px 0 rgba(10, 39, 41, 0.04); /* ---------------------------------------------------------- GRID / WORKSPACE — largura útil fixa, centralizada, dividida em colunas iguais separadas por gutters. Valores default = Desktop. base.css ajusta por breakpoint. ---------------------------------------------------------- */ --workspace: 1280px; /* largura útil (cap; Wide ≥2400 reusa) */ --cols: 12; --gutter: 32px; /* ---------------------------------------------------------- BOTÕES — 3 tamanhos. Peso sempre 400; escala de fonte própria (independente da hierarquia tipográfica). O padding lateral 48px do médio agora é um valor válido da escala (zona de múltiplos de 8) — deixou de ser exceção. ---------------------------------------------------------- */ --btn-sm-fs: 16px; --btn-sm-px: 32px; --btn-sm-py: 16px; --btn-md-fs: 20px; --btn-md-px: 48px; --btn-md-py: 24px; --btn-lg-fs: 24px; --btn-lg-px: 32px; --btn-lg-py: 32px; --btn-fw: 400; }