/* ========================================================================== tokens.css — PONTE de contrato (base-kit --c-* → Design System --color-*) Todos os valores vêm de tokens-ds.css (design-system/tokens.css do cliente). Zero hardcode de cor/fonte: só reaproveita as vars do DS. As famílias (--font-display/-body/-mono) e sombras (--shadow-sm/md/lg) já são definidas por tokens-ds.css — NÃO redefinir aqui. Import order no : tokens-ds.css → tokens.css → reset → base → ... ========================================================================== */ :root{ /* superfícies / texto (contrato base-kit) */ --c-bg: var(--color-bg); /* off-white #F6F4F0 */ --c-surface: var(--color-surface); /* branco #FFFFFF */ --c-text: var(--color-ink); /* #12201F */ --c-muted: var(--color-ink-muted); /* #5B6C6A */ --c-white: var(--color-surface); /* #FFFFFF */ --c-dark: var(--color-bg-brand); /* teal #0E5254 (seções dark) */ /* marca — primary = teal (eyebrow/links); acento = âmbar (só em dose) */ --c-primary: var(--color-bg-brand); --c-primary-dark: #0A3D3F; /* shade do teal p/ hover de link */ --c-accent: var(--color-accent); /* âmbar #E8912A */ /* neutros / hairlines (derivados do concreto) */ --c-n200: #DEDAD1; /* borda/hairline clara (tint do concreto) */ --c-n400: var(--color-concrete-dark); /* #8F8D87 */ --c-n500: var(--color-ink-muted); /* #5B6C6A */ /* forma — raio pequeno (arquétipo técnico, precisão de corte) */ --r-sm: var(--radius-sm); /* 2px */ --r-md: var(--radius-md); /* 4px */ --r-lg: var(--radius-lg); /* 6px */ --r-pill: var(--radius-full); /* só tag/pill de filtro */ /* layout */ --container: var(--container-max); /* 1280px */ --px: clamp(24px, 5vw, 48px); /* movimento + header */ --ease: var(--ease-out); --header-h: 76px; }