/* ============================================================
   TOKENS DO SISTEMA VISUAL ("peça de inventário")
   ============================================================
   NA LOJA desde 12/10/2026: cópia do app/tokens.css do formulario-spot,
   que é o mesmo sistema do Guia da Staff (guiadastaff-spot) e do painel
   gestaostaff-spot. A fonte da verdade continua sendo o gestaostaff-spot.
   Pedido do dono: trazer o design system dos três pra cá, MANTENDO A MESMA
   PALETA da loja (que é justamente a paleta que os três copiaram do
   spotgames.net), SEM o céu do topo e SEM a fonte pixelada, como no
   formulário. Por isso não vieram os tokens do céu (--ln-sky-*), das
   nuvens, dos cards da navbar do guia nem a --ln-font-pixel.

   Diferenças daqui:
   - A MARCA 500 vem da configuração da loja (config.primary_color, no
     CentralCart): o layouts/layout.html declara --ln-brand-500 logo depois
     de carregar este arquivo. O valor abaixo (#7b47ff, o roxo medido nos
     botões da loja) é só a reserva. Os outros degraus são fixos.
   - O DESTAQUE (--ln-loja-destaque) vem de config.secondary_color: o âmbar
     de "Selecione uma Categoria". E o OURO (--ln-loja-ouro) é o #E6BA6A da
     categoria aberta no menu. Os dois já eram da loja.
   - TEMA CLARO: a loja tem o botão de tema (escuro/claro). O guia e o
     formulário não têm claro; o gestaostaff tem, e o bloco dele veio pra
     cá, no fim do arquivo, preso ao data-theme="light" do <html>.

   A RECEITA (é isto que faz a tela parecer um objeto, não uma página):
     1. borda de 2px quase preta
     2. moldura interna de 2px translúcida, colada por dentro da borda (ocupa
        de 2px a 4px a partir da beirada — mudar esse número desmonta o
        sistema inteiro)
     3. relevo: `inset` claro em cima, escuro embaixo
     4. sombra chapada: deslocada, SEM desfoque (zerada aqui, como no
        formulário: só a borda)

   As peças (.ln-card, .ln-btn...) moram em styles/pecas.css e só leem
   daqui. O que é só da loja (navbar, card de produto, carrinho...) mora em
   styles/loja.css.
   ============================================================ */

:root {
  /* ---- MARCA — o 500 é a cor cheia de ação (redeclarado no layout com a
     cor da configuração da loja). Texto branco no 500: 5,01; o 300 como
     texto sobre o painel, 8,79; o 400 (anel de foco), 5,71. ---- */
  --ln-brand-100: #e4e2fe;
  --ln-brand-200: #d0ccfe;
  --ln-brand-300: #b5acfe;
  --ln-brand-400: #957efe;
  --ln-brand-500: #7b47ff;
  --ln-brand-600: #6c04f5;
  --ln-brand-700: #5c02d4;
  --ln-brand-800: #4b00b0;
  --ln-brand-900: #3e0e91;
  --ln-brand-950: #251057;
  /* O "ligado" (aba ativa, chip marcado, item escolhido): fundo 500 com o
     relevo invertido — luz da própria marca em cima, sombra escura embaixo. */
  --ln-brand-bevel-top: rgba(181, 172, 254, 0.55);
  --ln-brand-bevel-bottom: #4b00b0;
  /* Sombra de cor da marca (o "pixel" do marcador de seção). */
  --ln-brand-glow: rgba(123, 71, 255, 0.3);

  /* ---- SUPERFÍCIES: 0 = fundo da página, 3 = peça mais alta ----
     Os fundos da loja: o preto neutro da página, o cinza dos painéis e o
     cinza azulado dos cartões e itens; o 3 é o tom mais alto. */
  --ln-surface-0: #0f0f0f;
  --ln-surface-1: #171717;
  --ln-surface-2: #24252e;
  --ln-surface-3: #313338;

  /* ---- BORDAS E MOLDURAS ----
     Os separadores são as bordas da loja (#20212c e #31323b). A borda quase
     preta e a moldura por dentro são da RECEITA. O miolo do slot é o
     #1e1f29 da loja; o fundo do poço fica um degrau abaixo da página. */
  /* Os separadores são da MESMA família da moldura das peças (o cinza
     azulado #464d5e com transparência): até 12/10/2026 eram as bordas do
     spotgames.net (#20212c e #31323b) e não batiam com as molduras (o dono
     pediu "uma cor que combine com o site"). */
  --ln-edge-1: rgba(70, 77, 94, 0.35);  /* separador de 1px (= --ln-frame-panel) */
  --ln-edge-2: rgba(70, 77, 94, 0.55);  /* separador mais forte (= --ln-frame-slot) */
  --ln-outline: #04060b;       /* a borda externa de 2px */
  --ln-outline-slot: #020306;  /* borda do slot e da navbar, um tom abaixo */
  --ln-shadow-flat: #04060b;   /* sombra chapada, sem blur (zerada no fim) */
  --ln-frame: #464d5e;         /* moldura interna sólida (foco) */
  --ln-frame-card: rgba(70, 77, 94, 0.30);
  --ln-frame-panel: rgba(70, 77, 94, 0.35);
  --ln-frame-nav: rgba(70, 77, 94, 0.45);  /* a da navbar: entre o painel e o slot */
  --ln-frame-slot: rgba(70, 77, 94, 0.55);
  --ln-frame-well: rgba(70, 77, 94, 0.25);
  --ln-slot-fill: #1e1f29;     /* miolo do slot */
  --ln-well-floor: #0a0a0a;    /* fundo do poço e do campo de texto */
  /* A MOLDURA SÓLIDA: a mesma cor que a moldura translúcida dá sobre o fundo
     de cada peça, mas opaca. Usada onde a moldura é desenhada POR CIMA do
     conteúdo (.ln-moldura-cima): translúcida, a imagem ou o fundo colorido
     aparecia por baixo dela e parecia "vazar" pra dentro da borda (o dono
     viu, 12/10/2026). Também nas peças de fundo fixo, pra linha que corta a
     peça de ponta a ponta sumir embaixo da moldura (loja.css). */
  --ln-frame-op-card: color-mix(in srgb, var(--ln-frame) 30%, var(--ln-surface-1));
  --ln-frame-op-card2: color-mix(in srgb, var(--ln-frame) 30%, var(--ln-surface-2));
  --ln-frame-op-card3: color-mix(in srgb, var(--ln-frame) 30%, var(--ln-surface-3));
  --ln-frame-op-panel: color-mix(in srgb, var(--ln-frame) 35%, var(--ln-surface-1));
  --ln-frame-op-nav: color-mix(in srgb, var(--ln-frame) 45%, var(--ln-surface-1));
  --ln-frame-op-raised: color-mix(in srgb, var(--ln-frame) 35%, var(--ln-surface-2));
  --ln-frame-op-slot: color-mix(in srgb, var(--ln-frame) 55%, var(--ln-slot-fill));
  --ln-frame-op-well: color-mix(in srgb, var(--ln-frame) 25%, var(--ln-well-floor));
  /* O MODAL DO PRODUTO, a janelinha de variação e as descrições nas cores do
     tema ORIGINAL (pedido do dono, 12/10/2026: a migração tinha escurecido o
     modal; a paleta não muda): o fundo é o --accent antigo (234 12% 16%), as
     peças de dentro são o cartão das descrições antigas e o quadro da imagem
     é o bg-[#404254] de antes. */
  --ln-loja-modal: #24252e;
  --ln-loja-modal-peca: #30313a;
  --ln-loja-modal-imagem: #404254;
  --ln-loja-modal-moldura: color-mix(in srgb, var(--ln-frame) 35%, #24252e);
  --ln-well-depth: rgba(0, 0, 0, 0.4);      /* sombra do topo do poço */
  --ln-well-lip: rgba(255, 255, 255, 0.08); /* lábio de luz embaixo do poço */
  --ln-selection: #edeef0;     /* borda no hover */
  --ln-hover-veil: rgba(255, 255, 255, 0.07);
  --ln-overlay: rgba(2, 3, 4, 0.7); /* fundo atrás de diálogo */

  /* ---- TEXTO — o da loja: o branco com transparência, neutro. 75% no
     corpo, 55% no apagado, 25% no bem fraco; o de dica fica entre os dois
     últimos. A transparência é de propósito: o tom acompanha a superfície
     de trás. ---- */
  --ln-text-fg: #ffffff;
  --ln-text-body: rgba(255, 255, 255, 0.75);
  --ln-text-secondary: rgba(255, 255, 255, 0.75);
  --ln-text-muted: rgba(255, 255, 255, 0.55);
  --ln-text-placeholder: rgba(255, 255, 255, 0.4);
  --ln-text-quaternary: rgba(255, 255, 255, 0.25);
  /* A marca NUNCA é cor de texto sobre fundo escuro (o 500 dá 3.7:1). Onde
     precisa de roxo legível, sobe pra 300. */
  --ln-brand-text: var(--ln-brand-300);
  /* Foco pede mais contraste que preenchimento: o anel é o 400, não o 500 —
     senão ele some em volta do botão roxo. */
  --ln-ring: var(--ln-brand-400);

  /* ---- ESTADOS (não são identidade) ---- */
  --ln-danger: #ef4444;
  --ln-warning: #f59e0b;
  --ln-success: #10b981;
  --ln-info: var(--ln-brand-400);
  --ln-danger-text: #f87171;
  --ln-warning-text: #ffaf38;
  --ln-success-text: #34d399;

  /* ---- MARCAS DE TERCEIROS ---- */
  --ln-discord: #5865f2;
  --ln-discord-bottom: #3c45a5;

  /* ---- CORES DO CHAT DO MINECRAFT (cargos, tags dos VIPs) ---- */
  --ln-mc-yellow: #ffff55;
  --ln-mc-gold: #ffaa00;
  --ln-mc-red: #ff5555;
  --ln-mc-dark-red: #aa0000;
  --ln-mc-dark-aqua: #00aaaa;
  --ln-mc-dark-purple: #aa00aa;
  --ln-mc-dark-green: #00aa00;
  --ln-mc-green: #55ff55;
  --ln-mc-light-purple: #ff55ff;
  --ln-mc-blue: #5555ff;
  /* As cores das TAGS dos VIPs (as que o dono passou, 12/10/2026): as do
     chat do jogo. */
  --ln-vip-super: var(--ln-mc-green);          /* #55FF55 */
  --ln-vip-legend: var(--ln-mc-light-purple);  /* #FF55FF */
  --ln-vip-supreme: var(--ln-mc-gold);         /* #FFAA00 */

  /* ---- MEDALHAS DO PÓDIO ---- */
  --ln-medal-gold: #f59e0b;
  --ln-medal-silver: #94a3b8;
  --ln-medal-bronze: #b47a50;

  /* ---- CATEGORIAS (cores de dado) ---- */
  --ln-cat-grass: #10b981;
  --ln-cat-gold: #f59e0b;
  --ln-cat-diamond: #06b6d4;
  --ln-cat-redstone: #ef4444;
  --ln-cat-amethyst: #8b5cf6;

  /* ---- BOTÕES: face / luz de cima / sombra de baixo, por variante ---- */
  --ln-btn-primary-face: var(--ln-brand-500);
  --ln-btn-primary-top: rgba(255, 255, 255, 0.22);
  --ln-btn-primary-bottom: var(--ln-brand-800);
  /* A face dos botões secundários e de slot: o #25262f dos botões de
     categoria da loja. */
  --ln-btn-secondary-face: #25262f;
  --ln-btn-secondary-top: rgba(255, 255, 255, 0.2);
  --ln-btn-secondary-bottom: #040609;
  --ln-btn-danger-face: #ef4444;
  --ln-btn-danger-top: rgba(255, 255, 255, 0.24);
  --ln-btn-danger-bottom: #991b1b;
  --ln-btn-slot-face: #25262f;
  --ln-btn-slot-top: rgba(255, 255, 255, 0.2);
  --ln-btn-slot-bottom: #040609;
  --ln-btn-slot-ink: #fafafa;
  --ln-btn-light-face: #e9ebee;
  --ln-btn-light-top: #ffffff;
  --ln-btn-light-bottom: #a6abb4;
  --ln-btn-light-ink: var(--ln-surface-0);
  /* O verde do "já está no carrinho" (o .ln-btn-green das peças). */
  --ln-btn-success-face: #1f9a4d;
  --ln-btn-success-bottom: #005725;
  --ln-btn-top: 2px;
  --ln-btn-bottom: 3px;
  --ln-btn-pressed-bottom: 1px;

  /* ---- RAIOS ---- */
  --ln-radius-card: 8px;
  --ln-radius-slot: 6px;
  --ln-radius-sm: 4px;
  --ln-radius-hero: 16px;

  /* ---- SÓ DA LOJA ----
     O destaque (redeclarado no layout com config.secondary_color): o âmbar
     de "Selecione uma Categoria". Como texto no claro, desce pro âmbar
     escuro (bloco do tema claro). */
  --ln-loja-destaque: #ffaf38;
  --ln-loja-destaque-texto: var(--ln-loja-destaque);
  /* O ouro da categoria aberta no menu (o traço do lado e o nome). */
  --ln-loja-ouro: #e6ba6a;
  --ln-loja-ouro-texto: var(--ln-loja-ouro);
  /* O selo de desconto do card (a etiqueta com o raio). */
  --ln-loja-etiqueta: #f9b045;
  --ln-loja-etiqueta-raio: #ff3b30;
  /* O selo de quantidade do carrinho. */
  --ln-loja-contador: #ff9800;
  /* O FEIXE que gira na borda do card "Mais popular": o rosa da tag LEGEND
     (os cards em destaque são os VIP Legend). Pedido do dono, 12/10/2026. */
  --ln-loja-feixe: var(--ln-vip-legend);

  /* Sem a sombra preta embaixo das peças (como no formulário): o painel, o
     diálogo e os avisos ficam só com a borda. O relevo dos botões (o degrau
     escuro embaixo) fica: ele não usa este token. */
  --ln-shadow-flat: transparent;
}

/* ============================================================
   TEMA CLARO (o botão de tema da loja: <html data-theme="light">)
   O bloco claro do gestaostaff: a receita sobre o claro da loja (página
   branca, painel #f5f5f5, itens brancos, o mesmo roxo). Redefine SÓ a
   rampa; as peças leem dela e acompanham sozinhas. Fica no MESMO elemento
   do :root (o <html>), então os derivados (var() de var()) se resolvem já
   com os valores daqui.
   ============================================================ */
:root[data-theme="light"] {
  /* No claro o 400 (informação e anel) sobe pro 500: o 400 do escuro
     (#957efe) some no branco. */
  --ln-brand-400: var(--ln-brand-500);
  --ln-brand-bevel-top: rgba(208, 204, 254, 0.7);
  --ln-brand-bevel-bottom: #3e0e91;

  --ln-surface-0: #ffffff;
  --ln-surface-1: #f5f5f5;
  --ln-surface-2: #ffffff;
  --ln-surface-3: #ebebeb;

  --ln-edge-1: #e4e4e4;
  --ln-edge-2: #d4d4d4;
  --ln-outline: #c5ccd8;
  --ln-outline-slot: #b9c1cf;
  --ln-frame: #9aa3b3;
  --ln-frame-card: rgba(15, 23, 42, 0.05);
  --ln-frame-panel: rgba(15, 23, 42, 0.06);
  --ln-frame-nav: rgba(15, 23, 42, 0.07);
  --ln-frame-slot: rgba(15, 23, 42, 0.08);
  --ln-frame-well: rgba(15, 23, 42, 0.06);
  --ln-slot-fill: #fafafa;
  --ln-well-floor: #f0f0f0;
  /* A moldura sólida no claro: o azul-ardósia das molduras daqui sobre o
     fundo de cada peça. */
  --ln-frame-op-card: color-mix(in srgb, #0f172a 5%, var(--ln-surface-1));
  --ln-frame-op-card2: color-mix(in srgb, #0f172a 5%, var(--ln-surface-2));
  --ln-frame-op-card3: color-mix(in srgb, #0f172a 5%, var(--ln-surface-3));
  --ln-frame-op-panel: color-mix(in srgb, #0f172a 6%, var(--ln-surface-1));
  --ln-frame-op-nav: color-mix(in srgb, #0f172a 7%, var(--ln-surface-1));
  --ln-frame-op-raised: color-mix(in srgb, #0f172a 6%, var(--ln-surface-2));
  --ln-frame-op-slot: color-mix(in srgb, #0f172a 8%, var(--ln-slot-fill));
  --ln-frame-op-well: color-mix(in srgb, #0f172a 6%, var(--ln-well-floor));
  /* O modal do produto no claro: o --accent claro do original (0 0% 96%). */
  --ln-loja-modal: #f5f5f5;
  --ln-loja-modal-peca: #ffffff;
  --ln-loja-modal-imagem: #ebebeb;
  --ln-loja-modal-moldura: color-mix(in srgb, #0f172a 6%, #f5f5f5);
  --ln-well-depth: rgba(15, 23, 42, 0.07);
  --ln-well-lip: rgba(255, 255, 255, 0.9);
  --ln-selection: #1b2130;
  --ln-hover-veil: rgba(15, 23, 42, 0.04);
  --ln-overlay: rgba(15, 23, 42, 0.38);

  --ln-text-fg: #1b1f24;
  --ln-text-body: #2b3240;
  --ln-text-secondary: #3a4250;
  --ln-text-muted: #5b6471;
  --ln-text-placeholder: #8b94a3;
  --ln-text-quaternary: #aab2bf;
  --ln-brand-text: var(--ln-brand-700);
  --ln-ring: var(--ln-brand-500);

  --ln-danger: #dc2626;
  --ln-warning: #d97706;
  --ln-success: #059669;
  --ln-danger-text: #b91c1c;
  --ln-warning-text: #b45309;
  --ln-success-text: #047857;

  --ln-btn-danger-face: #dc2626;
  --ln-btn-secondary-face: #ffffff;
  --ln-btn-secondary-top: #ffffff;
  --ln-btn-secondary-bottom: #d3d9e3;
  --ln-btn-slot-face: #ffffff;
  --ln-btn-slot-top: #ffffff;
  --ln-btn-slot-bottom: #d3d9e3;
  --ln-btn-slot-ink: #1b1f24;
  --ln-btn-light-face: #1b1f24;
  --ln-btn-light-top: rgba(255, 255, 255, 0.18);
  --ln-btn-light-bottom: #000000;
  --ln-btn-light-ink: #ffffff;

  /* O âmbar e o ouro como TEXTO no branco: os tons escuros (o âmbar dos
     estados no claro). O fundo do selo continua o claro. */
  --ln-loja-destaque-texto: #b45309;
  --ln-loja-ouro-texto: #9a6a10;
}