/* ========================================================================== tokens.css — Design tokens da Plataforma Gugelmin Beauty (Ellen Gugelmin) -------------------------------------------------------------------------- Todas as decisões visíveis do tema vivem aqui como CSS custom properties. Importe este arquivo ANTES de qualquer outra folha de estilo do tema. Posicionamento: beleza editorial + precisão clínica. Referência estética: editorial de revista (retratos P&B, batom vermelho profundo) + autoridade clínica (biomedicina, resultados antes/depois). Regra de ouro da marca: ink é voz · dourado é assinatura e ação · cream é o palco. Convenção de nomes: --gb-color-* cores --gb-font-* tipografia --gb-space-* espaçamento --gb-radius-* raios --gb-shadow-* sombras --gb-z-* z-index --gb-dur-* durações de transição --gb-ease-* curvas de easing ========================================================================== */ :root { /* ------------------------------------------------------------------------ 1. CORES — PRIMITIVAS Paleta crua. Nunca consumir diretamente em componente; sempre via referência semântica abaixo. ------------------------------------------------------------------------ */ /* Ink — quase-preto quente, a âncora editorial da marca. */ --gb-ink-50: oklch(0.955 0.008 60); --gb-ink-100: oklch(0.90 0.012 50); --gb-ink-200: oklch(0.78 0.014 45); --gb-ink-300: oklch(0.66 0.014 42); --gb-ink-400: oklch(0.58 0.014 40); --gb-ink-500: oklch(0.46 0.015 35); --gb-ink-600: oklch(0.38 0.015 35); --gb-ink-700: oklch(0.30 0.014 35); --gb-ink-800: oklch(0.23 0.013 35); --gb-ink-900: oklch(0.17 0.012 35); /* Cream — off-whites quentes do feed e da clínica. */ --gb-paper-0: oklch(0.99 0.003 90); --gb-paper-50: oklch(0.975 0.006 88); /* fundo principal */ --gb-paper-100: oklch(0.955 0.010 85); --gb-paper-200: oklch(0.92 0.014 80); --gb-paper-300: oklch(0.865 0.016 75); /* Dourado gravado — o ÚNICO acento do sistema (decisão da Ellen, 12/jun): rótulos, filetes, monograma E a ação de conversão. Sobre dourado, o texto é sempre ink — nunca branco. Não há vermelho no sistema; lábios vermelhos vivem só na fotografia. */ --gb-gold-100: oklch(0.94 0.025 90); --gb-gold-300: oklch(0.85 0.060 90); --gb-gold-400: oklch(0.78 0.080 88); --gb-gold-500: oklch(0.70 0.090 85); /* CTA principal */ --gb-gold-600: oklch(0.60 0.085 80); /* press */ --gb-gold-700: oklch(0.50 0.075 75); /* Aliases clay-* (legado da plataforma-mãe) → escala dourada. */ --gb-clay-50: var(--gb-gold-100); --gb-clay-100: var(--gb-gold-100); --gb-clay-200: var(--gb-gold-300); --gb-clay-300: var(--gb-gold-400); --gb-clay-400: var(--gb-gold-500); --gb-clay-500: var(--gb-gold-600); --gb-clay-600: var(--gb-gold-700); --gb-clay-700: var(--gb-gold-700); /* Taupe rosewood — eco do fundo dos retratos de estúdio. */ --gb-taupe-500: oklch(0.60 0.045 40); --gb-taupe-700: oklch(0.42 0.050 35); /* Wine — alias legado; mapeado a taupe/ink quentes (sem vermelho). */ --gb-wine-100: oklch(0.92 0.020 40); --gb-wine-300: var(--gb-taupe-500); --gb-wine-500: var(--gb-taupe-700); --gb-wine-700: var(--gb-ink-700); /* Verde — feedback de sucesso, dessaturado e quente. */ --gb-moss-100: oklch(0.93 0.030 140); --gb-moss-300: oklch(0.70 0.070 140); --gb-moss-500: oklch(0.52 0.080 140); --gb-moss-700: oklch(0.40 0.070 140); /* Âmbar — aviso (próximo do dourado da marca, mais saturado). */ --gb-amber-100: oklch(0.94 0.060 85); --gb-amber-400: oklch(0.70 0.130 80); --gb-amber-600: oklch(0.55 0.110 75); /* Rouge — erro/perigo (distinto do batom: mais frio e fechado). */ --gb-rouge-100: oklch(0.92 0.040 15); --gb-rouge-400: oklch(0.52 0.160 15); --gb-rouge-600: oklch(0.42 0.140 12); /* Azul-leitura — info, dessaturado para não destoar. */ --gb-azure-100: oklch(0.93 0.020 240); --gb-azure-400: oklch(0.58 0.060 240); --gb-azure-600: oklch(0.45 0.060 240); /* ------------------------------------------------------------------------ 2. CORES — SEMÂNTICAS Sempre consumir estas variáveis nos componentes. ------------------------------------------------------------------------ */ /* Superfícies */ --gb-color-bg: var(--gb-paper-50); /* fundo de página */ --gb-color-bg-raised: var(--gb-paper-0); /* card, modal */ --gb-color-bg-sunken: var(--gb-paper-100); /* seções alternadas */ --gb-color-bg-inverse: var(--gb-ink-900); /* footer, bloco ink */ /* Texto */ --gb-color-text: var(--gb-ink-900); --gb-color-text-strong: var(--gb-ink-900); --gb-color-text-muted: var(--gb-ink-500); --gb-color-text-subtle: var(--gb-ink-400); --gb-color-text-on-dark: var(--gb-paper-50); --gb-color-text-on-accent: var(--gb-ink-900); /* texto ink sobre dourado */ /* Bordas — hairlines de 1px, sempre suaves */ --gb-color-border: oklch(0.90 0.012 80); --gb-color-border-strong: oklch(0.82 0.020 70); --gb-color-border-focus: var(--gb-gold-600); /* Marca */ --gb-color-primary: var(--gb-ink-900); --gb-color-primary-hover: var(--gb-ink-700); --gb-color-accent: var(--gb-gold-500); --gb-color-accent-hover: var(--gb-gold-400); /* hover clareia */ --gb-color-accent-press: var(--gb-gold-600); --gb-color-accent-soft: var(--gb-gold-100); --gb-color-secondary: var(--gb-gold-600); --gb-color-secondary-soft: var(--gb-gold-100); /* Dourado — uso direto em filetes, rótulos e monograma */ --gb-color-gold: var(--gb-gold-500); --gb-color-gold-strong: var(--gb-gold-600); --gb-color-gold-soft: var(--gb-gold-100); --gb-line-gold: oklch(0.75 0.070 88 / 0.6); --gb-line-inverse: oklch(0.975 0.006 88 / 0.16); /* Aliases consumidos por algumas folhas (color-ink-* / color-paper-*) */ --gb-color-ink-500: var(--gb-ink-500); --gb-color-ink-600: var(--gb-ink-600); --gb-color-ink-700: var(--gb-ink-700); --gb-color-ink-800: var(--gb-ink-800); --gb-color-ink-900: var(--gb-ink-900); --gb-color-paper-50: var(--gb-paper-50); --gb-color-paper-100: var(--gb-paper-100); --gb-color-paper-200: var(--gb-paper-200); --gb-color-paper-300: var(--gb-paper-300); /* Feedback */ --gb-color-success: var(--gb-moss-500); --gb-color-success-soft: var(--gb-moss-100); --gb-color-warning: var(--gb-amber-600); --gb-color-warning-soft: var(--gb-amber-100); --gb-color-danger: var(--gb-rouge-600); --gb-color-danger-soft: var(--gb-rouge-100); --gb-color-info: var(--gb-azure-600); --gb-color-info-soft: var(--gb-azure-100); /* ------------------------------------------------------------------------ 3. TIPOGRAFIA Cormorant Garamond — serifada de alto contraste, eixo editorial. Jost — geométrica limpa para UI, corpo e números. Assinatura "Ellen Gugelmin": Cormorant itálico (sem fonte manuscrita no sistema — decisão da Ellen). ------------------------------------------------------------------------ */ --gb-font-serif: "Cormorant Garamond", "Times New Roman", Georgia, serif; --gb-font-sans: "Jost", "Avenir Next", "Century Gothic", -apple-system, sans-serif; --gb-font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; /* Pesos — Cormorant até 600; Jost vive entre 300–600 */ --gb-fw-regular: 400; --gb-fw-medium: 500; --gb-fw-semibold: 600; --gb-fw-bold: 600; /* Escala tipográfica — clamp() responsivo, mobile-first. */ --gb-fs-display: clamp(2.75rem, 2rem + 3.75vw, 4.5rem); /* 44 → 72 */ --gb-fs-h1: clamp(2.5rem, 1.9rem + 3vw, 4rem); /* 40 → 64 */ --gb-fs-h2: clamp(2rem, 1.55rem + 2.25vw, 3rem); /* 32 → 48 */ --gb-fs-h3: clamp(1.5rem, 1.3rem + 1vw, 1.75rem); /* 24 → 28 */ --gb-fs-h4: clamp(1.25rem, 1.15rem + 0.5vw, 1.375rem); /* 20 → 22 */ --gb-fs-h5: 1.125rem; /* 18 */ --gb-fs-h6: 1rem; /* 16 */ --gb-fs-body-lg: 1.125rem; /* 18 */ --gb-fs-body: 1rem; /* 16 */ --gb-fs-body-sm: 0.875rem; /* 14 */ --gb-fs-body-xs: 0.8125rem; /* 13 */ --gb-fs-lg: 1.125rem; --gb-fs-sm: 0.875rem; --gb-fs-small: 0.875rem; --gb-fs-xs: 0.75rem; --gb-fs-label: 0.75rem; /* 12 — rótulos CAPS */ --gb-fs-caption: 0.75rem; /* 12 */ /* Altura de linha */ --gb-lh-tight: 1.05; /* display serif */ --gb-lh-snug: 1.25; --gb-lh-normal: 1.5; --gb-lh-relaxed: 1.7; /* Letter spacing — o tracking largo é o "gravado em metal" da marca */ --gb-tracking-tight: -0.01em; /* display serif */ --gb-tracking-normal: 0; --gb-tracking-wide: 0.08em; /* botões, nav */ --gb-tracking-wider: 0.22em; /* rótulos CAPS */ /* ------------------------------------------------------------------------ 4. ESPAÇAMENTO ------------------------------------------------------------------------ */ --gb-space-0: 0; --gb-space-1: 0.25rem; /* 4 */ --gb-space-2: 0.5rem; /* 8 */ --gb-space-3: 0.75rem; /* 12 */ --gb-space-4: 1rem; /* 16 */ --gb-space-5: 1.25rem; /* 20 */ --gb-space-6: 1.5rem; /* 24 */ --gb-space-7: 1.75rem; /* 28 */ --gb-space-8: 2rem; /* 32 */ --gb-space-10: 2.5rem; /* 40 */ --gb-space-12: 3rem; /* 48 */ --gb-space-14: 3.5rem; /* 56 */ --gb-space-16: 4rem; /* 64 */ --gb-space-20: 5rem; /* 80 */ --gb-space-24: 6rem; /* 96 */ --gb-space-32: 8rem; /* 128 */ /* ------------------------------------------------------------------------ 5. RAIOS — precisão editorial: nada de cantos grandes e "fofos". Fotografia é SEMPRE 0px (cantos retos). ------------------------------------------------------------------------ */ --gb-radius-0: 0px; /* fotografia, frames full-bleed */ --gb-radius-xs: 2px; /* botões, inputs, chips */ --gb-radius-sm: 4px; /* cards pequenos, tags */ --gb-radius-md: 6px; /* cards, painéis */ --gb-radius-lg: 6px; --gb-radius-xl: 8px; --gb-radius-2xl: 8px; --gb-radius-full: 999px; --gb-radius-pill: 999px; /* chips de serviço, selo */ /* ------------------------------------------------------------------------ 6. SOMBRAS — quase ausentes. Elevação na marca é contraste de superfície, não sombra. ------------------------------------------------------------------------ */ --gb-shadow-sm: 0 1px 2px oklch(0.2 0.03 40 / 0.05), 0 4px 14px -6px oklch(0.2 0.03 40 / 0.08); --gb-shadow-md: 0 1px 2px oklch(0.2 0.03 40 / 0.05), 0 4px 14px -6px oklch(0.2 0.03 40 / 0.08); --gb-shadow-lg: 0 2px 6px oklch(0.2 0.03 40 / 0.07), 0 16px 36px -16px oklch(0.2 0.03 40 / 0.22); --gb-shadow-xl: 0 2px 6px oklch(0.2 0.03 40 / 0.07), 0 16px 36px -16px oklch(0.2 0.03 40 / 0.22); --gb-shadow-focus: 0 0 0 1px var(--gb-gold-600), 0 0 0 4px oklch(0.6 0.085 80 / 0.18); --gb-shadow-inset: inset 0 1px 2px oklch(0.2 0.03 40 / 0.06); /* ------------------------------------------------------------------------ 7. Z-INDEX ------------------------------------------------------------------------ */ --gb-z-base: 1; --gb-z-dropdown: 10; --gb-z-sticky: 20; --gb-z-overlay: 30; --gb-z-modal: 40; --gb-z-toast: 50; --gb-z-tooltip: 60; /* ------------------------------------------------------------------------ 8. BREAKPOINTS — REFERÊNCIA (não usar em @media; valores fixos) sm 640px · md 768px · lg 1024px · xl 1280px · 2xl 1536px ------------------------------------------------------------------------ */ --gb-bp-sm: 40rem; --gb-bp-md: 48rem; --gb-bp-lg: 64rem; --gb-bp-xl: 80rem; --gb-bp-2xl: 96rem; /* ------------------------------------------------------------------------ 9. CONTAINER & GRID — conteúdo principal max 1140px ------------------------------------------------------------------------ */ --gb-container-max: 71.25rem; /* 1140px */ --gb-container-narrow: 44rem; /* 704px — texto longo */ --gb-container-wide: 84rem; /* 1344px — hero, grids full-bleed */ --gb-container-pad-x: var(--gb-space-6); /* ------------------------------------------------------------------------ 10. MOTION — 120–380ms, fades e deslizes sutis. Sem bounce, sem parallax. ------------------------------------------------------------------------ */ --gb-dur-instant: 80ms; --gb-dur-fast: 120ms; --gb-dur-base: 200ms; --gb-dur-slow: 380ms; --gb-dur-slower: 380ms; --gb-ease-out: cubic-bezier(0.2, 0.6, 0.2, 1); --gb-ease-in-out: cubic-bezier(0.45, 0, 0.2, 1); --gb-ease-spring: cubic-bezier(0.2, 0.6, 0.2, 1); /* sem spring na marca */ --gb-ease-linear: linear; /* ------------------------------------------------------------------------ 11. LAYERS UTILITÁRIAS ------------------------------------------------------------------------ */ --gb-focus-ring: 0 0 0 1px var(--gb-gold-600), 0 0 0 4px oklch(0.6 0.085 80 / 0.18); } /* ========================================================================== Reduced motion — tokens reescalados para respeitar preferência do SO. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --gb-dur-instant: 0ms; --gb-dur-fast: 0ms; --gb-dur-base: 0ms; --gb-dur-slow: 0ms; --gb-dur-slower: 0ms; } }