/* ========================================================================= AAPC "Lutamos pela Vida" — Tokens de design Regra do projeto: nenhuma cor, fonte, sombra, raio ou duração pode ser escrita literalmente fora deste arquivo. Tudo referencia um token nomeado. ========================================================================= */ :root { color-scheme: light; /* ---------- Paleta primitiva: ROSA (cor base da marca) ---------- */ --rosa-50: #FFF6F9; --rosa-100: #FFE9F0; --rosa-200: #FBD3E0; --rosa-300: #F6B4CA; --rosa-400: #EE8DAD; --rosa-500: #E0648A; --rosa-600: #C64A6E; --rosa-700: #9E3554; /* ---------- Paleta primitiva: VERMELHO (vida, urgência, coração) ---------- */ --vermelho-300: #F58A85; --vermelho-400: #F0524F; --vermelho-500: #DC2B2B; --vermelho-600: #B81F22; --vermelho-700: #8B151B; /* ---------- Paleta primitiva: OURO (esperança, luz, celebração) ---------- */ --ouro-100: #FDF6E3; --ouro-200: #FBEAC0; --ouro-300: #F6D98A; --ouro-400: #EDB63F; --ouro-500: #D69B1D; --ouro-600: #A97812; /* ---------- Neutros quentes (nunca cinza puro) ---------- */ --tinta-900: #2A1B20; --tinta-800: #3A272E; --tinta-700: #4C363E; --tinta-600: #665059; --tinta-500: #806A73; --tinta-300: #BCA8B0; --tinta-200: #DCCBD2; --tinta-100: #EFE3E7; --papel: #FFFCFD; --papel-2: #FFF5F8; --papel-3: #FDECF1; --branco: #FFFFFF; /* ---------- Tokens semânticos ---------- */ --cor-fundo: var(--papel); --cor-fundo-alt: var(--papel-2); --cor-fundo-fundo: var(--papel-3); --cor-fundo-escuro: var(--tinta-900); --cor-superficie: var(--branco); --cor-texto: var(--tinta-900); --cor-texto-suave: var(--tinta-600); --cor-texto-tenue: var(--tinta-500); --cor-texto-invertido:var(--papel-2); --cor-marca: var(--rosa-500); --cor-marca-forte: var(--rosa-700); --cor-acao: var(--vermelho-500); --cor-acao-hover: var(--vermelho-600); --cor-acao-ativa: var(--vermelho-700); --cor-destaque: var(--ouro-400); --cor-destaque-forte: var(--ouro-600); --cor-borda: var(--tinta-100); --cor-borda-forte: var(--tinta-200); --cor-foco: var(--vermelho-500); --cor-sucesso: #2E7D5B; --cor-sucesso-fundo: #E4F4EC; --cor-erro: var(--vermelho-600); --cor-erro-fundo: #FDE9E9; /* ---------- Camadas translúcidas ---------- Véus e vidros precisam de alfa, então não dá para derivar dos primitivos acima. Ficam aqui para que nenhuma cor seja escrita solta fora deste arquivo. */ --sup-vidro: rgba(255, 255, 255, 0.07); /* superfície sobre fundo escuro */ --sup-vidro-forte: rgba(255, 255, 255, 0.12); --sup-vidro-ativo: rgba(255, 255, 255, 0.22); /* hover dessas superfícies */ --sup-vidro-borda: rgba(255, 255, 255, 0.16); --sup-vidro-borda-forte: rgba(255, 255, 255, 0.28); --sup-vidro-linha: rgba(255, 255, 255, 0.10); /* divisórias no rodapé */ --veu-modal: rgba(42, 27, 32, 0.90); /* fundo do visor de fotos */ --veu-legenda: rgba(42, 27, 32, 0.82); /* gradiente sob legendas */ --veu-foto: rgba(158, 53, 84, 0.50); /* hover sobre miniaturas */ --brilho-ouro: rgba(237, 182, 63, 0.20); /* holofote que segue o cursor */ --brilho-ouro-suave: rgba(237, 182, 63, 0.18); --brilho-rosa: rgba(224, 100, 138, 0.11); --brilho-feixe: rgba(220, 43, 43, 0.40); /* halo do feixe da linha do tempo */ /* ---------- Tipografia ---------- */ --fonte-display: "Fraunces", "Iowan Old Style", Georgia, serif; --fonte-texto: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --texto-xs: clamp(0.75rem, 0.73rem + 0.09vw, 0.8125rem); --texto-sm: clamp(0.875rem, 0.85rem + 0.11vw, 0.9375rem); --texto-base: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem); --texto-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); --texto-lg: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem); --texto-xl: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); --texto-2xl: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem); --texto-3xl: clamp(2.25rem, 1.6rem + 2.7vw, 3.75rem); --texto-4xl: clamp(2.75rem, 1.7rem + 4.4vw, 5.5rem); --peso-normal: 400; --peso-medio: 500; --peso-semi: 600; --peso-forte: 700; --peso-extra: 800; --altura-apertada: 1.05; --altura-titulo: 1.14; --altura-media: 1.4; --altura-texto: 1.68; --espaco-letra-titulo: -0.022em; --espaco-letra-olho: 0.14em; /* ---------- Espaçamento (escala 4px) ---------- */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 2.5rem; --e-8: 3rem; --e-9: 4rem; --e-10: 5rem; --e-11: 6.5rem; --e-12: 8rem; --secao-y: clamp(4rem, 3rem + 6vw, 8.5rem); /* ---------- Layout ---------- */ --largura-max: 1220px; --largura-texto: 68ch; --gutter: clamp(1.25rem, 0.8rem + 2.2vw, 3rem); --altura-cabecalho: 72px; /* ---------- Raios (contidos — sem "pílula em tudo") ---------- */ --raio-sm: 6px; --raio-md: 12px; --raio-lg: 20px; --raio-xl: 28px; --raio-total: 999px; /* ---------- Sombras (tonalizadas em rosa, nunca preto puro) ---------- */ --sombra-sm: 0 1px 2px rgba(42, 27, 32, 0.06), 0 2px 6px rgba(158, 53, 84, 0.05); --sombra-md: 0 2px 6px rgba(42, 27, 32, 0.05), 0 10px 24px rgba(158, 53, 84, 0.08); --sombra-lg: 0 4px 12px rgba(42, 27, 32, 0.06), 0 22px 48px rgba(158, 53, 84, 0.12); --sombra-xl: 0 8px 20px rgba(42, 27, 32, 0.07), 0 40px 80px rgba(158, 53, 84, 0.16); --sombra-foco: 0 0 0 3px var(--papel), 0 0 0 6px var(--cor-foco); /* ---------- Movimento ---------- */ --dur-instantanea: 120ms; --dur-rapida: 200ms; --dur-media: 420ms; --dur-lenta: 780ms; --dur-cinema: 1400ms; /* A abertura tem duracao propria: 4x a antiga, sem arrastar o resto. */ --dur-abertura: 3120ms; --ease-padrao: cubic-bezier(0.4, 0, 0.2, 1); --ease-saida: cubic-bezier(0.22, 1, 0.36, 1); --ease-entrada:cubic-bezier(0.55, 0, 1, 0.45); --ease-suave: cubic-bezier(0.65, 0.05, 0.36, 1); /* ---------- Camadas ---------- */ --z-tela: 0; --z-conteudo: 1; --z-flutuante:20; --z-cabecalho:60; --z-menu: 70; --z-modal: 90; --z-preload: 100; } /* Menos movimento: mantém a informação, remove a coreografia. */ @media (prefers-reduced-motion: reduce) { :root { --dur-instantanea: 1ms; --dur-rapida: 1ms; --dur-media: 1ms; --dur-lenta: 1ms; --dur-cinema: 1ms; --dur-abertura: 1ms; } }