/* ============================================================
* GARDEN AMOR INFINITO — DESIGN SYSTEM
* tokens.css v2.0 | Brad Frost / Design Squad
* ============================================================
* Brownfield audit da v1 (floricultura-garden/assets/css/tokens.css).
* Fonte da verdade de cor/tipografia/espaço/raio/sombra/movimento.
*
* O QUE MUDOU vs v1:
* - Paleta de cor: reconstruída do zero (fundo quase preto + verde
* vivo + terracota saturado → base clara/quente + verde contido +
* argila dessaturada). Ver README.md, seção "Paleta".
* - Tipografia, espaçamento, raio e easing: MANTIDOS quase idênticos
* à v1 (já funcionavam bem) — mesmos nomes de variável, para que a
* reaplicação no site v1 seja, na maior parte, uma troca de arquivo.
*
* COMPATIBILIDADE COM O SITE V1:
* Os nomes de variável legados (--bg, --green, --terracotta, --gold,
* --on-green etc.) foram mantidos de propósito. Trocar apenas este
* arquivo por assets/css/tokens.css no site v1 já resolve ~80% da
* reaplicação — o resto são valores hardcoded fora do token system
* (ver README.md, seção "Pendências encontradas na v1").
*
* Uso:
*
*
* ============================================================ */
:root {
/* ============================================================
1. ESCALA DE COR — família
============================================================
Estrutura: --color-{família}-{peso}
Peso 50 = mais claro / 900 = mais escuro
============================================================ */
/* ---- Sage — verde da marca, dessaturado (era #49b23e, vivo demais) ---- */
--color-sage-50: #f4f7ef;
--color-sage-100: #e6edd9;
--color-sage-200: #cddab8;
--color-sage-300: #adc292;
--color-sage-400: #8aab6d;
--color-sage-500: #6f9457; /* base — usar em ícones, links, detalhes */
--color-sage-600: #567340; /* BASE — botões primários, texto interativo (AA em fundo claro) */
--color-sage-700: #445b32; /* hover de botão primário */
--color-sage-800: #334525;
--color-sage-900: #212d19;
/* ---- Clay — segunda cor, argila fosca (era terracota #d97b4f, saturado) ---- */
--color-clay-50: #faf3ee;
--color-clay-100: #f4e2d5;
--color-clay-200: #e7c3a9;
--color-clay-300: #d6a17c;
--color-clay-400: #c17f55;
--color-clay-500: #a8623c; /* base — acentos decorativos, ícones */
--color-clay-600: #874d30; /* BASE — usar em botão/bloco sólido (contraste ok com branco) */
--color-clay-700: #6a3c26; /* hover */
--color-clay-800: #4f2e1d;
--color-clay-900: #362013;
/* ---- Sand/Ink — neutros quentes (era fundo #0f1512 quase preto) ---- */
--color-sand-0: #ffffff;
--color-sand-50: #faf6ee; /* fundo principal — papel/creme, substitui --bg escuro */
--color-sand-100: #f2ecdd; /* fundo alternado de seção */
--color-sand-200: #e2d7bf; /* bordas/linhas */
--color-sand-300: #cbba98;
--color-sand-400: #a2937a;
--color-sand-500: #7a6d58;
--color-sand-600: #564f3f; /* texto secundário */
--color-sand-700: #423c30;
--color-sand-800: #2c2820; /* texto principal — ink */
--color-sand-900: #1a1712; /* ink profundo — uso pontual (faixa escura, rodapé, CTA final) */
/* ---- Gold — detalhe/avaliação, dessaturado (era #d9d65a, néon) ---- */
--color-gold-300: #e4cf86;
--color-gold-500: #b8912a;
--color-gold-700: #8f6f1f;
/* ============================================================
2. ALIASES LEGADOS — mesmos nomes da v1 (compatibilidade)
============================================================
Usar estes nomes ao reaplicar no site v1. Os valores mudaram;
os nomes, não — é isso que torna a troca de arquivo segura.
============================================================ */
/* ---- Cor: base ---- */
--bg: var(--color-sand-50); /* era #0f1512 */
--bg-alt: var(--color-sand-100); /* era #141d17 */
--surface: var(--color-sand-0); /* era #1a241d */
--surface-2: var(--color-sand-100); /* era #212d24 */
--line: var(--color-sand-200); /* era #2c3a30 */
--text: var(--color-sand-800); /* era #f5f1e8 (texto claro sobre fundo escuro) */
--text-muted: var(--color-sand-600); /* era #b7c2b7 */
--text-faint: var(--color-sand-500); /* era #7c8a7d */
/* ---- Cor: marca ---- */
--green: var(--color-sage-600); /* era #49b23e — agora contido, não domina a UI */
--green-strong: var(--color-sage-700); /* era #2f8a28 */
--green-soft: var(--color-sage-100); /* era #d9ecd3 */
--terracotta: var(--color-clay-600); /* era #d97b4f — agora fosco/argila */
--terracotta-strong: var(--color-clay-700); /* era #b95f38 */
--gold: var(--color-gold-500); /* era #d9d65a — agora fosco */
--on-green: var(--color-sand-0); /* texto sobre botão verde: branco (verde agora é escuro o bastante) */
/* ============================================================
3. NOVOS TOKENS — corrigem valores hardcoded encontrados na v1
============================================================
A v1 tinha hover states e o bloco final (.visit) com hex cru
fora do token system (#5cc94f, #1c0f08, #331a0f, rgba(...)).
Estes tokens existem para que a reaplicação NÃO precise inventar
valores na hora — ver README.md, "Pendências encontradas na v1".
============================================================ */
--green-hover: var(--color-sage-700); /* hover de .btn-primary (era #5cc94f hardcoded) */
--terracotta-hover: var(--color-clay-700); /* hover de bloco argila */
--ink: var(--color-sand-900); /* substitui #1c0f08 hardcoded no bloco .visit */
--ink-hover: var(--color-sand-800); /* substitui #331a0f hardcoded */
--ink-soft: rgba(26, 23, 18, 0.78); /* substitui rgba(28,15,8,0.82) hardcoded */
--focus: var(--color-sage-600);
--error: #a5432e; /* vermelho-tijolo, dentro da mesma temperatura de cor */
--success: var(--color-sage-600);
/* WhatsApp — sistema externo, cor fixa por convenção de marca (não mexer) */
--wpp: #25d366;
--wpp-dark: #1da851;
/* ============================================================
4. SEMÂNTICA EXPANSIVA (opcional) — para uso futuro/refactor
============================================================
Mesma paleta, nomes mais descritivos. Não é obrigatório usar —
os aliases legados da seção 2 já cobrem o essencial.
============================================================ */
--color-bg: var(--bg);
--color-surface: var(--surface);
--color-text-strong: var(--color-sand-900);
--color-text: var(--text);
--color-text-muted: var(--text-muted);
--color-accent-primary: var(--green);
--color-accent-secondary:var(--terracotta);
--color-border: var(--line);
/* ============================================================
5. TIPOGRAFIA — mantida da v1 (já funciona bem)
============================================================ */
--font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
--font-body: "Work Sans", "Segoe UI", system-ui, sans-serif;
--text-xs: clamp(0.78rem, 0.75rem + 0.15vw, 0.85rem);
--text-sm: clamp(0.9rem, 0.87rem + 0.15vw, 1rem);
--text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
--text-lg: clamp(1.2rem, 1.1rem + 0.4vw, 1.5rem);
--text-xl: clamp(1.7rem, 1.4rem + 1.2vw, 2.4rem);
--text-display: clamp(2.6rem, 1.9rem + 3vw, 4.6rem);
--text-display-lg: clamp(3.2rem, 2.2rem + 4.5vw, 6.4rem);
/* ============================================================
6. ESPAÇAMENTO — mantido da v1
============================================================ */
--space-2xs: 0.4rem;
--space-xs: 0.75rem;
--space-sm: 1.25rem;
--space-md: 2rem;
--space-lg: clamp(2.5rem, 2rem + 2vw, 4rem);
--space-xl: clamp(4rem, 3rem + 4vw, 7rem);
--space-section: clamp(4.5rem, 3.5rem + 5vw, 9rem);
--content-max: 1180px;
--gutter: clamp(1.25rem, 4vw, 3rem);
/* ============================================================
7. RAIO — mantido da v1
============================================================ */
--radius-sm: 4px;
--radius-md: 10px;
--radius-lg: 22px;
--radius-pill: 999px;
/* ============================================================
8. SOMBRA — retonalizada (era preto puro; fundo agora é claro,
então a sombra usa a mesma temperatura quente do ink, em vez de
preto neutro, e com opacidade menor para não pesar sobre creme)
============================================================ */
--shadow-sm: 0 2px 10px rgba(26, 23, 18, 0.10);
--shadow-md: 0 12px 40px rgba(26, 23, 18, 0.14);
--shadow-lg: 0 20px 56px rgba(26, 23, 18, 0.16);
/* ============================================================
9. MOVIMENTO — mantido da v1
============================================================ */
--duration-fast: 150ms;
--duration-normal: 320ms;
--duration-slow: 600ms;
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
:root {
--duration-fast: 0ms;
--duration-normal: 0ms;
--duration-slow: 0ms;
}
}
/* ============================================================
RESET MÍNIMO E BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.05;
margin: 0;
color: var(--color-text-strong);
}
p { margin: 0; }
.container {
max-width: var(--content-max);
margin-inline: auto;
padding-inline: var(--gutter);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* Foco visível (acessibilidade) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 3px;
border-radius: var(--radius-sm);
}