/** * Bella Flor — Design Tokens * --------------------------------------------------------------------------- * Única fonte de verdade do sistema visual. Nenhum outro arquivo deve conter * valores literais de cor, espaçamento, sombra ou duração: sempre var(--bf-*). * * Convenção de nomes: --bf--- */ :root { /* --- Marca ------------------------------------------------------------ */ /* * Rosé Bella Flor. A cor da identidade é clara demais para receber texto * branco (2,5:1), então a escala separa os dois papéis: `--bf-brand` pinta * o que é decorativo ou vive sobre fundo escuro, e `--bf-brand-strong` * assume tudo que carrega texto ou precisa passar em WCAG AA. */ --bf-brand: #C89894; /* Rosé Bella Flor — identidade */ --bf-brand-strong: #AD585F; /* Superfícies e textos — 4,8:1 c/ branco */ --bf-brand-hover: #984B52; /* Estado :hover / :focus — 6,1:1 */ --bf-brand-active: #833E45; /* Estado :active — sempre mais escuro */ --bf-brand-soft: #C0777E; /* Secundária — bordas, ícones, detalhes */ --bf-brand-tint: #FBEFF0; /* Fundo de destaque em rosé 8% */ --bf-brand-tint-deep: #F2DCDE; /* Bordas sobre --bf-brand-tint */ /* --- Neutros ---------------------------------------------------------- */ --bf-bg: #FAF7F8; /* Fundo geral — off-white levemente rosé */ --bf-surface: #FFFFFF; /* Cards, drawers, dropdowns */ --bf-surface-alt: #F2EDEF; /* Seções alternadas, skeletons */ --bf-line: #E6DFE2; /* Divisores e bordas de card */ --bf-line-strong: #CFC4C9; /* Bordas de input e estados de foco */ --bf-text: #2E2E2E; /* Texto principal — 12.6:1 sobre --bf-bg */ --bf-text-muted: #666666; /* Secundário — 5.7:1, passa AA em 14px+ */ --bf-text-subtle: #8A8085; /* Terciário — apenas 16px+ ou não-texto */ --bf-text-inverse: #FFFFFF; /* --- Semânticos ------------------------------------------------------- */ --bf-success: #1E7A4C; --bf-success-tint: #E6F3EC; --bf-danger: #B3261E; --bf-danger-tint: #FBEAE9; --bf-warning: #8A5A00; --bf-warning-tint: #FDF3E2; --bf-sale: #AD585F; /* Selo de promoção — texto branco em cima */ /* --- Tipografia ------------------------------------------------------- */ --bf-font-display: "Playfair Display", "Times New Roman", Georgia, serif; --bf-font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* * Escala fluida ancorada em 360px (mobile) e 1440px (desktop). * Razão ~1.2 no mobile e ~1.25 no desktop: contraste suficiente entre * níveis sem que os títulos estourem em telas pequenas. */ --bf-text-2xs: 0.6875rem; /* 11px — selos */ --bf-text-xs: 0.75rem; /* 12px */ --bf-text-sm: 0.8125rem; /* 13px */ --bf-text-base: 0.9375rem; /* 15px */ --bf-text-md: 1rem; /* 16px */ --bf-text-lg: clamp(1.125rem, 0.35vw + 1.05rem, 1.25rem); --bf-text-xl: clamp(1.375rem, 0.8vw + 1.2rem, 1.75rem); --bf-text-2xl: clamp(1.75rem, 1.6vw + 1.4rem, 2.5rem); --bf-text-3xl: clamp(2.25rem, 3vw + 1.5rem, 3.75rem); --bf-text-4xl: clamp(2.75rem, 5vw + 1.4rem, 5rem); --bf-leading-tight: 1.12; /* Títulos display */ --bf-leading-snug: 1.3; /* Subtítulos, nomes de produto */ --bf-leading-body: 1.65; /* Parágrafos */ /* * Tracking positivo em caixa alta é o que dá o "ar" editorial dos rótulos * (EYEBROWS, botões, categorias). Em texto corrido usamos tracking normal. */ --bf-tracking-wide: 0.08em; --bf-tracking-wider: 0.16em; --bf-weight-light: 300; --bf-weight-regular: 400; --bf-weight-medium: 500; --bf-weight-semibold: 600; /* --- Espaçamento (escala 4px) ----------------------------------------- */ --bf-space-1: 0.25rem; /* 4px */ --bf-space-2: 0.5rem; /* 8px */ --bf-space-3: 0.75rem; /* 12px */ --bf-space-4: 1rem; /* 16px */ --bf-space-5: 1.5rem; /* 24px */ --bf-space-6: 2rem; /* 32px */ --bf-space-7: 2.5rem; /* 40px */ --bf-space-8: 3rem; /* 48px */ --bf-space-9: 4rem; /* 64px */ --bf-space-10: 5rem; /* 80px */ --bf-space-11: 7rem; /* 112px */ /* Respiro vertical entre seções — generoso, é o que sustenta o "premium". */ --bf-section-y: clamp(3rem, 6vw, 7rem); /* --- Layout ----------------------------------------------------------- */ --bf-container: 1320px; --bf-container-wide: 1600px; --bf-container-text: 720px; /* Medida ideal de leitura: ~70 caracteres */ --bf-gutter: clamp(1rem, 4vw, 2.5rem); /* --- Raios ------------------------------------------------------------ */ /* Cantos quase retos: arredondamento excessivo lê como "template". */ --bf-radius-xs: 2px; --bf-radius-sm: 4px; --bf-radius-md: 8px; --bf-radius-lg: 16px; --bf-radius-pill: 999px; /* --- Sombras ---------------------------------------------------------- */ /* Tingidas de bordô, não de preto puro — integram-se ao fundo rosé. */ --bf-shadow-xs: 0 1px 2px rgba(46, 20, 30, 0.05); --bf-shadow-sm: 0 2px 8px rgba(46, 20, 30, 0.06); --bf-shadow-md: 0 8px 24px rgba(46, 20, 30, 0.08); --bf-shadow-lg: 0 20px 48px rgba(46, 20, 30, 0.12); --bf-shadow-focus: 0 0 0 3px rgba(173, 88, 95, 0.32); /* --- Movimento -------------------------------------------------------- */ --bf-ease: cubic-bezier(0.32, 0.72, 0, 1); /* Padrão — desaceleração suave */ --bf-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Entradas, drawers */ --bf-ease-in: cubic-bezier(0.7, 0, 0.84, 0); /* Saídas */ --bf-duration-fast: 160ms; --bf-duration-base: 260ms; --bf-duration-slow: 480ms; /* --- Camadas ---------------------------------------------------------- */ --bf-z-base: 1; --bf-z-sticky: 100; --bf-z-header: 200; --bf-z-dropdown: 300; --bf-z-overlay: 400; --bf-z-drawer: 500; --bf-z-modal: 600; --bf-z-toast: 700; /* --- Proporções ------------------------------------------------------- */ --bf-ratio-product: 3 / 4; /* Retrato — padrão de moda */ --bf-ratio-banner: 16 / 7; --bf-ratio-square: 1 / 1; /* Altura do header, lida pelo JS e pelo scroll-margin das âncoras. */ --bf-header-h: 88px; --bf-topbar-h: 38px; } @media (max-width: 1024px) { :root { --bf-header-h: 64px; --bf-topbar-h: 34px; } } /** * Respeita a preferência do sistema por menos movimento. * Zeramos as durações nos tokens, então todo o tema obedece de uma vez. */ @media (prefers-reduced-motion: reduce) { :root { --bf-duration-fast: 1ms; --bf-duration-base: 1ms; --bf-duration-slow: 1ms; } }