/*
  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:          oklch(0.975 0.014 230);
  --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:      oklch(0.945 0.038 230);
  --bg-band-warm: oklch(0.965 0.040 92);

  /* Bordas VISÍVEIS. Interface de jogo tem moldura; um fio de 4% de opacidade é a
     assinatura do painel administrativo. */
  --line:        oklch(0.87 0.030 230);
  --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:        oklch(0.28 0.045 250);
  --text-muted:  oklch(0.47 0.040 250);
  --text-subtle: oklch(0.60 0.035 250);
  --text-on-brand: oklch(0.99 0 0);

  /* ── Tipografia ──────────────────────────────────────────────────────────────
     Pilha do sistema: sem fonte remota, sem salto quando ela chega, sem terceiro
     observando quem lê. A CSP proíbe fonte externa de qualquer forma. */
  --font-sans: 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 pilha do sistema e nada quebra. */
  --font-display: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN",
                  "Varela Round", 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;

  --container: 1200px;
  --container-wide: 1440px;
  --container-text: 68ch;

  --header-height: 68px;
  --z-header: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-toast: 400;
}

/*
  Tema escuro — a OPÇÃO, não o padrão.

  Existe para quem joga de madrugada e não quer um flash na cara ao alternar entre o
  cliente e o site. Não é uma inversão automática: os neutros são reescolhidos e as
  cores de tipo são clareadas, porque vários dos valores oficiais somem sobre o escuro.

  Só entra quando a pessoa PEDE (data-theme="dark") ou quando o sistema dela pede.
*/
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:          oklch(0.24 0.045 245);
  --bg-raised:   oklch(0.30 0.048 245);
  --bg-overlay:  oklch(0.36 0.050 245);
  --bg-inset:    oklch(0.20 0.042 248);

  --bg-band:      oklch(0.27 0.052 240);
  --bg-band-warm: oklch(0.28 0.048 45);

  --line:        oklch(0.44 0.055 245);
  --line-strong: oklch(0.58 0.070 245);

  --text:        oklch(0.97 0.010 245);
  --text-muted:  oklch(0.78 0.020 245);
  --text-subtle: oklch(0.63 0.020 245);

  --brand-400: oklch(0.72 0.20 27);
  --brand-500: oklch(0.65 0.22 27);
  --brand-600: oklch(0.57 0.21 27);

  --sky-300: oklch(0.78 0.11 230);
  --sky-400: oklch(0.70 0.14 235);

  --type-fighting: oklch(0.62 0.17 28);
  --type-poison:   oklch(0.65 0.17 320);
  --type-ghost:    oklch(0.60 0.14 300);
  --type-dragon:   oklch(0.62 0.18 278);
  --type-dark:     oklch(0.52 0.06 50);
  --type-water:    oklch(0.70 0.15 245);

  --panel-sheen: inset 0 2px 0 oklch(1 0 0 / 0.08);
  --panel-edge:  inset 0 0 0 1px oklch(1 0 0 / 0.05);

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.34);
  --shadow:    0 2px 4px oklch(0 0 0 / 0.30), 0 8px 20px oklch(0 0 0 / 0.26);
  --shadow-lg: 0 4px 8px oklch(0 0 0 / 0.32), 0 20px 48px oklch(0 0 0 / 0.34);
}

/*
  Quem tem o sistema em escuro recebe escuro, até declarar o contrário.
  `data-theme` na raiz sempre vence — um clique bate a preferência do sistema.
*/
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --bg:          oklch(0.24 0.045 245);
    --bg-raised:   oklch(0.30 0.048 245);
    --bg-overlay:  oklch(0.36 0.050 245);
    --bg-inset:    oklch(0.20 0.042 248);
    --bg-band:      oklch(0.27 0.052 240);
    --bg-band-warm: oklch(0.28 0.048 45);
    --line:        oklch(0.44 0.055 245);
    --line-strong: oklch(0.58 0.070 245);
    --text:        oklch(0.97 0.010 245);
    --text-muted:  oklch(0.78 0.020 245);
    --text-subtle: oklch(0.63 0.020 245);
    --brand-400: oklch(0.72 0.20 27);
    --brand-500: oklch(0.65 0.22 27);
    --brand-600: oklch(0.57 0.21 27);
    --sky-300: oklch(0.78 0.11 230);
    --sky-400: oklch(0.70 0.14 235);
    --type-fighting: oklch(0.62 0.17 28);
    --type-poison:   oklch(0.65 0.17 320);
    --type-ghost:    oklch(0.60 0.14 300);
    --type-dragon:   oklch(0.62 0.18 278);
    --type-dark:     oklch(0.52 0.06 50);
    --type-water:    oklch(0.70 0.15 245);
    --panel-sheen: inset 0 2px 0 oklch(1 0 0 / 0.08);
    --panel-edge:  inset 0 0 0 1px oklch(1 0 0 / 0.05);
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.34);
    --shadow:    0 2px 4px oklch(0 0 0 / 0.30), 0 8px 20px oklch(0 0 0 / 0.26);
    --shadow-lg: 0 4px 8px oklch(0 0 0 / 0.32), 0 20px 48px oklch(0 0 0 / 0.34);
  }
}