/* LoadTeca - TOKENS (identidade v3, "ficha de biblioteca"). Unico arquivo CSS onde cor literal
   (hex, rgb, hsl) e tamanho de fonte podem ser escritos. Todo o resto usa var(--...).
   Documentacao: docs/design-system.md. Plano: docs/superpowers/specs/2026-10-05-loadteca-identidade-v3.md
   Regras da v3: cor chapada (nada de degrade na interface; o degrade vive so no logo do canal),
   nenhum brilho colorido, cantos quase retos, linhas finas neutras. */

/* ---------- Fontes (hospedadas aqui; veja static/fonts/LEIAME.txt) ---------- */
/* Hanken Grotesk (titulos e corpo) e Martian Mono sao variaveis. */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Martian Mono";
  font-style: normal;
  font-weight: 300 600;
  font-stretch: 75% 112.5%;
  font-display: swap;
  src: url("../fonts/martian-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Martian Mono";
  font-style: normal;
  font-weight: 300 600;
  font-stretch: 75% 112.5%;
  font-display: swap;
  src: url("../fonts/martian-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  /* ----- Cor: base neutra (sem tinta roxa) ----- */
  --cor-vazio: #0b0b0d;          /* fundo da pagina */
  --cor-fundo: #14161d;          /* campos, areas rebaixadas (grafite azulado, estilo PS5) */
  --cor-painel: #1b1e27;         /* paineis e cartoes: um degrau acima do vazio */
  --cor-painel-2: #272b37;       /* hover, elevado, capa vazia */
  --cor-superficie: var(--cor-painel);     /* apelido de compatibilidade */
  --cor-superficie-2: var(--cor-painel-2); /* apelido de compatibilidade */

  --cor-texto: #f2f0ea;          /* branco quente, 17:1 no vazio */
  --cor-texto-suave: #a5a4ad;    /* 6,8:1 no painel */
  --cor-sobre-escuro: #ffffff;

  /* ----- Cor: marca (uma cor chapada, tirada do logo do canal) ----- */
  --cor-canal: #9e12bd;          /* roxo-magenta do logo; botao primario (texto branco 6,4:1) */
  --cor-canal-hover: #b31fd4;
  --cor-canal-claro: #dba2f2;    /* a cor do canal como texto sobre escuro (9,8:1) */
  --cor-indigo: var(--cor-canal);    /* apelidos de compatibilidade da v2 */
  --cor-violeta: var(--cor-canal);
  --cor-magenta: var(--cor-canal);
  --cor-magenta-escuro: var(--cor-canal);
  --cor-primaria: var(--cor-canal);
  --cor-primaria-hover: var(--cor-canal-hover);
  --cor-sobre-primaria: #ffffff;
  --cor-link: var(--cor-canal-claro);
  --cor-link-hover: #f0d6fb;
  --cor-foco: #8fdcff;

  /* ----- Cor: simbolos do controle (so na chuva de formas e em detalhes decorativos) ----- */
  --cor-triangulo: #3ddbb0;
  --cor-circulo: #ff5470;
  --cor-xis: #78a9ff;
  --cor-quadrado: #f291d8;

  /* ----- Cor: troféus (significado de status; sempre com icone e texto) ----- */
  --cor-platina: #8fdcff;        /* disponivel */
  --cor-platina-2: #c4edff;
  --cor-platina-3: #4f93bf;      /* sombra do troféu de platina */
  --cor-sobre-platina: #06283b;  /* 10:1 */
  --cor-ouro: #f7c948;           /* sua vez */
  --cor-ouro-2: #ffe08a;
  --cor-sobre-ouro: #2e2200;     /* 10:1 */
  --cor-prata: #c9ccd6;          /* em uso / fila */
  --cor-sobre-prata: #17181d;
  --cor-bronze: #d58b4f;         /* reservado a selos de conquista */

  /* ----- Cor: semanticas (mensagens, admin) ----- */
  --cor-ok: #6ee7b7;
  --cor-ok-fundo: rgba(110, 231, 183, 0.1);
  --cor-aviso: var(--cor-ouro);
  --cor-aviso-fundo: rgba(247, 201, 72, 0.1);
  --cor-erro: #ff9bb0;
  --cor-erro-fundo: rgba(255, 99, 132, 0.12);
  --cor-info: var(--cor-link);
  --cor-info-fundo: rgba(158, 18, 189, 0.16);
  --cor-neutro: #b4b3bc;
  --cor-neutro-fundo: rgba(255, 255, 255, 0.06);
  --cor-platina-fundo: rgba(143, 220, 255, 0.1);
  --cor-ouro-fundo: rgba(247, 201, 72, 0.12);
  --cor-prata-fundo: rgba(201, 204, 214, 0.1);

  /* ----- Cor: linhas e bordas (neutras, finas) ----- */
  --cor-borda: rgba(255, 255, 255, 0.11);         /* decorativa (cartoes, divisorias) */
  --cor-borda-forte: rgba(255, 255, 255, 0.18);
  --cor-borda-campo: #6c6b76;                      /* controles: 3,4:1 no fundo */
  --cor-vidro: rgba(255, 255, 255, 0.04);          /* chips, botao fantasma */
  --cor-vidro-hover: rgba(255, 255, 255, 0.09);
  --cor-tinta-navbar: rgba(11, 11, 13, 0.86);
  --cor-toque: rgba(158, 18, 189, 0.25);
  --cor-grade: rgba(255, 255, 255, 0.028);         /* linhas da grade de fundo */

  /* ----- "Degrades": na v3 sao cores chapadas (mantidos como tokens por compatibilidade) ----- */
  --grad-marca: var(--cor-canal);
  --grad-marca-hover: var(--cor-canal-hover);
  --grad-platina: var(--cor-platina);
  --grad-ouro: var(--cor-ouro);
  --grad-capa-vazia: var(--cor-painel-2);
  --grad-texto-marca: linear-gradient(var(--cor-texto), var(--cor-texto));
  --grad-texto-platina: linear-gradient(var(--cor-texto), var(--cor-texto));
  --fundo-brilho: linear-gradient(transparent, transparent);
  --fundo-grade:
    linear-gradient(var(--cor-grade) 1px, transparent 1px) 0 0 / 3rem 3rem,
    linear-gradient(90deg, var(--cor-grade) 1px, transparent 1px) 0 0 / 3rem 3rem;
  --sombra-capa: linear-gradient(180deg, transparent 42%, rgba(11, 11, 13, 0.94));
  --veu-hero: linear-gradient(90deg, rgba(11, 11, 13, 0.97) 22%, rgba(11, 11, 13, 0.72) 62%, rgba(11, 11, 13, 0.45));
  --veu-hero-vertical: linear-gradient(180deg, rgba(11, 11, 13, 0.6), rgba(11, 11, 13, 0.96));
  /* Veu do carrossel: mais leve, a arte do jogo aparece inteira e o texto continua legivel. */
  --veu-vitrine: linear-gradient(90deg, rgba(11, 11, 13, 0.94) 0%, rgba(11, 11, 13, 0.82) 30%, rgba(11, 11, 13, 0.25) 62%, rgba(11, 11, 13, 0));
  --mascara-esmaecer-esquerda: linear-gradient(90deg, transparent, #000 22%); /* mask-image */

  /* ----- Tipografia ----- */
  --fonte-display: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;     /* titulos grandes, nomes de jogo (peso 600) */
  --fonte-titulo: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;      /* h2, h3, interface */
  --fonte-corpo: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fonte-mono: "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; /* status, numeros, etiquetas */

  --texto-2xs: 0.6875rem;  /* 11px: so mono em caixa alta (tombo, carimbo) */
  --texto-xs: 0.75rem;     /* 12px: selos e legendas */
  --texto-sm: 0.875rem;    /* 14px: apoio, tabelas densas */
  --texto-md: 1rem;        /* 16px: corpo e campos (evita zoom no iOS) */
  --texto-lg: 1.125rem;    /* 18px: texto de abertura */
  --texto-xl: 1.25rem;     /* 20px: titulo de secao */
  --texto-2xl: 1.5rem;     /* 24px */
  --texto-3xl: 2rem;       /* 32px: numeros de destaque */
  --titulo-1: clamp(2.5rem, 1.5rem + 4.6vw, 5rem);       /* hero */
  --titulo-pagina: clamp(2rem, 1.6rem + 1.8vw, 3rem);    /* h1 das telas */
  --titulo-2: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);    /* h2, titulo de secao */
  --titulo-3: 1.0625rem;                                  /* titulo de cartao e bloco */
  --titulo-jogo: clamp(2.125rem, 1.5rem + 2.8vw, 3.75rem); /* nome do jogo no hero e na ficha */
  --peso-leve: 300;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600;
  --peso-extra: 700;
  --altura-linha: 1.6;
  --tracking-corpo: 0.01em;
  --altura-titulo: 1.15;
  --altura-display: 1.02;
  --tracking-selo: 0.07em;
  --tracking-marca: 0.16em;
  --tracking-etiqueta: 0.12em;
  --tracking-display: -0.02em;

  /* ----- Espacos (escala de 4px) ----- */
  --espaco-1: 0.25rem;
  --espaco-2: 0.5rem;
  --espaco-3: 0.75rem;
  --espaco-4: 1rem;
  --espaco-5: 1.5rem;
  --espaco-6: 2rem;
  --espaco-7: 3rem;
  --espaco-8: 4rem;
  --espaco-9: 6rem;

  /* ----- Raios (quase retos) ----- */
  --raio-pequeno: 0.1875rem; /* 3px: selos, chips */
  --raio: 0.375rem;          /* 6px: botoes, campos */
  --raio-cartao: 0.5rem;     /* 8px: cartoes */
  --raio-grande: 0.75rem;    /* 12px: hero e paineis grandes */
  --raio-pilula: 999px;      /* so avatar */

  /* ----- Sombras (sem brilho colorido; "brilhos" viraram contornos neutros) ----- */
  --sem-sombra: 0 0 0 0 transparent;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.45);
  --sombra-elevada: 0 18px 48px rgba(0, 0, 0, 0.6);
  --brilho-violeta: var(--sem-sombra);
  --brilho-violeta-suave: var(--sem-sombra);
  --brilho-platina: var(--sem-sombra);
  --brilho-platina-selo: var(--sem-sombra);
  --brilho-ouro: var(--sem-sombra);
  --brilho-ouro-selo: 0 0 0 3px rgba(247, 201, 72, 0.35);  /* pulso do "sua vez" */
  --brilho-prata: var(--sem-sombra);
  --brilho-vidro: var(--sem-sombra);
  --anel-foco: 0 0 0 3px rgba(143, 220, 255, 0.35);
  --realce-topo: inset 0 1px 0 rgba(255, 255, 255, 0.06); /* fio de luz no topo dos blocos (PS5) */

  /* ----- Layout ----- */
  --largura-max: 77.5rem;      /* 1240px */
  --largura-leitura: 42rem;
  --alvo-toque: 2.75rem;       /* 44px */
  --altura-navbar: 4rem;
  /* Breakpoints (media query nao aceita var): 360px = 22.5rem, 768px = 48rem, 1280px = 80rem. */

  /* ----- Movimento ----- */
  --duracao-rapida: 120ms;
  --duracao: 180ms;
  --duracao-lenta: 320ms;
  --suavizacao: cubic-bezier(0.2, 0.7, 0.2, 1);
}