/* ═══════════════════════════════════════════════════════════════════════════ COPA 2026 — tokens.css Sistema unificado dos dois apps (Ranking + Agenda). Arquitetura herdada do Nocturne (rampas OKLCH, escalas nomeadas, sombra-como- borda, :focus-visible), adaptada à identidade própria: azul operacional + cinema dourado. A linguagem da aba "Série" é o NORTE, não uma exceção. Contrato: - Tudo aqui é REGRA. O que não estiver aqui é exceção e precisa de justificativa. - Cor de SISTEMA (papéis, acento, faixas de nota, semânticas) vive aqui. - Cor de DADO (categorias da agenda, clubes, bandeiras, accent de time) NÃO entra aqui — mora junto do dado. Ver regras.md. - Fallbacks: color-mix() e startViewTransition são usados COM fallback. Ordem: 1) cor · 2) tipografia · 3) espaçamento · 4) radius · 5) elevação · 6) motion · 7) temas (light/dark) · 8) aliases legados ═══════════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); :root { /* ───────────────────────────────────────────────────────────────────────── 1 · COR — rampas 100→900 (claras→escuras), geradas em OKLCH numa escala perceptual compartilhada: o mesmo passo de qualquer rampa tem o mesmo peso visual. Use 100–300 p/ texto sobre tinta e estados pressed; 500/600 como base do papel; 700–900 p/ tintas, hovers e bordas. Rampas são NEUTRAS ao tema — os PAPÉIS (§7) é que trocam por tema. ───────────────────────────────────────────────────────────────────────── */ /* AZUL — acento operacional. Base = 600 (#0066cc, o antigo --green). */ --blue-100: #e6f0fb; --blue-200: #c3ddf6; --blue-300: #93c1ef; --blue-400: #4d97e3; --blue-500: #1f7ad9; --blue-600: #0066cc; /* base — acento do sistema */ --blue-700: #0050a3; --blue-800: #073d78; --blue-900: #0b2547; /* DOURADO — cinema. Uso cirúrgico: clímax, mata-mata, keepsake. Base = 500. */ --gold-100: #fff7d6; --gold-200: #ffeda3; --gold-300: #ffe066; --gold-400: #ffd426; --gold-500: #ffce00; /* base — o ouro da Série */ --gold-600: #d9a400; --gold-700: #b58a00; /* --gold-deep legado */ --gold-800: #7d5f00; --gold-900: #463600; /* NEUTROS — rampa fria levemente azulada, p/ superfícies, bordas, texto mudo. Os papéis por tema (§7) puxam desta rampa. */ --neutral-100: #f6f5f1; --neutral-200: #eceae3; --neutral-300: #d9d7cf; --neutral-400: #b6b7bd; --neutral-500: #8b929c; --neutral-600: #6a7280; --neutral-700: #454b56; --neutral-800: #2a303a; --neutral-900: #161a20; /* ACENTO — papel semântico. Aponta p/ o azul; troca de passo no dark (§7). */ --accent: var(--blue-600); --accent-strong: var(--blue-700); --accent-soft: var(--blue-100); /* bg de tinta clara; vira azul-escuro no dark */ /* ─── Faixas de nota (Série / Onze) — TOKEN de sistema, fixo nos 2 temas. A escala começa em 6 (notas reais quase nunca caem abaixo). Agora é uma VARREDURA DE MATIZ (vermelho→azul) com passos perceptualmente distintos — nada de dois verdes parecidos. Cada faixa tem par cor+fg pra contraste. --score-scale = o gradiente contínuo (barras/trilhas); os --score- são as paradas discretas (chips/selos). Abaixo de 6 = --score-low. */ --score-10: #0a84ff; --score-10-fg: #ffffff; /* azul */ --score-9: #0bb5a6; --score-9-fg: #05302b; /* teal */ --score-8: #34c759; --score-8-fg: #06280f; /* verde */ --score-7: #ffd426; --score-7-fg: #3d2f00; /* amarelo */ --score-6: #ff8c1a; --score-6-fg: #3a1e00; /* laranja */ --score-low: #ff453a; --score-low-fg:#ffffff; /* vermelho */ --score-scale: linear-gradient(90deg, var(--score-low) 0%, var(--score-6) 20%, var(--score-7) 40%, var(--score-8) 60%, var(--score-9) 80%, var(--score-10) 100%); /* ─── Semânticas — UM tom canônico cada (consolida os #e0245e/#c0392b/#2b50aa/ #1d8a52/#d9a400/#ffb800 espalhados). -soft = bg de tinta. */ --danger: #e5383b; --danger-fg: #ffffff; --danger-soft: #fdeaea; --success: #1d8a52; --success-fg: #ffffff; --success-soft: #e6f4ec; --warning: #d9a400; --warning-fg: #2a1e00; --warning-soft: #fbf3d6; --info: #0a84ff; --info-fg: #ffffff; --info-soft: #e6f1ff; /* ───────────────────────────────────────────────────────────────────────── 2 · TIPOGRAFIA — escala NOMEADA por papel (fim do "6.5px→46px inventado"). Inter, pesos 300–900. Cada papel = tamanho + peso + line-height + tracking canônicos. Nomes por FUNÇÃO, não por tamanho (o tamanho pode retunar). ───────────────────────────────────────────────────────────────────────── */ --font: "Inter", system-ui, -apple-system, sans-serif; /* pesos */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800; --fw-black: 900; /* reservado ao "cinema" (pôster Série, hero mata-mata) */ /* tamanhos — escala modular ~1.2, ancorada em body 15px */ --fs-micro: 11px; /* selos minúsculos, N/104, sufixos */ --fs-caption: 12px; /* meta, legendas, rótulos de campo */ --fs-footnote: 13px; /* texto secundário, corpo denso de card */ --fs-body: 15px; /* corpo padrão */ --fs-callout: 17px; /* título de card, destaque em linha */ --fs-headline: 20px; /* título de seção */ --fs-title: 24px; /* título de aba / tela */ --fs-largetitle:30px; /* cabeçalho grande */ --fs-display: 38px; /* números-herói, placar */ --fs-hero: 46px; /* pôster Série / abertura mata-mata (usar com --fw-black) */ /* line-heights */ --lh-tight: 1.12; /* títulos, herói */ --lh-snug: 1.3; /* subtítulos, callouts */ --lh-normal: 1.55; /* corpo */ /* tracking */ --ls-tight: -0.02em; /* títulos grandes */ --ls-normal: 0; --ls-kicker: 0.12em; /* kicker uppercase estilo Série */ /* ───────────────────────────────────────────────────────────────────────── 3 · ESPAÇAMENTO — escala base 4px. Use SEMPRE a variável, nunca px cru. ───────────────────────────────────────────────────────────────────────── */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ───────────────────────────────────────────────────────────────────────── 4 · RADIUS — escala nomeada. Aliases legados (--r/--r-sm) preservam os valores atuais (18/8) pra não quebrar as ~4.4k linhas (§8). ───────────────────────────────────────────────────────────────────────── */ --radius-xs: 4px; /* selos, chips pequenos */ --radius-sm: 8px; /* botões, inputs, badges */ --radius-md: 12px; /* cards internos */ --radius-lg: 18px; /* card de conteúdo, bottom sheet */ --radius-xl: 24px; /* superfícies-herói (pôster) */ --radius-full: 999px; /* pílulas, avatares */ /* ───────────────────────────────────────────────────────────────────────── 5 · ELEVAÇÃO — dois papéis coexistem por decisão do sistema: • Superfícies operacionais (base): FLAT + hairline (borda), sem sombra. • Superfícies de MOMENTO (Série, mata-mata, cards-herói): ganham sombra. Assim a base fica calma e a sombra vira sinal de "isto importa" — em vez de ruído global. Tokens por tema em §7 (sombra clara no light, borda+ambiente no dark, à la Nocturne). Papéis: elev-flat (borda) · elev-raised (momento) · elev-overlay (sheet/dialog) ───────────────────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────────────────── 6 · MOTION — sutil por padrão, expressivo nos momentos (mata-mata/cinema). prefers-reduced-motion zera tudo no fim do arquivo. ───────────────────────────────────────────────────────────────────────── */ --dur-instant: 90ms; --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 320ms; --dur-cinema: 520ms; /* transições de clímax (reveal de placar, virada de fase) */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* uso geral */ --ease-decelerate: cubic-bezier(0, 0, 0, 1); /* entrada */ --ease-accelerate: cubic-bezier(0.3, 0, 1, 1); /* saída */ --ease-cinema: cubic-bezier(0.16, 1, 0.3, 1); /* overshoot suave, "peso" de cinema */ /* ─── PAPÉIS DE TEMA — LIGHT (default) ─────────────────────────────────── */ --paper: #f6f5f1; /* fundo do app */ --surface: #ffffff; /* card, sheet */ --surface-2: #fbfaf7; /* card aninhado, header de sheet */ --ink: #161a20; /* texto primário */ --muted: #6a7280; /* texto secundário */ --faint: #9aa1ab; /* texto terciário, placeholder */ --line: rgba(20,24,32,.10); --line-soft: rgba(20,24,32,.055); --link: var(--blue-700); /* legível como corpo (contraste) */ --link-hover: var(--blue-800); /* elevação (light): sombra tintada de tinta */ --elev-flat: 0 0 0 1px var(--line); --elev-raised: 0 0 0 1px var(--line-soft), 0 6px 20px rgba(20,24,32,.10); --elev-overlay: 0 0 0 1px var(--line-soft), 0 18px 48px rgba(20,24,32,.20); /* shimmer do skeleton (light) */ --skeleton-base: #eceae3; --skeleton-shine: #f6f5f1; } /* ─── PAPÉIS DE TEMA — DARK ──────────────────────────────────────────────── */ html[data-theme="dark"] { --paper: #0d1016; --surface: #161b22; --surface-2: #1b212a; --ink: #e7eaef; --muted: #9aa3af; --faint: #6b7480; --line: rgba(255,255,255,.12); --line-soft: rgba(255,255,255,.07); /* acento sobe de passo pra brilhar no escuro */ --accent: var(--blue-500); --accent-strong: var(--blue-400); --accent-soft: #0d2540; --link: #7fb5ff; /* link legível no dark (consolida o #7fb5ff inline) */ --link-hover: #a7ccff; /* semânticas -soft escurecem no dark */ --danger-soft: #2a1416; --success-soft: #0f2b1c; --warning-soft: #2a2200; --info-soft: #0d2540; /* elevação (dark): borda-hairline + escuridão ambiente (à la Nocturne) */ --elev-flat: 0 0 0 1px var(--line); --elev-raised: 0 0 0 1px rgba(255,255,255,.09), 0 8px 24px rgba(0,0,0,.55); --elev-overlay: 0 0 0 1px rgba(255,255,255,.14), 0 20px 52px rgba(0,0,0,.65); --skeleton-base: #1b212a; --skeleton-shine: #232a34; } /* ───────────────────────────────────────────────────────────────────────── 7 · CLASSES-BASE MÍNIMAS — só o que amarra tokens a elementos globais. Componentes completos vivem em components.css / specs. Aqui: reset de link, seleção, focus, e o body. (Mantém o app consistente mesmo sem components.css) ───────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-normal); font-weight: var(--fw-regular); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--link); text-decoration: none; text-underline-offset: 3px; } a:hover { color: var(--link-hover); text-decoration: underline; } :focus { outline: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); } ::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); } /* utilitários de elevação (papéis, não passos numéricos) */ .elev-flat { box-shadow: var(--elev-flat); } .elev-raised { box-shadow: var(--elev-raised); } .elev-overlay { box-shadow: var(--elev-overlay); } /* ───────────────────────────────────────────────────────────────────────── 8 · ALIASES LEGADOS — mantêm o CSS atual funcionando durante a migração. A engenharia troca gradualmente e remove esta seção no fim. ───────────────────────────────────────────────────────────────────────── */ :root { --green: var(--blue-600); /* era o acento; nome legado */ --green-deep: var(--blue-700); --green-soft: var(--accent-soft); --gold: var(--gold-500); --gold-deep: var(--gold-700); --navbar: #000; /* legado; a navbar preta será substituída (ver navegação) */ --shadow: none; /* legado; use --elev-* */ --r: var(--radius-lg); /* 18px */ --r-sm: var(--radius-sm); /* 8px */ } html[data-theme="dark"] { --green-soft: var(--accent-soft); } /* ───────────────────────────────────────────────────────────────────────── MOTION — respeito obrigatório a prefers-reduced-motion. ───────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }