/* ========================================================================== variables.css — sistema de cor e tokens do O Seu Clube ESTRATÉGIA DE COR ----------------- Duas matizes, dois papéis. Nada é colorido por decoração. ROXO = marca e ação. Tudo que a pessoa deve clicar, mais a identidade. TEAL = evidência. Prova de que a plataforma funciona: variações positivas, itens confirmados, status ativo. NEUTRO = todo o resto. Rampa tingida na matiz do roxo (308°) com croma baixíssimo, para que os cinzas pertençam à marca em vez de parecerem cinza de navegador. FILL vs INK ----------- O roxo e o teal da marca são claros demais para virar texto pequeno (#8e69ad = 4.40:1, #00bfaa = 2.32:1 sobre branco). Por isso cada matiz tem duas formas: --color-*-fill superfícies, gradientes, barras, títulos grandes --color-*-ink TEXTO. Mesma matiz, luminosidade resolvida para ≥4.5:1 em todas as superfícies onde ela de fato aparece. Usar um token `-fill` em texto pequeno é o erro que este arquivo existe para impedir. Todos os pares foram medidos; os valores de contraste estão anotados. ========================================================================== */ :root { /* --------------------------------------------------------------------- 1. PRIMITIVAS — valores crus. Não use diretamente nos componentes. --------------------------------------------------------------------- */ /* Rampa neutra: matiz 308° (a do roxo da marca), croma 0.006–0.022 OKLCH */ --n-0: #ffffff; --n-50: #faf8fc; /* superfície suave */ --n-100: #f4f1f7; /* superfície de painel */ --n-200: #e8e4ec; /* bordas 1.25:1 */ --n-300: #d8d2dd; /* divisores e bordas de destaque 1.48:1 */ --n-400: #a29ba8; /* decorativo. NUNCA texto. 2.70:1 */ --n-500: #6d6774; /* texto auxiliar ≥4.50:1 em qualquer superfície */ --n-700: #514a57; /* texto corrente ≥7.02:1 */ --n-900: #17161b; /* tinta 17.99:1 */ /* Marca — superfícies e preenchimentos */ --purple-fill: #8e69ad; --purple-fill-deep: #6f4d8e; --teal-fill: #00bfaa; /* Marca — texto. Mesma matiz, escurecida até passar em AA. */ --purple-ink: #775196; /* 6.17:1 branco · 5.25:1 chip lilás · 4.76:1 avatar */ --teal-ink: #007e70; /* 4.98:1 branco · 4.62:1 superfície · 4.55:1 suave */ /* Lavagens de marca — fundos de chip, badge e avatar */ --purple-wash: #f0eafa; --purple-wash-strong: #e7dcf7; --purple-tint: #eadff2; --teal-tint: #d9fbf6; /* --------------------------------------------------------------------- 2. PAPÉIS SEMÂNTICOS — é isto que os componentes consomem. --------------------------------------------------------------------- */ /* Superfícies */ --color-background: var(--n-0); --color-background-soft: #f6f4f8; --color-surface: #f7f6f9; /* interior dos dashboards */ --color-surface-raised: var(--n-0); --color-surface-sunken: #ebe8ee; /* fundo do chat */ /* Texto */ --color-ink: var(--n-900); --color-text: var(--n-700); --color-text-muted: var(--n-500); /* Ação (roxo) */ --color-action: var(--purple-fill); --color-action-deep: var(--purple-fill-deep); --color-action-ink: var(--purple-ink); --color-action-wash: var(--purple-wash); /* Evidência (teal) — variação positiva, item confirmado, status ativo */ --color-evidence: var(--teal-fill); --color-evidence-ink: var(--teal-ink); /* Linhas */ --color-line: var(--n-200); --color-line-strong: var(--n-300); /* Texto sobre superfícies de marca escuras. Explícito, nunca rgba() — alpha faz o contraste depender do que está atrás e some do alcance de qualquer verificação. */ --color-on-brand: var(--n-0); --color-on-purple-muted: #feefff; /* 4.60:1 no ponto claro do card roxo */ --color-on-teal-muted: #daf8f2; /* 4.60:1 no ponto claro do card teal */ --color-on-dark-muted: #c7c0cc; /* 10.32:1 sobre #17131d */ --color-on-cta-muted: #ece2f3; /* 4.71:1 no ponto claro do CTA */ /* Superfícies de marca — gradientes com as duas pontas escuras o bastante para carregar texto branco em AA. */ --gradient-brand: linear-gradient(90deg, var(--purple-ink), var(--teal-ink)); --gradient-action: linear-gradient(135deg, var(--color-action), var(--color-action-deep)); --gradient-bar: linear-gradient(180deg, var(--color-evidence), var(--color-action)); --gradient-product-white-label: linear-gradient(145deg, #6b4785, #855ea3); --gradient-product-service: linear-gradient(145deg, #003d38, #007b6f); --gradient-cta: linear-gradient(120deg, #77529a, #5f3f7a 45%, #00534b); /* Chips sólidos sobre os cards de produto */ --color-tag-white-label: #5d3c76; /* branco na tag: 8.85:1 */ --color-tag-service: #00544a; /* branco na tag: 8.87:1 */ /* Superfícies escuras */ --color-dark-raised: #241f2c; /* topo do gradiente de superfície escura */ --color-dark-deep: #15121a; --color-support: #17131d; /* Lavagem atmosférica do mapa de cobertura */ --wash-map: linear-gradient(135deg, #e7f6f3, #f1eaf7); /* Estados de interface do navegador */ --color-focus: var(--purple-ink); --color-selection-bg: #e8dcf2; --color-selection-ink: var(--n-900); /* 13.67:1 */ --color-caret: var(--purple-ink); --color-scrollbar-track: var(--n-100); --color-scrollbar-thumb: #b7abc2; --color-scrollbar-thumb-hover: var(--n-400); /* --------------------------------------------------------------------- 3. Sombras — offset + blur. Nunca halo de raio zero. --------------------------------------------------------------------- */ --shadow-soft: 0 12px 35px rgba(50, 35, 65, .05); --shadow-card: 0 18px 60px rgba(44, 28, 59, .10); --shadow-deep: 0 30px 80px rgba(35, 25, 44, .20); --shadow-button: 0 12px 28px rgba(142, 105, 173, .25); /* --------------------------------------------------------------------- 4. Raios --------------------------------------------------------------------- */ --border-radius-xs: 8px; --border-radius-sm: 12px; --border-radius-md: 18px; --border-radius-lg: 24px; --border-radius-xl: 30px; --border-radius-pill: 999px; /* --------------------------------------------------------------------- 5. Layout --------------------------------------------------------------------- */ --container-width: 1180px; --container-gutter: 40px; --header-height: 78px; --section-space: 92px; /* --------------------------------------------------------------------- 6. Tipografia --------------------------------------------------------------------- */ --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-size-body: 16px; --font-size-micro: 11px; /* piso de texto funcional */ --line-height-body: 1.5; /* --------------------------------------------------------------------- 7. Movimento --------------------------------------------------------------------- */ --transition-fast: .2s ease; --transition-base: .25s ease; --marquee-duration: 42s; --counter-duration: 2400ms; /* --------------------------------------------------------------------- 8. Camadas --------------------------------------------------------------------- */ --z-float: 40; --z-header: 50; --z-mobile-menu: 60; --z-skip-link: 70; /* Informa ao navegador em que tema desenhar scrollbars, controles de vídeo e widgets nativos. Sem isto, um SO em modo escuro entrega controles escuros dentro de uma página clara. */ color-scheme: light; } @media (max-width: 620px) { :root { --container-gutter: 28px; --header-height: 68px; --section-space: 64px; } }