/* ============================================================================
ds-web.css · Design System web Don Artesano & CubasFarm · Fases 1-3 (D12)
Fonte da verdade: Tokens/tokens.json (nó web) · specs: 45 componentes (nó web.componentes do tokens.json)
Origem: portado do versão anterior (Tentativas Antigas) em 07/07/2026, com as decisões
D1 (texto botão CF), D3 (Ônix Destaque DA, secundário/link CF) aplicadas
na camada de tokens de marca. MONTADO, ainda não aplicado em produção.
Uso: ou .
============================================================================ */
@layer reset, tokens, base, atoms, molecules, organisms, templates, utilities;
/* ================================================================
TOKENS · núcleo (gerado do DTCG pelo Style Dictionary, versão anterior)
================================================================ */
@layer tokens {
:root {
/* Texto sobre bg primário · idêntico em DA e CF */
--action-primary-text: #ffffff;
/* Texto sobre bg primário invertido (botão sobre surface escura) */
--action-primary-text-inverse: #323643;
--avatar-size-lg: 40px;
--avatar-size-md: 32px;
--avatar-size-sm: 24px;
--avatar-size-xl: 64px;
/* Borda padrão de input/card */
--border-default: #d9d9d9;
/* Borda sobre surface inverse */
--border-inverse: #ffffff;
/* Borda editorial · uso pontual */
--border-strong: #323643;
/* Divider muito sutil */
--border-subtle: #ededed;
--border-width-bold: 3px;
--border-width-default: 1.5px;
--border-width-hairline: 0.5px;
/* Focus ring (proposta) */
--border-width-thick: 2px;
/* Botão secundário */
--border-width-thin: 1px;
--breakpoint-desktop: 1025px;
--breakpoint-mobile: 0px;
--breakpoint-tablet: 768px;
--breakpoint-wide: 1440px;
--canvas-feed-height: 1440px;
--canvas-feed-width: 1080px;
--canvas-story-height: 1920px;
--canvas-story-width: 1080px;
/* Azul Ônix · EXCLUSIVA Don Artesano, o Destaque (decisão D3) · nunca na CubasFarm */
--color-azul-onix: #1b212d;
/* Branco Resina · fundos claros quentes */
--color-branco-resina: #f2ead9;
/* Branco SSM · neutro absoluto, texto sobre escuro */
--color-branco-ssm: #ffffff;
/* Cinza Quartzo · subtítulos/menus/legendas */
--color-cinza-quartzo: #606470;
/* Dourado · exclusivo CubasFarm. Proibido em Don Artesano. */
--color-dourado: #d19f47;
/* Borda padrão de controles e cards */
--color-neutro-border-default: #d9d9d9;
/* Linha sutil entre seções */
--color-neutro-border-subtle: #ededed;
/* Page canvas grey · fundo de docs / app surface secundária */
--color-neutro-canvas: #f8f8f8;
/* Vermelho escuro · error state (AA sobre brancos) */
--color-state-error: #a8281c;
/* Azul escuro · info state (AA sobre brancos) */
--color-state-info: #1f4d8c;
/* Verde escuro · success state (AA sobre brancos) */
--color-state-success: #1f6b3e;
/* Âmbar escuro · warning state. NÃO confundir com dourado (#D19F47, brand exclusivo CF). */
--color-state-warning: #9c6a1e;
/* Titânio Sólido · principal (D18): dominante na DA, uso comedido na CF */
--color-titanio-solido: #323643;
/* Wide breakpoint */
--container-max-width: 1440px;
/* 48px */
--container-padding-x-desktop: 48px;
/* 16px */
--container-padding-x-mobile: 16px;
/* Default · accordions, dropdowns */
--duration-base: 300ms;
/* Reveals, fades editoriais */
--duration-editorial: 800ms;
/* Hover, color transitions */
--duration-fast: 200ms;
/* Feedback imediato · focus, press */
--duration-instant: 100ms;
/* Slide-ins, modals */
--duration-slow: 500ms;
--easing-default: cubic-bezier(0.4, 0, 0.2, 1);
/* Curva premium · entradas suaves */
--easing-editorial: cubic-bezier(0.22, 1, 0.36, 1);
--easing-in: cubic-bezier(0.4, 0, 1, 1);
--easing-out: cubic-bezier(0, 0, 0.2, 1);
/* Default · sobrescrito por [data-brand] para usar accent. outline: 2px solid var(--focus-ring); outline-offset: 2px */
--focus-ring: #323643;
/* Legenda · 28px */
--font-body-2xl-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Legenda · 28px */
--font-body-2xl-font-size: 28px;
/* Legenda · 28px */
--font-body-2xl-font-weight: 400;
/* Legenda · 28px */
--font-body-2xl-letter-spacing: 0;
/* Legenda · 28px */
--font-body-2xl-line-height: 1.3;
/* Corpo · 35px (canvas social) */
--font-body-3xl-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Corpo · 35px (canvas social) */
--font-body-3xl-font-size: 35px; /* Corpo 35px: drift 40px corrigido */
/* Corpo · 35px (canvas social) */
--font-body-3xl-font-weight: 400;
/* Corpo · 35px (canvas social) */
--font-body-3xl-letter-spacing: 0;
/* Corpo · 35px (canvas social) */
--font-body-3xl-line-height: 1.4;
--font-body-lg-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-body-lg-font-size: 16px;
--font-body-lg-font-weight: 400;
--font-body-lg-letter-spacing: 0;
--font-body-lg-line-height: 1.4;
/* Web · Body · 14px */
--font-body-md-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Web · Body · 14px */
--font-body-md-font-size: 14px;
/* Web · Body · 14px */
--font-body-md-font-weight: 400;
/* Web · Body · 14px */
--font-body-md-letter-spacing: 0;
/* Web · Body · 14px */
--font-body-md-line-height: 1.55;
/* Web · Caption · 12px */
--font-body-sm-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Web · Caption · 12px */
--font-body-sm-font-size: 12px;
/* Web · Caption · 12px */
--font-body-sm-font-weight: 400;
/* Web · Caption · 12px */
--font-body-sm-letter-spacing: 0;
/* Web · Caption · 12px */
--font-body-sm-line-height: 1.4;
/* Credito · 22px */
--font-body-xl-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Credito · 22px */
--font-body-xl-font-size: 22px;
/* Credito · 22px */
--font-body-xl-font-weight: 400;
/* Credito · 22px */
--font-body-xl-letter-spacing: 0;
/* Credito · 22px */
--font-body-xl-line-height: 1.3;
--font-body-xs-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-body-xs-font-size: 10px;
--font-body-xs-font-weight: 400;
--font-body-xs-letter-spacing: 0;
--font-body-xs-line-height: 1.55;
/* H2 · 56px */
--font-display-2xl-font-family: 'Playfair Display', Georgia, serif;
/* H2 · 56px */
--font-display-2xl-font-size: 56px;
/* H2 · 56px */
--font-display-2xl-font-weight: 500;
/* H2 · 56px */
--font-display-2xl-letter-spacing: 0;
/* H2 · 56px */
--font-display-2xl-line-height: 1.1;
/* H1 · 80px */
--font-display-3xl-font-family: 'Playfair Display', Georgia, serif;
/* H1 · 80px */
--font-display-3xl-font-size: 80px;
/* H1 · 80px */
--font-display-3xl-font-weight: 500;
/* H1 · 80px */
--font-display-3xl-letter-spacing: 0;
/* H1 · 80px */
--font-display-3xl-line-height: 1.1;
/* Display Hero · canvas social 200px */
--font-display-hero-font-family: 'Playfair Display', Georgia, serif;
/* Display Hero · canvas social 200px */
--font-display-hero-font-size: 200px;
/* Display Hero · canvas social 200px */
--font-display-hero-font-weight: 500;
/* Display Hero · canvas social 200px */
--font-display-hero-letter-spacing: 0;
/* Display Hero · canvas social 200px */
--font-display-hero-line-height: 1.1;
--font-display-lg-font-family: 'Playfair Display', Georgia, serif;
--font-display-lg-font-size: 32px;
--font-display-lg-font-weight: 500;
--font-display-lg-letter-spacing: 0;
--font-display-lg-line-height: 1.1;
--font-display-md-font-family: 'Playfair Display', Georgia, serif;
--font-display-md-font-size: 28px;
--font-display-md-font-weight: 500;
--font-display-md-letter-spacing: 0;
--font-display-md-line-height: 1.1;
--font-display-sm-font-family: 'Playfair Display', Georgia, serif;
--font-display-sm-font-size: 22px;
--font-display-sm-font-weight: 500;
--font-display-sm-letter-spacing: 0;
--font-display-sm-line-height: 1.1;
/* Web · H1 Desktop */
--font-display-xl-font-family: 'Playfair Display', Georgia, serif;
/* Web · H1 Desktop */
--font-display-xl-font-size: 48px;
/* Web · H1 Desktop */
--font-display-xl-font-weight: 500;
/* Web · H1 Desktop */
--font-display-xl-letter-spacing: 0;
/* Web · H1 Desktop */
--font-display-xl-line-height: 1.1;
/* Família display · títulos editoriais. NUNCA em caixa alta. */
--font-family-display: 'Playfair Display', Georgia, serif;
/* Família mono · código em docs, valores técnicos */
/* Família sans · UI, body, labels */
--font-family-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* type/button-lg · 28px */
--font-heading-lg-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* type/button-lg · 28px */
--font-heading-lg-font-size: 28px;
/* type/button-lg · 28px */
--font-heading-lg-font-weight: 700;
/* type/button-lg · 28px */
--font-heading-lg-letter-spacing: 0.1em;
/* type/button-lg · 28px */
--font-heading-lg-line-height: 1.1;
/* Tag · 22px */
--font-heading-md-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Tag · 22px */
--font-heading-md-font-size: 22px;
/* Tag · 22px */
--font-heading-md-font-weight: 700;
/* Tag · 22px */
--font-heading-md-letter-spacing: 0.1em;
/* Tag · 22px */
--font-heading-md-line-height: 1.2;
/* Web · Section Title · 14px */
--font-heading-sm-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Web · Section Title · 14px */
--font-heading-sm-font-size: 14px;
/* Web · Section Title · 14px */
--font-heading-sm-font-weight: 700;
/* Web · Section Title · 14px */
--font-heading-sm-letter-spacing: 0.1em;
/* Web · Section Title · 14px */
--font-heading-sm-line-height: 1.2;
/* H3 · 40px · Cabecalho de seção */
--font-heading-xl-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* H3 · 40px · Cabecalho de seção */
--font-heading-xl-font-size: 40px;
/* H3 · 40px · Cabecalho de seção */
--font-heading-xl-font-weight: 700;
/* H3 · 40px · Cabecalho de seção */
--font-heading-xl-letter-spacing: 0.1em;
/* H3 · 40px · Cabecalho de seção */
--font-heading-xl-line-height: 1.1;
--font-heading-xs-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-heading-xs-font-size: 10px;
--font-heading-xs-font-weight: 700;
--font-heading-xs-letter-spacing: 0.1em;
--font-heading-xs-line-height: 1.2;
--font-label-2xs-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-label-2xs-font-size: 9px;
--font-label-2xs-font-weight: 600;
--font-label-2xs-letter-spacing: 0;
--font-label-2xs-line-height: 1.2;
/* Web · Price · 18px */
--font-label-lg-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Web · Price · 18px */
--font-label-lg-font-size: 18px;
/* Web · Price · 18px */
--font-label-lg-font-weight: 600;
/* Web · Price · 18px */
--font-label-lg-letter-spacing: 0;
/* Web · Price · 18px */
--font-label-lg-line-height: 1.2;
--font-label-md-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-label-md-font-size: 14px;
--font-label-md-font-weight: 600;
--font-label-md-letter-spacing: 0;
--font-label-md-line-height: 1.2;
--font-label-sm-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-label-sm-font-size: 12px;
--font-label-sm-font-weight: 600;
--font-label-sm-letter-spacing: 0;
--font-label-sm-line-height: 1.2;
--font-label-xs-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-label-xs-font-size: 10px;
--font-label-xs-font-weight: 600;
--font-label-xs-letter-spacing: 0;
--font-label-xs-line-height: 1.2;
/* Padrão · nunca usa LS */
--font-letter-spacing-none: 0;
--font-letter-spacing-tight: -0.01em;
/* CTA/Button Inter 700 uppercase */
--font-letter-spacing-wide: 0.1em;
/* Eyebrows Inter 700 uppercase */
--font-letter-spacing-wider: 0.15em;
/* Legendas */
--font-line-height-default: 1.3;
/* Web body extended (155%) */
--font-line-height-loose: 1.55;
/* Corpo de texto (140%) */
--font-line-height-relaxed: 1.4;
/* Tags, labels */
--font-line-height-snug: 1.2;
/* Display/heading editorial */
--font-line-height-tight: 1.1;
/* type/display-2xl · canvas editorial extremo, raro */
--font-size-10xl: 280px;
--font-size-2xl: 22px;
--font-size-2xs: 9px;
--font-size-3xl: 28px;
--font-size-4xl: 32px;
--font-size-5xl: 40px;
--font-size-6xl: 48px;
--font-size-7xl: 56px;
--font-size-8xl: 80px;
/* Display Hero · canvas social only */
--font-size-9xl: 200px;
--font-size-lg: 16px;
--font-size-md: 14px;
--font-size-sm: 12px;
--font-size-xl: 18px;
--font-size-xs: 10px;
/* Peso oficial Inter em headings/CTA */
--font-weight-bold: 700;
/* Peso oficial Playfair Display */
--font-weight-medium: 500;
--font-weight-regular: 400;
--font-weight-semibold: 600;
--grid-cols-desktop: 12;
--grid-cols-mobile: 4;
--grid-cols-tablet: 8;
--grid-gutter: 24px;
--grid-margin-desktop: 48px; /* alinhado ao container do D12 (spacing/7) */
--grid-margin-mobile: 16px; /* spacing/4 */
/* Padrão · bate com Figma */
--icon-size-lg: 24px;
/* Botão inline com texto */
--icon-size-md: 20px;
/* Inline em texto, badges densos */
--icon-size-sm: 16px;
/* Decorativo, feature highlights */
--icon-size-xl: 32px;
--inline-default: 12px;
--inline-loose: 24px;
--inline-tight: 8px;
/* Estado disabled de qualquer atom */
--opacity-disabled: 0.4;
--opacity-hover-subtle: 0.9;
--opacity-overlay-medium: 0.5;
--opacity-overlay-strong: 0.75;
--opacity-overlay-subtle: 0.1;
--opacity-press: 0.8;
--radius-2xl: 24px;
/* Pill / circle · robusto em qualquer tamanho */
--radius-full: 9999px;
--radius-lg: 12px;
/* Botão primário, cards */
--radius-md: 8px;
--radius-none: 0px;
/* Botão secundário, chips */
--radius-sm: 4px;
--radius-xl: 16px;
--section-gap-default: 24px;
--section-gap-loose: 48px;
--section-gap-tight: 12px;
/* 48px · em densidade alta */
--section-padding-y-compact: 48px;
/* 96px · padrão */
--section-padding-y-default: 96px;
/* 120px · seções hero/destaque */
--section-padding-y-spacious: 120px;
/* Drop shadow elevation · y:12 blur:32 alpha:18% */
--shadow-lg-blur: 32px;
/* Drop shadow elevation · y:12 blur:32 alpha:18% */
--shadow-lg-color: rgba(0, 0, 0, 0.18);
/* Drop shadow elevation · y:12 blur:32 alpha:18% */
--shadow-lg-offset-x: 0px;
/* Drop shadow elevation · y:12 blur:32 alpha:18% */
--shadow-lg-offset-y: 12px;
/* Drop shadow elevation · y:12 blur:32 alpha:18% */
--shadow-lg-spread: 0px;
/* Drop shadow card · y:6 blur:16 alpha:12% */
--shadow-md-blur: 16px;
/* Drop shadow card · y:6 blur:16 alpha:12% */
--shadow-md-color: rgba(0, 0, 0, 0.12);
/* Drop shadow card · y:6 blur:16 alpha:12% */
--shadow-md-offset-x: 0px;
/* Drop shadow card · y:6 blur:16 alpha:12% */
--shadow-md-offset-y: 6px;
/* Drop shadow card · y:6 blur:16 alpha:12% */
--shadow-md-spread: 0px;
/* Drop shadow sutil · y:3 blur:9 alpha:12% */
--shadow-sm-blur: 9px;
/* Drop shadow sutil · y:3 blur:9 alpha:12% */
--shadow-sm-color: rgba(0, 0, 0, 0.12);
/* Drop shadow sutil · y:3 blur:9 alpha:12% */
--shadow-sm-offset-x: 0px;
/* Drop shadow sutil · y:3 blur:9 alpha:12% */
--shadow-sm-offset-y: 3px;
/* Drop shadow sutil · y:3 blur:9 alpha:12% */
--shadow-sm-spread: 0px;
/* Sombras compostas (a escala existia decomposta mas nunca fechava num valor usável) */
--shadow-sm: 0 3px 9px rgba(0, 0, 0, 0.12);
--shadow-md: 0 6px 16px rgba(0, 0, 0, 0.12);
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.18);
--space-0: 0px;
--space-1: 4px;
/* Top da escala · substitui antigo 150 */
--space-10: 120px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--stack-default: 16px;
--stack-loose: 32px;
--stack-tight: 8px;
/* Vermelho escuro · AA sobre brancos */
--state-error-default: #a8281c;
--state-error-subtle: #a8281c;
/* Azul escuro · AA sobre brancos */
--state-info-default: #1f4d8c;
--state-info-subtle: #1f4d8c;
/* Verde escuro · AA sobre brancos */
--state-success-default: #1f6b3e;
/* Tonalidade clara para banner bg (futuro: derivar com mix) */
--state-success-subtle: #1f6b3e;
/* Âmbar escuro · NÃO confundir com dourado brand CF */
--state-warning-default: #9c6a1e;
--state-warning-subtle: #9c6a1e;
/* Page canvas (cinza neutro) */
--surface-canvas: #f8f8f8;
/* Card surface principal */
--surface-default: #ffffff;
/* Surface escura (Titânio) · hero, footer */
--surface-inverse: #323643;
/* Surface mais escura (Ônix) */
--surface-inverse-deep: #1b212d;
/* Surface quente (Branco Resina) */
--surface-warm: #f2ead9; /* EXCLUSIVA CF (D24): nunca em contexto Don Artesano */
/* Combina com opacity-disabled na atom */
--text-disabled: #606470;
/* Texto sobre surface inverse */
--text-inverse: #ffffff;
/* Texto principal sobre surface clara · AA 11.1:1 vs branco-ssm */
--text-primary: #323643;
/* Texto secundário · AA 5.9:1 vs branco-ssm */
--text-secondary: #606470;
/* Reservado para hint/placeholder (mesmo valor por enquanto) */
--text-tertiary: #606470;
--z-base: 0;
--z-drawer: 300;
--z-dropdown: 100;
--z-modal: 401;
--z-modal-backdrop: 400;
--z-sticky: 200;
--z-toast: 600;
--z-tooltip: 500;
}
}
/* ================================================================
TOKENS · marca Don Artesano (decisão D3 aplicada)
================================================================ */
@layer tokens {
[data-brand="da"] {
/* Accent DA · Azul Ônix, o Destaque (decisão D3) · focus-ring, marcadores, detalhes finos */
--accent: #1b212d;
/* DA primário · Titânio Sólido */
--action-primary-bg: #323643;
/* DA pressed · Azul Ônix */
--action-primary-bg-active: #1b212d;
/* DA hover · Azul Ônix */
--action-primary-bg-hover: #1b212d;
/* DA secondary hover · fill Titânio */
--action-secondary-bg-hover: #323643;
/* DA secondary · 1px Titânio */
--action-secondary-border: #323643;
/* DA secondary · texto Titânio */
--action-secondary-text: #323643;
/* DA secondary hover · texto inverso */
--action-secondary-text-hover: #ffffff;
--link-default: #323643;
--link-hover: #1b212d;
}
}
/* ================================================================
TOKENS · marca CubasFarm (decisões D1 e D3 aplicadas)
================================================================ */
@layer tokens {
[data-brand="cf"] {
/* Accent CF · focus-ring, marcadores, detalhes (máx 1-2 elementos/viewport · guardrail) */
--accent: #d19f47;
/* CF primário · Dourado */
--action-primary-bg: #d19f47;
/* CF pressed · Titânio (Ônix é exclusiva DA, D3) */
--action-primary-bg-active: #323643;
/* CF hover · Titânio (escurece) */
--action-primary-bg-hover: #323643;
/* CF primário texto · Branco SSM (decisão D1: spec restaurada pelo dono; ratio 2.40:1 fica como nota informativa) */
--action-primary-text: #ffffff;
/* CF secondary hover · fill Branco Resina (D3: escuro chapado não é da CF) */
--action-secondary-bg-hover: #f2ead9;
/* CF secondary · 1px Dourado (decisão D3) */
--action-secondary-border: #d19f47;
/* CF secondary · texto Titânio (decisão D3) */
--action-secondary-text: #323643;
/* CF secondary hover · texto Titânio sobre Resina */
--action-secondary-text-hover: #323643;
/* Link CF · Titânio, hover Dourado (decisão D3) */
--link-default: #323643;
--link-hover: #d19f47;
}
}
/* ================================================================
RESET (pular no embed do documento)
================================================================ */
/* @layer reset · minimal modern reset.
No opinionated body styles here; base.css handles defaults. */
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
button {
appearance: none;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
}
/* ================================================================
BASE (pular no embed do documento)
================================================================ */
/* @layer base · opinionated defaults that consume tokens.
These apply to bare HTML elements. Components override via @layer atoms+. */
@layer base {
html {
background: var(--surface-canvas);
color: var(--text-primary);
font-family: var(--font-body-md-font-family);
font-size: 16px;
line-height: var(--font-body-md-line-height);
}
body {
font-family: var(--font-body-md-font-family);
font-weight: var(--font-body-md-font-weight);
font-size: var(--font-body-md-font-size);
line-height: var(--font-body-md-line-height);
color: var(--text-primary);
font-variant-numeric: lining-nums; /* numerais sempre lining, herdado por toda a árvore */
}
/* Default focus ring · overridden by atom-specific :focus-visible if needed.
Uses accent slot so DA gets Azul Ônix (D3), CF gets Dourado automatically. */
:focus-visible {
outline: var(--border-width-thick) solid var(--accent);
outline-offset: 2px;
}
/* Selection */
::selection {
background: var(--accent);
color: var(--surface-default);
}
/* Default link color (only if no .ds-link applied) */
a {
color: var(--link-default);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
a:hover { color: var(--link-hover); }
}
/* ================================================================
ÁTOMOS (17)
================================================================ */
/* ---- átomo: typography ---- */
/* Numerais em Playfair: SEMPRE lining (lnum). O conjunto padrão da fonte é oldstyle e a marca não o usa. Requer a fonte completa auto-hospedada (Web/fontes). */
.ds-display-hero, .ds-display-xl, .ds-display-lg, .ds-display-md, .ds-display-sm, .ds-bloco-de-depoimento__quote { font-variant-numeric: lining-nums; }
/* Typography atoms · apenas classes CSS, sem markup.
Templates compõem: ...
.
Stylelint trava qualquer template que declare font-* fora dessas classes.
⚠️ REGRA INVIOLÁVEL: VALORES NUMÉRICOS SEMPRE EM INTER
Preços, parcelas, quantidades, ratings, contagens, unidades, datas, IDs:
sempre Inter (body/label/heading). Playfair (display) é EXCLUSIVA para
texto editorial/títulos. Use também `font-variant-numeric: tabular-nums`
para alinhar dígitos em colunas (preços, tabelas, paginação).
Por quê: Playfair tem proporções variáveis nos algarismos · fica
desalinhado em listas. Inter tem opção tabular-nums e desenho geométrico
que valoriza valores numéricos. Esta regra está ENFORCED nos atoms/molecules
(price, rating, badge, pagination) · não há override. */
@layer atoms {
/* ----- Display (Playfair Display Medium) ----- */
.ds-display-sm,
.ds-display-md,
.ds-display-lg,
.ds-display-xl,
.ds-display-2xl,
.ds-display-3xl,
.ds-display-hero {
font-family: var(--font-display-sm-font-family);
font-weight: var(--font-display-sm-font-weight);
color: var(--text-primary);
}
.ds-display-sm { font-size: var(--font-display-sm-font-size); line-height: var(--font-display-sm-line-height); letter-spacing: var(--font-display-sm-letter-spacing); }
.ds-display-md { font-size: var(--font-display-md-font-size); line-height: var(--font-display-md-line-height); letter-spacing: var(--font-display-md-letter-spacing); }
.ds-display-lg { font-size: var(--font-display-lg-font-size); line-height: var(--font-display-lg-line-height); letter-spacing: var(--font-display-lg-letter-spacing); }
.ds-display-xl { font-size: var(--font-display-xl-font-size); line-height: var(--font-display-xl-line-height); letter-spacing: var(--font-display-xl-letter-spacing); }
.ds-display-2xl { font-size: var(--font-display-2xl-font-size); line-height: var(--font-display-2xl-line-height); letter-spacing: var(--font-display-2xl-letter-spacing); }
.ds-display-3xl { font-size: var(--font-display-3xl-font-size); line-height: var(--font-display-3xl-line-height); letter-spacing: var(--font-display-3xl-letter-spacing); }
.ds-display-hero{ font-size: var(--font-display-hero-font-size);line-height: var(--font-display-hero-line-height);letter-spacing: var(--font-display-hero-letter-spacing); }
/* ----- Heading (Inter Bold UPPERCASE) ----- */
.ds-heading-xs,
.ds-heading-sm,
.ds-heading-md,
.ds-heading-lg,
.ds-heading-xl {
font-family: var(--font-heading-sm-font-family);
font-weight: var(--font-heading-sm-font-weight);
color: var(--text-primary);
text-transform: uppercase;
}
.ds-heading-xs { font-size: var(--font-heading-xs-font-size); line-height: var(--font-heading-xs-line-height); letter-spacing: var(--font-heading-xs-letter-spacing); }
.ds-heading-sm { font-size: var(--font-heading-sm-font-size); line-height: var(--font-heading-sm-line-height); letter-spacing: var(--font-heading-sm-letter-spacing); }
.ds-heading-md { font-size: var(--font-heading-md-font-size); line-height: var(--font-heading-md-line-height); letter-spacing: var(--font-heading-md-letter-spacing); }
.ds-heading-lg { font-size: var(--font-heading-lg-font-size); line-height: var(--font-heading-lg-line-height); letter-spacing: var(--font-heading-lg-letter-spacing); }
.ds-heading-xl { font-size: var(--font-heading-xl-font-size); line-height: var(--font-heading-xl-line-height); letter-spacing: var(--font-heading-xl-letter-spacing); }
/* ----- Body (Inter Regular) ----- */
.ds-body-xs,
.ds-body-sm,
.ds-body-md,
.ds-body-lg,
.ds-body-xl,
.ds-body-2xl,
.ds-body-3xl {
font-family: var(--font-body-md-font-family);
font-weight: var(--font-body-md-font-weight);
color: var(--text-primary);
}
.ds-body-xs { font-size: var(--font-body-xs-font-size); line-height: var(--font-body-xs-line-height); }
.ds-body-sm { font-size: var(--font-body-sm-font-size); line-height: var(--font-body-sm-line-height); }
.ds-body-md { font-size: var(--font-body-md-font-size); line-height: var(--font-body-md-line-height); }
.ds-body-lg { font-size: var(--font-body-lg-font-size); line-height: var(--font-body-lg-line-height); }
.ds-body-xl { font-size: var(--font-body-xl-font-size); line-height: var(--font-body-xl-line-height); }
.ds-body-2xl { font-size: var(--font-body-2xl-font-size); line-height: var(--font-body-2xl-line-height); }
.ds-body-3xl { font-size: var(--font-body-3xl-font-size); line-height: var(--font-body-3xl-line-height); }
/* ----- Label (Inter Semi Bold) ----- */
.ds-label-2xs,
.ds-label-xs,
.ds-label-sm,
.ds-label-md,
.ds-label-lg {
font-family: var(--font-label-md-font-family);
font-weight: var(--font-label-md-font-weight);
color: var(--text-primary);
}
.ds-label-2xs { font-size: var(--font-label-2xs-font-size); line-height: var(--font-label-2xs-line-height); }
.ds-label-xs { font-size: var(--font-label-xs-font-size); line-height: var(--font-label-xs-line-height); }
.ds-label-sm { font-size: var(--font-label-sm-font-size); line-height: var(--font-label-sm-line-height); }
.ds-label-md { font-size: var(--font-label-md-font-size); line-height: var(--font-label-md-line-height); }
.ds-label-lg { font-size: var(--font-label-lg-font-size); line-height: var(--font-label-lg-line-height); }
/* ----- Text color modifiers (independent of family) ----- */
.ds-text--secondary { color: var(--text-secondary); }
.ds-text--inverse { color: var(--text-inverse); }
.ds-text--accent { color: var(--accent); }
.ds-text--disabled { color: var(--text-disabled); opacity: var(--opacity-disabled); }
/* ----- Eyebrow utility (composes label + uppercase + wider spacing) ----- */
.ds-eyebrow {
text-transform: uppercase;
letter-spacing: var(--font-letter-spacing-wider);
color: var(--accent);
}
}
/* ---- átomo: icon ---- */
/* Icon atom · consome o sprite inline via