/* ============================================================ 01-VARIABLES.CSS → O "CÉREBRO" DO SISTEMA ============================================================ Cliente: FRIGOKRAUSE — Alta Floresta D'Oeste / RO Identidade extraída do logo: vermelho forte + branco + preto. CTA de conversão em verde WhatsApp. ============================================================ */ :root { /* --------------------------------------------------------- 1. CORES → identidade FrigoKrause --------------------------------------------------------- */ --color-primary: #C8102E; /* Vermelho da marca (cabeçalhos, destaques) */ --color-secondary: #9E0B22; /* Vermelho escuro — hover do primário */ --color-accent: #25D366; /* CTA WhatsApp */ --color-accent-dark: #1EBE57; /* Hover/active do CTA */ --color-text-base: #1A1A1A; /* Texto principal (quase preto) */ --color-text-muted: #6B7280; /* Texto secundário, legendas */ --color-text-invert: #FFFFFF; /* Texto sobre fundos escuros/coloridos */ --color-bg-main: #FFFFFF; /* Fundo padrão das seções */ --color-bg-alt: #F7F2F2; /* Fundo alternado (leve toque quente) */ --color-border: #E5E7EB; /* Linhas e contornos sutis */ /* Tom escuro extra para footer/hero (não no DS base) */ --color-dark: #1C1213; /* Preto avermelhado p/ rodapé e overlay */ /* --------------------------------------------------------- 2. TIPOGRAFIA Oswald (títulos, ar industrial/açougue) + Inter (corpo). Importadas no do HTML. --------------------------------------------------------- */ --font-family-heading: "Oswald", system-ui, sans-serif; --font-family-body: "Inter", system-ui, sans-serif; --fs-h1: clamp(1.75rem, 5vw + 1rem, 3rem); /* ~28px → 48px */ --fs-h2: clamp(1.4rem, 3vw + 0.8rem, 2.25rem); /* ~22px → 36px */ --fs-h3: clamp(1.15rem, 2vw + 0.6rem, 1.5rem); /* ~18px → 24px */ --fs-body: clamp(1rem, 1vw + 0.75rem, 1.125rem);/* ~16px → 18px */ --fs-small: 0.875rem; /* 14px — legendas */ --lh-tight: 1.2; --lh-base: 1.6; --fw-normal: 400; --fw-medium: 600; --fw-bold: 700; /* --------------------------------------------------------- 3. ESPAÇAMENTO --------------------------------------------------------- */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; /* --------------------------------------------------------- 4. BORDAS E SOMBRAS --------------------------------------------------------- */ --border-radius-sm: 6px; --border-radius-md: 12px; --border-radius-lg: 20px; --border-radius-full: 999px; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.12); /* --------------------------------------------------------- 5. LAYOUT --------------------------------------------------------- */ --container-max: 1100px; --transition: 0.2s ease; }