/* Tokens de design. Toda cor, espaço e duração do site resolve para algo declarado aqui. Cor é escrita em oklch: passos iguais no canal de luminosidade parecem iguais ao olho em qualquer matiz, então um par "mesmo peso, matiz diferente" de fato se lê assim. ══ CLARO. E é definitivo. ═══════════════════════════════════════════════════════ Duas versões anteriores erraram para o mesmo lado. A primeira foi um índigo escuro com o argumento de "não parecer feito por fã". A segunda trocou a paleta mas manteve o fundo quase preto, e o resultado continuou sendo uma página de ferramenta de desenvolvedor. O erro era a premissa, não a matiz. Pokémon **é claro**: fundo branco, céu azul, grama verde, cor saturada e forma redonda. Trinta anos de identidade, do jogo à embalagem, e nenhuma parte dela é escura. Um site escuro para um MMORPG de Pokémon contradiz a coisa que ele está anunciando. Então: **claro é o padrão, e o escuro é a opção**. Exatamente o inverso do que era. As três cores que carregam a página: 1. VERMELHO de Pokébola — a ação. Saturado e vivo, sem pedir desculpa. 2. AZUL de céu — a superfície e a navegação. É o que faz o branco não ser escritório. 3. AMARELO de sol — valor, raridade, conquista. Nunca ação comum. E as dezoito CORES DE TIPO são token de primeira classe: num site de Pokémon elas são dado, não decoração. */ :root { color-scheme: light; /* ── Vermelho de Pokébola ──────────────────────────────────────────────────── Vivo de verdade. Sobre branco, croma alto não cansa — cansa sobre preto, que era o que limitava a versão anterior. */ --brand-50: oklch(0.97 0.02 27); --brand-100: oklch(0.93 0.05 27); --brand-200: oklch(0.86 0.11 27); --brand-300: oklch(0.77 0.17 27); --brand-400: oklch(0.68 0.21 27); --brand-500: oklch(0.60 0.23 27); --brand-600: oklch(0.53 0.22 27); --brand-700: oklch(0.45 0.19 27); --brand-800: oklch(0.36 0.15 27); --brand-900: oklch(0.28 0.11 27); /* ── Azul de céu ───────────────────────────────────────────────────────────── A segunda cor da marca, e a que faz o branco parecer dia aberto em vez de folha de papel. Carrega navegação, links e as bandas frias. */ --sky-100: oklch(0.95 0.035 230); --sky-200: oklch(0.89 0.070 230); --sky-300: oklch(0.80 0.110 230); --sky-400: oklch(0.70 0.140 235); --sky-500: oklch(0.61 0.160 240); --sky-600: oklch(0.52 0.150 243); /* ── Amarelo de sol: valor, raridade, conquista ────────────────────────────── Significado FIXO. Amarelo em seis lugares deixa de ser prêmio e vira decoração. */ --accent-300: oklch(0.93 0.10 92); --accent-400: oklch(0.87 0.15 90); --accent-500: oklch(0.81 0.17 86); --accent-600: oklch(0.70 0.16 80); /* ── Estado ────────────────────────────────────────────────────────────────── Nunca carregado só pela matiz: todo estado junta cor a um ícone ou a uma palavra, porque cerca de um homem em doze não separa o verde do vermelho. */ --ok-500: oklch(0.62 0.17 150); --ok-600: oklch(0.53 0.16 150); --warn-500: oklch(0.72 0.16 70); --warn-600: oklch(0.62 0.15 65); --danger-500: oklch(0.57 0.22 25); --danger-600: oklch(0.49 0.21 25); --info-500: oklch(0.61 0.16 240); /* ── Tipos ─────────────────────────────────────────────────────────────────── Agora sobre FUNDO CLARO, então os valores voltam para perto dos oficiais — que sempre foram pensados para papel branco. */ --type-normal: oklch(0.72 0.04 90); --type-fire: oklch(0.68 0.20 45); --type-water: oklch(0.63 0.17 245); --type-grass: oklch(0.68 0.19 145); --type-electric: oklch(0.83 0.17 95); --type-ice: oklch(0.80 0.11 205); --type-fighting: oklch(0.52 0.19 28); --type-poison: oklch(0.55 0.19 320); --type-ground: oklch(0.73 0.12 72); --type-flying: oklch(0.74 0.10 275); --type-psychic: oklch(0.66 0.21 355); --type-bug: oklch(0.69 0.18 120); --type-rock: oklch(0.62 0.08 80); --type-ghost: oklch(0.50 0.16 300); --type-dragon: oklch(0.52 0.20 278); --type-dark: oklch(0.40 0.06 50); --type-steel: oklch(0.70 0.05 225); --type-fairy: oklch(0.78 0.13 350); /* ── Superfícies (CLARO primeiro) ──────────────────────────────────────────── Branco puxado para o azul, não branco de papel de escritório. O olho lê "dia aberto" e não "documento". `bg-raised` é branco de verdade: o card precisa saltar do fundo, e sobre um fundo já branco não haveria salto nenhum. */ --bg: #f3f8fd; --bg-raised: oklch(1 0 0); --bg-overlay: oklch(0.955 0.020 230); --bg-inset: oklch(0.945 0.024 230); /* Bandas: a página respira trocando de fundo por seção. Céu e sol, alternando. */ --bg-band: #dcefff; --bg-band-warm: #fff4d6; /* Bordas VISÍVEIS. Interface de jogo tem moldura; um fio de 4% de opacidade é a assinatura do painel administrativo. */ --line: #c9d6e6; --line-strong: oklch(0.74 0.055 230); /* Texto azul-marinho profundo, não preto. Preto sobre branco é jornal; um azul bem escuro pertence à mesma família do resto e cansa menos. */ --text: #1d2a44; --text-muted: #55627a; --text-subtle: oklch(0.60 0.035 250); --text-on-brand: oklch(0.99 0 0); /* ── Tipografia ────────────────────────────────────────────────────────────── A fonte do CLIENT, servida daqui. O jogo desenha tudo em Ubuntu; o site em fonte de sistema parecia outro produto ao lado da tela de login. Os dois arquivos moram em /kit/fonts deste mesmo domínio (a CSP continua proibindo fonte externa), são um recorte latino que cobre os oito idiomas do site, e `swap` deixa o texto aparecer na fonte do sistema enquanto eles chegam — nunca uma página em branco esperando. */ --font-sans: "Ubuntu Kit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; /* `ui-rounded` resolve para SF Pro Rounded no macOS e no iOS: a mesma geometria amigável e arredondada que a identidade de Pokémon usa há trinta anos. Onde não existe, cai para a Ubuntu do client — o título fica igual ao do jogo. */ --font-display: ui-rounded, "SF Pro Rounded", "Ubuntu Kit", "Hiragino Maru Gothic ProN", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.25rem + 1.1vw, 2rem); --text-3xl: clamp(1.875rem, 1.4rem + 2.2vw, 2.75rem); --text-4xl: clamp(2.25rem, 1.5rem + 3.4vw, 4rem); --leading-tight: 1.15; --leading-snug: 1.35; --leading-body: 1.65; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; /* Cantos generosos. Interface de jogo é redonda e gorda. */ --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --radius-xl: 34px; --radius-full: 999px; /* ── Sombra ────────────────────────────────────────────────────────────────── COLORIDA, não preta. Sombra preta sobre branco vira sujeira cinza; uma sombra da mesma família do fundo parece luz. É a diferença entre "card do Material" e "peça de jogo". */ --shadow-sm: 0 1px 2px oklch(0.55 0.10 250 / 0.10); --shadow: 0 2px 4px oklch(0.55 0.10 250 / 0.08), 0 8px 20px oklch(0.55 0.10 250 / 0.10); --shadow-lg: 0 4px 8px oklch(0.55 0.10 250 / 0.10), 0 20px 48px oklch(0.55 0.10 250 / 0.14); --shadow-glow: 0 0 0 3px oklch(0.60 0.23 27 / 0.22); --glow-gold: 0 0 0 3px oklch(0.81 0.17 86 / 0.30); /* Brilho de topo dentro do painel, e a aresta grossa embaixo do botão — a que faz parecer que dá para apertar. */ --panel-sheen: inset 0 2px 0 oklch(1 0 0 / 0.9); --panel-edge: inset 0 0 0 1px oklch(1 0 0 / 0.6); --press: 0 4px 0 0; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; /* ══ O KIT DO CLIENT ════════════════════════════════════════════════════════ As peças que o jogador já viu na tela de login — painel creme com moldura marinho, botão vermelho apertável, pílula escura de online, pílulas de evento. Cores FIXAS e não derivadas da paleta do site: são as do jogo, conferidas no client, e o ponto é o site ser reconhecido como o mesmo produto. */ --kit-cream: #fbf8ee; --kit-cream-deep: #f3eddb; --kit-ring: #e9e2cc; /* A linha clara por dentro da moldura e a "beirada" sólida embaixo do painel, como em KitColors.cs (InnerLine, Lip): é a linha dupla que faz a moldura ler como peça do jogo, e não como borda de site. */ --kit-inner: #9fb3d6; --kit-lip: #4c5a78; --kit-line: #e3dcc6; --kit-frame: #3b4a6b; --kit-frame-deep: #26314a; --kit-ink: #2a2d34; /* Texto secundário FRIO, como no client (KitMetaLg, InkMuted, InkLabel). O bege anterior fazia legenda e data parecerem de outro produto — e o mais claro não passava de 4,5:1 sobre o creme. */ --kit-muted: #5a5f6b; --kit-subtle: #626876; --kit-label: #4b5060; --kit-red-top: #db320c; --kit-red-bottom: #be2908; --kit-red-edge: #7d1a05; --kit-night: #222b45; --kit-night-line: #5b6684; --kit-go: #46c25a; --kit-radius: 14px; --kit-drop: 0 4px 0 var(--kit-lip); --kit-pokeball: url("/kit/pokeball-72.png"); /* As seis categorias de evento, com as cores EXATAS do client (EventCategoryColors.cs): cada uma tirada de um tipo — XP dobrada é Planta, torneio é Lutador, sazonal é Fantasma, comunidade é Inseto, raid é Terra — e todas escuras o bastante para texto branco em negrito passar de 4,5:1. */ --event-xp: #2a7a45; --event-tournament: #c0392b; --event-seasonal: #6c4f9c; --event-community: #5f6b12; --event-raid: #8a5a12; --event-maintenance: #5d6d7e; --container: 1232px; --container-wide: 1440px; --container-text: 68ch; --header-height: 102px; /* ══ A PÁGINA COMPOSTA (redesign 2026-11) ══════════════════════════════════════ Os nomes curtos da maquete aprovada. A página é composta em seções de ponta a ponta com o conteúdo limitado a 1232px (12 colunas, calha 32px; 16px no celular), e as superfícies alternam céu → sol → branco → grama. */ --ink: #1d2a44; --muted: #55627a; --line-2: #e1e9f3; --sky: #dcefff; --sky-2: #c8e5fb; --sun: #fff4d6; --grass: #e5f2d6; --white: #fff; --frame: #3b4a6b; --frame-deep: #26314a; --cream: #fbf8ee; --cream-2: #f3eedd; --cream-line: #e3dcc6; --cream-muted: #6b6658; --red: #d8300e; --red-2: #be2908; --red-deep: #7d1a05; --ok: #2e7d3a; --ok-2: #46c25a; --warn: #c77800; --bad: #c0392b; --gold: #f2c94c; --ev-xp: #2e7d3a; --ev-tour: #c0392b; --ev-season: #7a5fa8; --ev-comm: #6b6e1f; --ev-raid: #a55d12; --ev-maint: #6b7380; --r-s: 8px; --r-m: 14px; --r-l: 22px; --sh-card: 0 4px 0 rgba(59,74,107,.18), 0 14px 28px -18px rgba(38,49,74,.45); --wrap: 1232px; --gut: 32px; --z-header: 100; --z-dropdown: 200; --z-overlay: 300; --z-toast: 400; } /* Só claro, e é decisão de produto. Pokémon é branco, céu azul e cor viva — trinta anos de identidade, e nenhuma parte dela é escura. O tema escuro existia como alternativa e foi retirado: manter dois temas custa o dobro de conferência de contraste em cada tela nova, e a segunda nunca recebe a mesma atenção que a primeira. `color-scheme: light` diz isso ao navegador, para que ele não escureça sozinho campo de formulário e barra de rolagem. */ :root { color-scheme: light; } /* A fonte do client. Dois pesos só — regular e negrito —, porque são os dois que o jogo usa. Pesos intermediários (600, 800) caem no mais próximo em vez de cada um custar um arquivo. */ @font-face { font-family: "Ubuntu Kit"; src: url("/kit/fonts/ubuntu-regular.woff2") format("woff2"); font-weight: 300 500; font-style: normal; font-display: swap; } @font-face { font-family: "Ubuntu Kit"; src: url("/kit/fonts/ubuntu-bold.woff2") format("woff2"); font-weight: 600 900; font-style: normal; font-display: swap; }