/* ========================================================================== tokens.css — Design tokens da Plataforma Eliane Malaquias -------------------------------------------------------------------------- v2.0 (nov/2026): paleta "ameixa e ouro" e tipografia Bodoni Moda + Hanken Grotesk, da prévia aprovada pela Eliane. Os NOMES das primitivas foram mantidos (ink, paper, clay, wine) para que components.css, main.css e woocommerce.css não precisem mudar; só os valores mudaram. ink → tinta (ameixa escura) paper → papel / areia clay → ameixa (ação) + ouro wine → ameixa / rosa / blush Importe este arquivo ANTES de qualquer outra folha de estilo do tema. Convenção de nomes: --em-color-* cores --em-font-* tipografia --em-space-* espaçamento --em-radius-* raios --em-shadow-* sombras --em-z-* z-index --em-bp-* breakpoints (referência, não usar em @media) --em-dur-* durações de transição --em-ease-* curvas de easing ========================================================================== */ :root { /* ------------------------------------------------------------------------ 1. CORES — PRIMITIVAS Paleta crua. Nunca consumir diretamente em componente; sempre via referência semântica abaixo. ------------------------------------------------------------------------ */ /* Tinta — ameixa escura. Substitui o "preto puro". */ --em-ink-50: #F5EFF2; --em-ink-100: #E8DDE2; --em-ink-200: #CDBCC5; --em-ink-300: #9C8794; --em-ink-400: #6D5866; /* "suave" da prévia: texto secundário */ --em-ink-500: #4A3445; --em-ink-600: #2B1828; /* texto principal ("tinta") */ --em-ink-700: #2B1828; /* fundos escuros: topo, rodapé, hero */ --em-ink-800: #22131F; --em-ink-900: #170C15; /* Papel — off-whites quentes, base do tema. */ --em-paper-0: #FFFFFF; --em-paper-50: #F7F0E8; /* fundo principal ("papel") */ --em-paper-100:#EADFD3; /* seções alternadas ("areia") */ --em-paper-200:#E0D2C4; --em-paper-300:#CFBFAE; /* Ação — ameixa nos claros, ouro sobre os escuros. */ --em-clay-50: #F4EAF0; --em-clay-100: #EFDCD6; /* "blush" */ --em-clay-200: #D8B47A; /* "ouro claro": destaque sobre fundo escuro */ --em-clay-300: #C98A95; /* "rosa" */ --em-clay-400: #6E3A5E; /* CTA principal ("ameixa") */ --em-clay-500: #5A2E4C; --em-clay-600: #46233B; --em-clay-700: #321829; /* Secundária — tons de ameixa, títulos de destaque. */ --em-wine-100: #EFDCD6; --em-wine-300: #C98A95; --em-wine-500: #6E3A5E; --em-wine-700: #3D2338; /* Verde-musgo — feedback de sucesso, sem sair da paleta quente. */ --em-moss-100: #E1E6D7; --em-moss-300: #8B9871; --em-moss-500: #5A6747; --em-moss-700: #3B4530; /* Ouro — aviso (e o dourado da marca). */ --em-amber-100: #F3E6CF; --em-amber-400: #B98C4E; --em-amber-600: #8A6430; /* Bordô — erro/perigo, harmoniza com a paleta. */ --em-rouge-100: #F1D8D6; --em-rouge-400: #B84A41; --em-rouge-600: #862E27; /* Azul-leitura — info, dessaturado para não destoar. */ --em-azure-100: #DDE4EA; --em-azure-400: #5C7A92; --em-azure-600: #3A536A; /* ------------------------------------------------------------------------ 2. CORES — SEMÂNTICAS Sempre consumir estas variáveis nos componentes. ------------------------------------------------------------------------ */ /* Superfícies */ --em-color-bg: var(--em-paper-50); /* fundo de página */ --em-color-bg-raised: #FBF7F2; /* card (igual aos cards da prévia) */ --em-color-bg-sunken: var(--em-paper-100); /* seções alternadas */ --em-color-bg-inverse: var(--em-ink-700); /* rodapé, hero invertido */ /* Texto */ --em-color-text: var(--em-ink-600); /* corpo */ --em-color-text-strong: var(--em-ink-800); /* headings */ --em-color-text-muted: var(--em-ink-400); /* secundário, captions */ --em-color-text-subtle: var(--em-ink-300); /* placeholder, disabled */ --em-color-text-on-dark: var(--em-paper-50); /* texto sobre bg-inverse */ --em-color-text-on-accent: var(--em-paper-0); /* texto sobre clay-400 */ /* Bordas */ --em-color-border: rgba(43, 24, 40, 0.14); --em-color-border-strong: rgba(43, 24, 40, 0.24); --em-color-border-focus: var(--em-amber-400); /* Marca */ --em-color-primary: var(--em-ink-700); --em-color-primary-hover: var(--em-ink-800); --em-color-accent: var(--em-clay-400); --em-color-accent-hover: var(--em-clay-500); --em-color-accent-soft: var(--em-clay-50); --em-color-secondary: var(--em-wine-700); --em-color-secondary-soft: var(--em-wine-100); /* Feedback */ --em-color-success: var(--em-moss-500); --em-color-success-soft: var(--em-moss-100); --em-color-warning: var(--em-amber-600); --em-color-warning-soft: var(--em-amber-100); --em-color-danger: var(--em-rouge-600); --em-color-danger-soft: var(--em-rouge-100); --em-color-info: var(--em-azure-600); --em-color-info-soft: var(--em-azure-100); /* ------------------------------------------------------------------------ 3. TIPOGRAFIA Bodoni Moda — serifa de alto contraste para headings. Hanken Grotesk — sans para corpo, UI e números. System — fallback robusto. ------------------------------------------------------------------------ */ --em-font-serif: "Bodoni Moda", Georgia, "Times New Roman", serif; --em-font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --em-font-mono: "SF Mono", Menlo, Consolas, monospace; /* Pesos */ --em-fw-regular: 400; --em-fw-medium: 500; --em-fw-semibold: 600; --em-fw-bold: 700; /* Escala tipográfica — clamp() responsivo, mobile-first. min: mobile (<640px), max: desktop (>=1280px). */ --em-fs-display: clamp(2.75rem, 2rem + 3.75vw, 4.5rem); /* 44 a 72 */ --em-fs-h1: clamp(2.25rem, 1.7rem + 2.75vw, 3.5rem); /* 36 a 56 */ --em-fs-h2: clamp(1.75rem, 1.4rem + 1.75vw, 2.5rem); /* 28 a 40 */ --em-fs-h3: clamp(1.375rem, 1.2rem + 0.875vw, 1.75rem); /* 22 a 28 */ --em-fs-h4: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);/* 18 a 20 */ --em-fs-h5: 1.0625rem; /* 17 */ --em-fs-h6: 0.9375rem; /* 15 */ --em-fs-body-lg: 1.125rem; /* 18 */ --em-fs-body: 1.0625rem; /* 17, como na prévia */ --em-fs-body-sm: 0.9375rem; /* 15 */ --em-fs-label: 0.8125rem; /* 13 */ --em-fs-caption: 0.75rem; /* 12 */ /* Altura de linha */ --em-lh-tight: 1.06; /* display, h1 */ --em-lh-snug: 1.2; /* h2-h4 */ --em-lh-normal: 1.65; /* corpo */ --em-lh-relaxed: 1.75; /* leitura longa */ /* Letter spacing */ --em-tracking-tight: -0.01em; /* display serif */ --em-tracking-normal: 0; --em-tracking-wide: 0.04em; /* labels caixa-alta */ --em-tracking-wider: 0.18em; /* eyebrows / kicker (como o "rótulo" da prévia) */ /* ------------------------------------------------------------------------ 4. ESPAÇAMENTO ------------------------------------------------------------------------ */ --em-space-0: 0; --em-space-1: 0.25rem; /* 4 */ --em-space-2: 0.5rem; /* 8 */ --em-space-3: 0.75rem; /* 12 */ --em-space-4: 1rem; /* 16 */ --em-space-5: 1.25rem; /* 20 */ --em-space-6: 1.5rem; /* 24 */ --em-space-8: 2rem; /* 32 */ --em-space-10: 2.5rem; /* 40 */ --em-space-12: 3rem; /* 48 */ --em-space-16: 4rem; /* 64 */ --em-space-20: 5rem; /* 80 */ --em-space-24: 6rem; /* 96 */ --em-space-32: 8rem; /* 128 */ /* ------------------------------------------------------------------------ 5. RAIOS (cards da prévia usam 22px) ------------------------------------------------------------------------ */ --em-radius-xs: 2px; --em-radius-sm: 4px; --em-radius-md: 12px; --em-radius-lg: 16px; --em-radius-xl: 22px; --em-radius-2xl: 28px; --em-radius-pill: 999px; /* ------------------------------------------------------------------------ 6. SOMBRAS — tom ameixa, não cinza puro ------------------------------------------------------------------------ */ --em-shadow-sm: 0 1px 2px rgba(43, 24, 40, 0.06), 0 1px 1px rgba(43, 24, 40, 0.04); --em-shadow-md: 0 4px 8px rgba(43, 24, 40, 0.06), 0 2px 4px rgba(43, 24, 40, 0.04); --em-shadow-lg: 0 12px 24px rgba(43, 24, 40, 0.08), 0 4px 8px rgba(43, 24, 40, 0.05); --em-shadow-xl: 0 24px 48px rgba(43, 24, 40, 0.12), 0 8px 16px rgba(43, 24, 40, 0.06); --em-shadow-focus: 0 0 0 3px rgba(185, 140, 78, 0.35); --em-shadow-inset: inset 0 1px 2px rgba(43, 24, 40, 0.08); /* ------------------------------------------------------------------------ 7. Z-INDEX ------------------------------------------------------------------------ */ --em-z-base: 1; --em-z-dropdown: 10; --em-z-sticky: 20; --em-z-overlay: 30; --em-z-modal: 40; --em-z-toast: 50; --em-z-tooltip: 60; /* ------------------------------------------------------------------------ 8. BREAKPOINTS — REFERÊNCIA CSS custom properties NÃO funcionam em @media. Use os valores abaixo diretamente nas media queries. Mantém sincronizado com o JS. --em-bp-sm: 40rem; 640px tablet --em-bp-md: 48rem; 768px tablet wide --em-bp-lg: 64rem; 1024px desktop --em-bp-xl: 80rem; 1280px desktop wide --em-bp-2xl: 96rem; 1536px ultra ------------------------------------------------------------------------ */ --em-bp-sm: 40rem; --em-bp-md: 48rem; --em-bp-lg: 64rem; --em-bp-xl: 80rem; --em-bp-2xl: 96rem; /* ------------------------------------------------------------------------ 9. CONTAINER & GRID ------------------------------------------------------------------------ */ --em-container-max: 72rem; /* 1152px — leitura confortável */ --em-container-narrow: 44rem; /* 704px — texto longo */ --em-container-wide: 84rem; /* 1344px — hero, landings */ --em-container-pad-x: var(--em-space-6); /* ------------------------------------------------------------------------ 10. MOTION ------------------------------------------------------------------------ */ --em-dur-instant: 80ms; --em-dur-fast: 160ms; --em-dur-base: 240ms; --em-dur-slow: 400ms; --em-dur-slower: 640ms; --em-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --em-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --em-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --em-ease-linear: linear; /* ------------------------------------------------------------------------ 11. LAYERS UTILITÁRIAS ------------------------------------------------------------------------ */ --em-focus-ring: 0 0 0 3px var(--em-color-accent-soft), 0 0 0 5px var(--em-color-accent); } /* ========================================================================== Reduced motion — tokens reescalados para respeitar preferência do SO. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --em-dur-instant: 0ms; --em-dur-fast: 0ms; --em-dur-base: 0ms; --em-dur-slow: 0ms; --em-dur-slower: 0ms; } }