/* ========================================================================== ACAMPAMUSIC FESTIVAL 2026 — "Alma Brasileira" Design Tokens — fonte única de verdade do sistema visual. Ajuste aqui para repaginar a página inteira. ========================================================================== */ /* ---------- FONTES DA MARCA (self-hosted) ---------- */ @font-face { font-family: "Tropical Tides"; src: url("../assets/fonts/TropicalTidesAged.otf") format("opentype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Visby CF"; src: url("../assets/fonts/VisbyCF-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; } @font-face { font-family: "Visby CF"; src: url("../assets/fonts/VisbyCF-ExtraBold.otf") format("opentype"); font-weight: 800; font-display: swap; } /* Corpo de texto: Mulish via Google Fonts (carregado no ) */ :root { /* ---------- PALETA BRUTA (extraída das artes oficiais) ---------- */ --verde-mata: #1B6B3A; /* verde bandeira / marca */ --verde-fundo: #0C3D22; /* verde profundo / seções escuras */ --verde-ink: #08160E; /* quase-preto esverdeado / texto */ --dourado: #F4C430; /* dourado bandeira / CTA primário */ --dourado-claro: #FFD862; /* hover do CTA */ --laranja-fogo: #E8732B; /* energia / acento quente */ --azul-serra: #15233F; /* serra / azul noite */ --creme: #F2ECDB; /* fundo claro / texto sobre escuro */ --creme-claro: #FBF7EC; /* superfície clara */ --wa-verde: #25D366; /* WhatsApp */ /* ---------- CORES SEMÂNTICAS ---------- */ --color-bg: var(--creme-claro); --color-surface: #FFFFFF; --color-ink: var(--verde-ink); --color-muted: #5C6B5E; /* texto secundário sobre claro */ --color-line: #D8D2C0; /* bordas/divisores */ --color-brand: var(--verde-mata); --color-brand-deep: var(--verde-fundo); /* superfícies escuras */ --color-dark-bg: var(--verde-fundo); --color-on-dark: var(--creme); --color-on-dark-mut: #A9BBA8; /* CTAs */ --cta: var(--dourado); --cta-hover: var(--dourado-claro); --cta-ink: var(--verde-ink); /* texto sobre o dourado */ --accent: var(--laranja-fogo); /* ---------- TIPOGRAFIA ---------- */ --font-display: "Tropical Tides", "Visby CF", Georgia, serif; --font-head: "Visby CF", system-ui, sans-serif; --font-body: "Mulish", system-ui, -apple-system, sans-serif; /* escala fluida (mobile → desktop) */ --fs-eyebrow: 0.78rem; /* 12-13px */ --fs-body: clamp(1rem, 0.96rem + 0.3vw, 1.125rem); /* 16-18 */ --fs-lead: clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem);/* 18-22 */ --fs-h3: clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem); --fs-h2: clamp(1.6rem, 1.2rem + 2vw, 2.5rem); --fs-h1: clamp(2.1rem, 1.3rem + 4vw, 3.75rem); --fs-display: clamp(2.6rem, 1.4rem + 6vw, 5.5rem); /* títulos display */ --lh-tight: 1.05; --lh-snug: 1.18; --lh-body: 1.6; --tracking-eyebrow: 0.18em; /* ---------- ESPAÇAMENTO (escala 4px) ---------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --section-y: clamp(3.5rem, 2rem + 7vw, 7rem); /* padding vertical de seção */ --container: 1140px; --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem); /* ---------- FORMA ---------- */ --radius-sm: 10px; --radius: 18px; --radius-lg: 28px; --radius-pill: 999px; --shadow-sm: 0 2px 8px rgba(8, 22, 14, 0.06); --shadow: 0 14px 40px rgba(8, 22, 14, 0.14); --shadow-cta:0 10px 28px rgba(244, 196, 48, 0.35); /* ---------- MOVIMENTO ---------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --t-fast: 140ms var(--ease); --t: 240ms var(--ease); } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }