/* ============================================================ TIA BETE BOLOS — Design Tokens Paleta extraída da logotipo oficial ============================================================ */ :root { /* ---------------------------------------------------------- CORES PRIMÁRIAS (da logotipo) ---------------------------------------------------------- */ /* Rosa claro — fundo principal do logo */ --color-rosa: #F4AEBB; --color-rosa-light: #FAD7DF; --color-rosa-lighter: #FEF0F3; --color-rosa-dark: #E8829A; /* Bordô / Vermelho escuro — borda rendada do logo */ --color-bordo: #8B1A2B; --color-bordo-light: #B03045; --color-bordo-dark: #620F1D; --color-bordo-deeper: #3D0910; /* Marrom chocolate — tipografia do logo */ --color-chocolate: #5C3317; --color-chocolate-light: #7A4A28; --color-chocolate-dark: #3A1F0B; /* Creme / Off-white — contraste suave */ --color-creme: #FFF5EC; --color-creme-dark: #F5E6D3; --color-creme-darker: #E8D0B5; /* ---------------------------------------------------------- CORES SEMÂNTICAS ---------------------------------------------------------- */ --color-primary: var(--color-bordo); --color-primary-hover: var(--color-bordo-light); --color-secondary: var(--color-rosa); --color-accent: var(--color-chocolate); --color-background: var(--color-creme); --color-surface: #FFFFFF; --color-surface-alt: var(--color-rosa-lighter); /* Texto */ --color-text-primary: var(--color-chocolate-dark); --color-text-secondary: var(--color-chocolate); --color-text-muted: #9B7B6A; --color-text-inverse: #FFFFFF; --color-text-on-pink: var(--color-bordo-dark); /* Estados */ --color-success: #4A7C59; --color-error: #C0392B; --color-whatsapp: #25D366; --color-whatsapp-dark: #128C7E; /* ---------------------------------------------------------- TIPOGRAFIA ---------------------------------------------------------- */ /* Fontes importadas via Google Fonts no HTML: - Playfair Display: display, elegante, serifada, feminina - Lato: body, leve e legível - Dancing Script: script cursivo, igual ao estilo do logo */ --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Lato', 'Helvetica Neue', Arial, sans-serif; --font-script: 'Dancing Script', cursive; /* Escala tipográfica */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 1.875rem; /* 30px */ --text-3xl: 2.25rem; /* 36px */ --text-4xl: 3rem; /* 48px */ --text-5xl: 3.75rem; /* 60px */ /* Pesos */ --font-light: 300; --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Altura de linha */ --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; /* Letter spacing */ --tracking-tight: -0.025em; --tracking-normal: 0em; --tracking-wide: 0.05em; --tracking-wider: 0.1em; --tracking-widest: 0.2em; /* ---------------------------------------------------------- ESPAÇAMENTO (escala de 4px) ---------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ---------------------------------------------------------- BORDAS E RAIOS ---------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; --border-thin: 1px; --border-base: 2px; --border-thick: 3px; /* ---------------------------------------------------------- SOMBRAS (tom quente baseado no marrom chocolate) ---------------------------------------------------------- */ --shadow-sm: 0 1px 3px rgba(92, 51, 23, 0.08), 0 1px 2px rgba(92, 51, 23, 0.06); --shadow-md: 0 4px 12px rgba(92, 51, 23, 0.12), 0 2px 6px rgba(92, 51, 23, 0.08); --shadow-lg: 0 10px 30px rgba(92, 51, 23, 0.15), 0 4px 12px rgba(92, 51, 23, 0.10); --shadow-xl: 0 20px 50px rgba(92, 51, 23, 0.20), 0 8px 20px rgba(92, 51, 23, 0.12); --shadow-pink: 0 4px 20px rgba(244, 174, 187, 0.50); --shadow-bordo: 0 4px 20px rgba(139, 26, 43, 0.30); /* ---------------------------------------------------------- TRANSIÇÕES ---------------------------------------------------------- */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1); /* ---------------------------------------------------------- LAYOUT ---------------------------------------------------------- */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; --nav-height: 72px; --nav-height-mob: 64px; /* ---------------------------------------------------------- Z-INDEX ---------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* ---------------------------------------------------------- GRADIENTES ---------------------------------------------------------- */ --gradient-hero: linear-gradient( 135deg, var(--color-bordo-deeper) 0%, var(--color-bordo) 40%, var(--color-rosa-dark) 100% ); --gradient-card: linear-gradient( 180deg, transparent 50%, rgba(58, 31, 11, 0.85) 100% ); --gradient-pascoa: linear-gradient( 135deg, var(--color-chocolate-dark) 0%, var(--color-bordo) 50%, var(--color-rosa-dark) 100% ); --gradient-section: linear-gradient( 180deg, var(--color-creme) 0%, var(--color-rosa-lighter) 100% ); --gradient-cta: linear-gradient( 135deg, var(--color-bordo) 0%, var(--color-bordo-light) 100% ); } /* ============================================================ CLASSES HELPER (utilitários rápidos) ============================================================ */ .text-rosa { color: var(--color-rosa); } .text-bordo { color: var(--color-bordo); } .text-chocolate { color: var(--color-chocolate); } .text-creme { color: var(--color-creme); } .text-muted { color: var(--color-text-muted); } .bg-rosa { background-color: var(--color-rosa-lighter); } .bg-bordo { background-color: var(--color-bordo); } .bg-chocolate { background-color: var(--color-chocolate); } .bg-creme { background-color: var(--color-creme); } .font-display { font-family: var(--font-display); } .font-body { font-family: var(--font-body); } .font-script { font-family: var(--font-script); }