/* ═══════════════════════════════════════════════════════════════════ 0-tokens.css — Design Tokens · La Chouchoute Compagnie v7.0.5 · Abril 2026 FONTE DE VERDADE para todas as cores, tamanhos, espaços e z-indexes. Nenhum outro arquivo CSS deve conter valores brutos (hex, px arbitrário, número mágico de z-index). SEMPRE referenciar um token daqui. ESTRUTURA: 1. Cores de marca 2. Superfícies 3. Texto 4. Cores funcionais (WhatsApp, social, scrollbar) 5. Tipografia 6. Espaçamento 7. Border radius 8. Sombras 9. Transições 10. Z-index — hierarquia oficial 11. Layout 12. Animação (loader) 13. Breakpoints — referência de valores ═══════════════════════════════════════════════════════════════════ */ :root { /* ── 1. Cores de marca ──────────────────────────────────────────── */ --clr-yellow: #FDD025; /* Primária — Amarelo Girassol */ --clr-yellow-hover: #F5C400; /* Hover de botões primários */ --clr-yellow-soft: #FFE082; /* Botão Back, acentos suaves */ --clr-yellow-shadow: rgba(253, 208, 37, 0.40); --clr-yellow-shadow-h: rgba(253, 208, 37, 0.60); --clr-yellow-glow: rgba(253, 208, 37, 0.30); --clr-apricot: #904C2B; /* Secundária — Damasco/Terracota */ --clr-apricot-dark: #6E3920; /* Hover de apricot */ --clr-apricot-light: #FFDCC2; /* Backgrounds claros de apricot */ --clr-teal: #36656E; /* Terciária — Teal Calmo */ --clr-teal-container: #C0E8ED; /* Backgrounds de contexto teal */ --clr-teal-body: #76A5AF; /* Background global do */ /* ── 2. Superfícies ─────────────────────────────────────────────── */ --clr-surface: #FBFAF1; /* Canvas principal — branco quente */ --clr-surface-low: #F5F4EB; /* Cards, containers secundários */ --clr-surface-lowest: #FFFFFF; /* Pricing cards, modals, inputs foco */ --clr-surface-border: rgba(209, 198, 172, 0.30); --clr-surface-border-h: rgba(209, 198, 172, 0.20); /* ── 3. Texto ───────────────────────────────────────────────────── */ /* REGRA CRÍTICA: NUNCA usar #000000 — sempre --clr-ink (#1B1C17) */ --clr-ink: #1B1C17; /* Texto primário */ --clr-ink-muted: #4D4633; /* Legendas, labels, captions */ --clr-ink-ghost: rgba(27, 28, 23, 0.15); --clr-ink-glass: rgba(27, 28, 23, 0.60); /* Overlay dark buttons */ --clr-ink-glass-h: rgba(27, 28, 23, 0.80); /* Hover */ /* ── 4. Cores funcionais ────────────────────────────────────────── */ --clr-whatsapp: #25D366; --clr-whatsapp-shadow: rgba(37, 211, 102, 0.50); --clr-whatsapp-shadow-h: rgba(37, 211, 102, 0.60); --clr-facebook: #1877F2; --clr-facebook-h: #0d5bbf; --clr-instagram: #E4405F; --clr-instagram-h: #c13584; --clr-scrollbar-track: #D1C6AC; --clr-scrollbar-thumb: var(--clr-yellow); /* ── 5. Tipografia ──────────────────────────────────────────────── */ --font-body: 'Plus Jakarta Sans', sans-serif; /* Escala de tamanhos — referência em rem */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.85rem; /* ~14px */ --text-base: 1rem; /* 16px ← mínimo para inputs (previne zoom iOS) */ --text-lg: 1.1rem; /* ~18px */ --text-xl: 1.15rem; /* ~18px+ */ --text-2xl: 1.5rem; /* 24px */ --text-4xl: 3rem; /* 48px */ /* Line heights */ --leading-tight: 1.2; --leading-snug: 1.4; --leading-body: 1.6; --leading-loose: 1.75; /* Letter spacings */ --tracking-wide: 0.05em; --tracking-wider: 0.1em; --tracking-tight: -0.02em; /* ── 6. Espaçamento ─────────────────────────────────────────────── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ /* ── 7. Border radius ───────────────────────────────────────────── */ /* REGRA: NUNCA usar radius:0 ou radius-sm em elementos interativos. Design system proíbe cantos retos — tudo deve ser "soft". */ --radius-sm: 0.5rem; /* inputs, tags pequenas */ --radius-md: 1rem; /* cards, badges */ --radius-lg: 1.5rem; /* pricing cards */ --radius-xl: 2rem; /* imagens, content cards */ --radius-2xl: 3rem; /* Nurture Pod, containers grandes */ --radius-full: 9999px; /* pills, círculos, FABs */ /* ── 8. Sombras ─────────────────────────────────────────────────── */ /* "Sunlight shadows" — suaves, nunca pesadas (design system) */ --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08); --shadow-card-h: 0 8px 32px rgba(0, 0, 0, 0.12); --shadow-inset: 0 8px 32px 0 rgba(99, 83, 66, 0.21); /* ── 9. Transições ──────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-s: 0.2s; --duration-m: 0.3s; /* ── 10. Z-index — HIERARQUIA OFICIAL ────────────────────────────── REGRA ABSOLUTA: Usar SOMENTE estes valores. Se precisar de um novo layer, adicionar aqui ANTES de usar em qualquer outro arquivo. Stack completo (menor → maior, fundo → frente): base(0) → cards(1–10) → sticky(100) → progress(500) → menu-overlay(900) → menu(1000) → fab(9998) → cursor(9999) → loader(10000) ────────────────────────────────────────────────────────────────── */ --z-base: 0; /* img_wraper, conteúdo base */ --z-cards: 10; /* Cards e .row sobre img_wraper */ --z-sticky: 100; /* Sidebar sticky (páginas de preços) */ --z-progress: 500; /* Barra de progresso do scroll */ --z-menu-bg: 900; /* Overlay de fundo ao abrir menu lateral */ --z-menu: 1000; /* Painel do menu lateral */ --z-fab: 9998; /* WhatsApp + Back buttons (position:fixed) */ --z-cursor: 9999; /* Cursor SVG customizado */ --z-scrollbar: 999; /* Scrollbar do Locomotive Scroll */ --z-header: 98; /* Header fixo */ --z-header-top: 99; /* Top bar do header */ --z-loader: 10000; /* Loading overlay — SEMPRE mais alto */ /* ── 11. Layout ─────────────────────────────────────────────────── */ --gallery-offset-xl: 12vw; /* Desktop ≥ 1440px — offset da galeria */ --gallery-offset-lg: 10vw; /* Desktop 1024–1439px */ --sidebar-width: 32rem; /* Sidebar sticky das páginas de preços */ /* ── 12. Animação — Loader ──────────────────────────────────────── */ --loader-size: 60px; --loader-color: var(--clr-ink); /* ── 13. Breakpoints — REFERÊNCIA de valores ──────────────────────── ATENÇÃO: Custom Properties NÃO funcionam em @media queries (limitação da especificação CSS). Estes são APENAS referência. Ao alterar um valor aqui, atualizar TAMBÉM em 6-responsive.css. Nomenclatura Valor Devices alvo ───────────────────────────────────────────────────────────────── xs 320px iPhone SE (3ª gen), Galaxy A13, Moto G sm 480px iPhone 14, Pixel 7, Galaxy S23 md 768px iPad Mini portrait, Galaxy Tab S6 lg 1024px iPad landscape, notebooks pequenos ← PRINCIPAL xl 1280px Notebooks 13–14" 2xl 1440px Desktops, notebooks 15–16" 3xl 1920px Monitores wide ───────────────────────────────────────────────────────────────── O breakpoint lg (1024px) é o toggle principal entre mobile e desktop: - Desktop (≥1024px): Locomotive Scroll ativo, scroll horizontal, cursor custom, sidebar sticky, scroll button - Mobile (<1024px): scroll nativo vertical, sem cursor, layout em coluna única, FABs simplificados ────────────────────────────────────────────────────────────────── */ }