/* ============================================================================ TEO ESPORTES · DESIGN SYSTEM — TOKENS Single source of truth. Extracted 1:1 from landing.html :root. Atomic Design foundation (Brad Frost). DO NOT hardcode values in components — reference these custom properties only. ============================================================================ */ :root { /* -------------------------------------------------------------------------- 1. COLOR · Brand Orange (primary / action) -------------------------------------------------------------------------- */ --orange-300: #FEA047; /* hover text on dark, accent labels */ --orange-400: #FD8C1F; /* focus-ring, hover borders */ --orange-500: #FD7D05; /* PRIMARY brand / default action background */ --orange-600: #E06D00; /* primary hover */ --orange-700: #B85800; /* primary active / gradient start */ /* -------------------------------------------------------------------------- 2. COLOR · Neutral ramp (dark theme native) -------------------------------------------------------------------------- */ --neutral-0: #FFFFFF; --neutral-50: #F7F7F7; /* default text on dark */ --neutral-100: #F0F0F0; --neutral-200: #E2E2E2; --neutral-300: #C9C9C9; /* lead / secondary copy */ --neutral-400: #A3A3A3; /* muted copy, labels */ --neutral-500: #8B8B8B; /* micro copy — AA ≥4.61:1 em bg/deep/footer/card (era #7A7A7A, 4.22) */ --neutral-600: #555555; /* placeholders, disabled text */ --neutral-700: #3D3D3D; /* disabled surfaces, gradient end */ --neutral-800: #2A2A2A; /* secondary button surface */ --neutral-900: #1C1C1C; /* darkest ink / text on light pills */ /* App background (body) — slightly off the neutral ramp, brand-native dark */ --bg-app: #161616; /* Off-ramp surface stops carried 1:1 from reference gradients (not on the neutral scale, but brand-native dark surfaces). */ --surface-card-1: #232323; /* model-card gradient start */ --surface-card-2: #1A1A1A; /* model-card gradient end */ --surface-media-1: #2E2E2E; /* media radial light */ --surface-media-2: #181818; /* media radial dark */ --surface-footer: #131313; /* footer background */ /* -------------------------------------------------------------------------- 3. COLOR · Feedback / accent -------------------------------------------------------------------------- */ --energy-lime: #C6F24A; /* success accent, founder/exclusive highlight */ --green-500: #1F9D55; /* success (payment confirmed) */ --amber-500: #E8A21A; /* warning / blocked state */ --red-500: #D93838; /* error / destructive */ /* Azul institucional — cor NOVA, adicionada para status "em progresso" do Kanban (o DS não tinha cor fria). Usada como fill de faixa/dot, não texto no dark. No light escurece p/ AA (ver bloco light). Fonte: brief app. */ --blue-500: #3B82F6; /* in-progress / info */ /* -------------------------------------------------------------------------- 4b. COLOR · STATUS (Kanban / workflow) — papéis dedicados Paleta própria de status para colunas de board não competirem entre si nem com o laranja de ação. Cada papel = um hue distinto. Usados como faixa/dot/tint; o -ink é a tinta legível sobre pill clara do status. -------------------------------------------------------------------------- */ --status-todo: var(--neutral-400); /* A iniciar — neutro/cinza */ --status-doing: var(--blue-500); /* Em progresso — azul (frio) */ --status-review: var(--orange-500); /* Aguardando você — laranja (ação) */ --status-done: var(--green-500); /* Validado — verde */ --status-blocked: var(--red-500); /* Bloqueado — vermelho */ /* Tints translúcidos (fundo de pill/coluna) + tinta de texto sobre a pill. No dark, ink clara; sobrescrito no light para AA sobre pill clara. */ --status-todo-tint: rgba(163,163,163,.14); --status-todo-ink: var(--neutral-200); --status-doing-tint: rgba(59,130,246,.16); --status-doing-ink: #9EC2FF; --status-review-tint: rgba(253,125,5,.14); --status-review-ink: var(--orange-300); --status-done-tint: rgba(31,157,85,.16); --status-done-ink: #6FE0A0; --status-blocked-tint: rgba(217,56,56,.16); --status-blocked-ink: #F1908F; /* Tinta de aviso (Alert warning: ícone + faixa lateral) — gráfico/texto sobre superfície neutra, não pill de coluna. 7.20:1 sobre surface-card-1. */ --status-warning-ink: var(--amber-500); /* -------------------------------------------------------------------------- 4. COLOR · Semantic aliases (map raw → role) -------------------------------------------------------------------------- */ --text-on-dark: var(--neutral-50); --text-muted: var(--neutral-400); --text-subtle: var(--neutral-500); /* Texto sobre fills de marca — resolve o débito branco/laranja (2.59:1). neutral-900 não inverte entre temas: 6.58:1 (500) e 5.16:1 (600) sempre. */ --text-on-brand: var(--neutral-900); --text-on-brand-active: #FFFFFF; /* sobre orange-700 (estado active) — 4.74:1 nos dois temas */ --surface-deep: var(--neutral-900); /* superfície profunda: modais, form-side, stepper, strip */ --surface-qr: #FFFFFF; /* fundo de QR/código de barras — branco fixo nos dois temas */ /* Texto sobre foto/vídeo de fundo (hero full-bleed, card overlay sobre mídia). Fixo nos dois temas: o fundo real é a IMAGEM, não --bg-app — o contraste não pode depender do toggle light/dark, só do overlay-media abaixo. */ --text-on-media: #FFFFFF; /* título/copy principal sobre overlay-media — 4.5:1+ garantido pelo overlay */ --text-on-media-muted: rgba(255,255,255,.72); /* eyebrow/copy secundária sobre overlay-media */ /* Overlay padrão para foto/vídeo de fundo — garante o piso de contraste de --text-on-media independente da foto usada (campanha pode trocar o asset, o overlay segura o mínimo). Mais escuro na base (onde o texto senta). */ --overlay-media: linear-gradient(180deg, rgba(22,22,22,.20) 0%, rgba(22,22,22,.55) 55%, rgba(22,22,22,.82) 100%); --color-brand: var(--orange-500); --color-brand-hover: var(--orange-600); --color-brand-active: var(--orange-700); --color-success: var(--green-500); --color-warning: var(--amber-500); --color-danger: var(--red-500); --focus-ring: var(--orange-400); /* Hairlines / translucent surfaces used across components */ --border-hairline: rgba(255,255,255,.08); --border-hairline-2: rgba(255,255,255,.10); --border-soft: rgba(255,255,255,.16); --border-strong: rgba(255,255,255,.22); --surface-glass: rgba(20,20,20,.72); --surface-raised: rgba(255,255,255,.02); /* Glass claro para elementos SOBRE mídia/foto (ex.: tag em hero--media) — par fixo com --text-on-media, não inverte por tema (o fundo real é a foto, não --bg-app). Formalizado a partir de um uso ad-hoc detectado em campanha (rgba(255,255,255,.12/.24) direto no HTML — ver GUIA-DE-USO.md § Texto sobre imagem/mídia de fundo fixo). */ --surface-glass-light: rgba(255,255,255,.12); --border-on-media: rgba(255,255,255,.24); /* Vidro ESCURO fixo sobre mídia (card do .hero--media) — par de --text-on-media; não inverte (o fundo real é a foto). Extraído do twin React (HeroMediaCard já usava rgba(20,20,20,.72) fixo); o CSS usava --surface-glass, que clareia no light → texto branco sobre vidro claro. */ --surface-glass-media: rgba(20,20,20,.72); /* Fundo cinza-escuro do manual da marca — mesmo #333333 EMBUTIDO nos SVGs logo-*-fundoescuro. Extraído dos assets (não inventado); usado nas vitrines de logo (index.html #tokens-logo, brand-logo-showcase.tsx) para o swatch bater com o fundo interno do arquivo. Fixo nos dois temas. */ --surface-logo-dark: #333333; /* Sidebar do app-shell — FIXA escura nos dois temas (as imagens de referência têm sidebar escura + conteúdo claro). Não inverte no light, mesma lógica de --text-on-media. Contraste validado sobre #1C1C1C: text 15.9:1 · muted 6.76:1 · subtle 4.62:1 (recalculados 2026-10-08). */ --sidebar-surface: #1C1C1C; --sidebar-border: rgba(255,255,255,.08); --sidebar-hover: rgba(255,255,255,.05); --sidebar-active: rgba(255,255,255,.09); /* chip do item ativo — neutro, não laranja */ --sidebar-text: #F7F7F7; --sidebar-text-muted: #A3A3A3; --sidebar-text-subtle: #858585; /* era #7A7A7A = 3.97:1 (reprovava AA) */ /* Workspace administrativo do app-shell — papéis semânticos compartilhados pelos dois temas. O dark deriva da paleta nativa Teo; o bloco light abaixo restaura 1:1 o chão cinza + painel branco da referência HTML aprovada. */ --workspace-bg: var(--bg-app); /* chão externo */ --workspace-panel: var(--neutral-900); /* painel principal */ --workspace-panel-2: var(--surface-card-1); /* cards no painel */ --workspace-border: var(--border-hairline); /* hairline contextual */ --workspace-ink: var(--neutral-50); /* título forte */ --workspace-text: var(--neutral-300); /* corpo */ --workspace-text-muted: var(--neutral-400); /* apoio / microcopy */ --brand-tint: rgba(253,125,5,.12); --brand-tint-border: rgba(253,125,5,.30); --brand-glow-ring: rgba(253,125,5,.34); --lime-tint: rgba(198,242,74,.08); --lime-tint-border: rgba(198,242,74,.28); --danger-tint: rgba(217,56,56,.18); /* -------------------------------------------------------------------------- 5. TYPOGRAPHY · Families -------------------------------------------------------------------------- */ --font-display: "Lato", system-ui, sans-serif; /* black italic uppercase */ --font-body: "Lato", system-ui, sans-serif; --font-brand: "Roboto", system-ui, sans-serif; /* identidade visual — Regular 400 + Italic (logo, assinaturas, selos) */ /* Weights */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-black: 900; /* Type scale (1.25 major-third-ish) */ --text-2xs: .694rem; --text-xs: .8rem; --text-sm: .875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.563rem; --text-2xl: 1.953rem; /* Display scale — hero/manifesto headings above the 1.25 ramp. Fluid (clamp) by nature: hero displays scale with viewport, unlike the fixed --text-* steps below. Extracted from .quote/.pl-hero h1 hardcodes (both used the same clamp proportion ad-hoc per campaign). */ --text-3xl: clamp(2.125rem, 1.4vw + 1.8rem, 3.75rem); /* ~34px → 60px, was .quote / .sec-head h2 inline clamp */ --text-4xl: clamp(3rem, 2.2vw + 2.4rem, 5.25rem); /* ~48px → 84px, was preview hero h1's inline clamp */ --text-5xl: clamp(4rem, 4vw + 3.2rem, 8.25rem); /* ~64px → 132px, was .hero h1's inline clamp (landing real) */ /* Line-height */ --leading-tight: 1.04; --leading-snug: 1.18; --leading-normal: 1.5; --leading-relaxed: 1.65; --leading-display: .92; /* display headings */ /* Letter-spacing */ --tracking-display: -.02em; /* tightened display headings */ --tracking-wide: .04em; --tracking-wider: .14em; --tracking-caps: .18em; /* eyebrows / uppercase labels */ /* -------------------------------------------------------------------------- 6. SPACING — grade de 4px estrita (rec 7 da auditoria 2026-07-17) 4/5/6 são os degraus originais (valores inalterados, não renumerar). 1-3 e 7-9 completam a escala com os valores da grade de 4px já usados nos componentes (4·8·12px e 48·64·96px). Valores fora da grade ainda escritos em px nos CSS (18/14/10/6/22px…) são dívida de migração — componente NOVO usa só esta escala. -------------------------------------------------------------------------- */ --space-1: .25rem; /* 4px */ --space-2: .5rem; /* 8px */ --space-3: .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 */ /* Layout: largura máxima de conteúdo + respiro lateral. Consumidos por .wrap E embutidos nos organisms de página (.nav, .hero-grid, .hero--media) para que a geometria não dependa de quem consome lembrar do .wrap. */ --container-max: 1200px; --container-pad: 24px; /* -------------------------------------------------------------------------- 6b. OPACITY — escala nomeada para a propriedade `opacity` e para compor translúcidos novos (color-mix / alpha do preset Tailwind). Os translúcidos já resolvidos (--border-*, --*-tint, --text-on-media-muted…) seguem com o alpha embutido; estes são para usos NOVOS. Iguais nos dois temas. -------------------------------------------------------------------------- */ --opacity-subtle: .08; /* hairline — alpha de --border-hairline/--sidebar-border */ --opacity-soft: .16; /* borda/tint suave — --border-soft, --status-*-tint */ --opacity-disabled: .4; /* controle desabilitado — .qty button:disabled */ --opacity-muted: .72; /* secundário sobre mídia — --text-on-media-muted */ --opacity-strong: .9; /* elemento quase opaco — QR do pix-modal (opacity-90) */ /* -------------------------------------------------------------------------- 6c. ICON SIZE — caixa do glifo (width/height). O DS não usa lib de ícones (glifos são SVG/emoji à mão); a escala vem dos átomos existentes. -------------------------------------------------------------------------- */ --icon-sm: 16px; /* .spin */ --icon-md: 20px; /* .email-warn .ico */ --icon-lg: 24px; /* .ck */ --icon-xl: 72px; /* .fb-icon — glifo de estado grande em modal */ /* -------------------------------------------------------------------------- 7. RADIUS -------------------------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 28px; --radius-pill: 999px; /* -------------------------------------------------------------------------- 8. SHADOW / ELEVATION -------------------------------------------------------------------------- */ --shadow-lg: 0 18px 40px rgba(28,28,28,.14); --shadow-xl: 0 30px 70px rgba(28,28,28,.18); --shadow-brand: 0 10px 28px rgba(253,125,5,.34); /* -------------------------------------------------------------------------- 9. GRADIENT -------------------------------------------------------------------------- */ --gradient-dark: linear-gradient(160deg, #3D3D3D 0%, #2A2A2A 100%); /* Barra de marca: início em orange-600 (era 700) p/ garantir AA da tinta escura em toda a extensão do gradiente (pior ponto: 5.16:1). */ --gradient-brand-bar: linear-gradient(90deg, var(--orange-600), var(--orange-500)); /* -------------------------------------------------------------------------- 10. MOTION -------------------------------------------------------------------------- */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; /* -------------------------------------------------------------------------- 11. Z-INDEX (layering scale derived from reference) -------------------------------------------------------------------------- */ --z-header: 50; --z-mcta: 120; --z-overlay: 300; --z-toast: 400; color-scheme: dark; /* tema nativo */ } /* ============================================================================ LIGHT THEME (opt-in) — ativa com ou class="light". Dark permanece o default (:root). Estratégia: rampa neutra invertida preservando o PAPEL de cada token (usage-driven), acentos usados como TEXTO escurecidos para AA sobre branco. Todos os pares validados WCAG AA: texto 17.04:1 · lead 7.46 · muted 5.33 · subtle 5.17 (4.62 sobre surface-deep) · orange-text 4.74 lime-text 4.95 · red-text 6.13 · green-text 5.35 · ink/laranja 6.58 Hues de marca em FILLS (orange-500/600/700, lime, amber) não mudam. ============================================================================ */ [data-theme="light"], .light { /* 1. Brand orange — só os stops usados como TEXTO/focus escurecem */ --orange-300: #A34E00; /* accent-text (5.76:1) — era hover-text-on-dark */ --orange-400: #B85800; /* focus-ring / hover borders / eyebrow (4.74:1) */ /* orange-500/600/700 inalterados: fills continuam vibrantes */ /* 2. Neutral ramp — invertida preservando papel */ --neutral-0: #161616; /* on-color/strongest ink (btn primário: 6.58:1 ✓) */ --neutral-50: #1C1C1C; /* texto padrão (17.04:1) */ --neutral-100: #2A2A2A; --neutral-200: #3D3D3D; --neutral-300: #555555; /* lead / secondary copy (7.46:1) */ --neutral-400: #6B6B6B; /* muted copy (5.33:1) */ --neutral-500: #6D6D6D; /* micro copy — 5.17 branco / 4.62 #F2F2F2 (era #757575, 4.12 no F2) */ --neutral-600: #999999; /* placeholders / disabled text */ --neutral-700: #D4D4D4; /* bordas sólidas / disabled surfaces */ --neutral-800: #EDEDED; /* secondary button surface */ /* --neutral-900 NÃO inverte: é "ink sobre pills claras" (lime/amber continuam claras nos dois temas — ink continua escura, 13.15:1 ✓) */ --bg-app: #FFFFFF; --surface-deep: #F2F2F2; /* modais/superfícies profundas viram claras no light */ --surface-card-1: #FFFFFF; --surface-card-2: #F7F7F7; --surface-media-1: #EDEDED; --surface-media-2: #FAFAFA; --surface-footer: #F2F2F2; /* 3. Feedback — quando usado como TEXTO sobre branco, escurece p/ AA */ --energy-lime: #5C7A00; /* texto 4.95:1; como fill de ícone c/ ink 3.44 (gráfico ≥3) */ --green-500: #1F7A45; /* 5.35:1 */ --red-500: #B92A2A; /* 6.13:1 */ --blue-500: #1D62D6; /* in-progress no light — texto 4.68:1 sobre branco */ /* --amber-500 inalterado: só usado como fill com ink escura (7.80:1) */ /* 4b. STATUS no light — tints com alpha sobre branco + ink escurecida p/ AA */ --status-todo: var(--neutral-400); --status-doing: var(--blue-500); --status-review: var(--orange-500); --status-done: var(--green-500); --status-blocked: var(--red-500); --status-todo-tint: rgba(0,0,0,.06); --status-todo-ink: var(--neutral-300); --status-doing-tint: rgba(29,98,214,.10); --status-doing-ink: #1D62D6; /* 4.68:1 */ --status-review-tint: rgba(184,88,0,.10); --status-review-ink: #A34E00; /* 5.76:1 */ --status-done-tint: rgba(31,122,69,.10); --status-done-ink: #1F7A45; /* 5.35:1 */ --status-blocked-tint: rgba(185,42,42,.10); --status-blocked-ink: #B92A2A; /* 6.13:1 */ --status-warning-ink: #946200; /* âmbar escurecido (mesmo hue 40°): 5.24:1 branco · 4.68 #F2F2F2 */ /* 4. Hairlines / translucidez — alpha preta no fundo claro */ --border-hairline: rgba(0,0,0,.08); --border-hairline-2: rgba(0,0,0,.10); --border-soft: rgba(0,0,0,.16); --border-strong: rgba(0,0,0,.26); --surface-glass: rgba(255,255,255,.78); --surface-raised: rgba(0,0,0,.03); /* Workspace administrativo — valores light preservados da referência HTML. */ --workspace-bg: #DDDDDD; --workspace-panel: #FFFFFF; --workspace-panel-2: #FAFAFA; --workspace-border: rgba(0,0,0,.08); --workspace-ink: #1C1C1C; --workspace-text: #3D3D3D; --workspace-text-muted: #727272; --lime-tint: rgba(92,122,0,.10); --lime-tint-border: rgba(92,122,0,.38); --danger-tint: rgba(185,42,42,.10); /* brand-tint/-border/-glow inalterados: laranja translúcido funciona no claro */ /* 9. Gradient — superfícies escuras viram claras (nome mantido p/ compat) */ --gradient-dark: linear-gradient(160deg, #F0F0F0 0%, #E2E2E2 100%); color-scheme: light; }