/*
 * Joias VIP: variáveis do redesenho (tokens).
 * Único arquivo do tema com valor literal de cor, fonte, tamanho, espaço, raio, camada e duração.
 * Os componentes usam só os papéis (--jv-color-*, --jv-size-*, --jv-space-*...): a paleta só aparece aqui.
 * Valores: variáveis do Figma "EVOLUÇÃO JOIASVIP - MOBILE" e quadros da página de produto
 * (celular 1886:5518, computador 1418:8337), lidos em 13/10/2026.
 */
:root {
  /* Paleta. No comentário, o nome da variável no Figma. */
  --jv-palette-ink: #1d1d1d;          /* Text */
  --jv-palette-purple: #543f98;       /* PURPLE */
  --jv-palette-mint: #22d2ac;         /* Link */
  --jv-palette-lilac: #b995ff;        /* HOVER */
  --jv-palette-navy: #154a87;         /* INFORMATION */
  --jv-palette-slate: #2c3242;        /* BLUE BG */
  --jv-palette-red: #d90404;          /* RED */
  --jv-palette-green: #00a44f;        /* GREEN_BADGE */
  --jv-palette-green-100: #d6ecd7;    /* GREEN_BADGE-BG */
  --jv-palette-snow: #f8f8f8;         /* BACKGROUND */
  --jv-palette-gray-100: #eeeeee;     /* BACKGROUND GRAY */
  --jv-palette-gray-600: #707070;     /* DISABLE */
  --jv-palette-white: #ffffff;        /* WHITE */
  --jv-palette-gold: #cfb967;         /* número do selo de desconto do cartão de joia (styles.css) */
  /* Ajustes de contraste (decisão de 13/10/2026), ainda fora do Figma. */
  --jv-palette-green-700: #007639;    /* texto sobre GREEN_BADGE-BG: 4,6 (o GREEN_BADGE dá 2,6) */
  --jv-palette-gray-700: #6c6c6c;     /* texto sobre BACKGROUND GRAY: 4,5 (o DISABLE dá 4,3) */
  /* Cor herdada do CSS antigo, sem par no Figma (14/10/2026). */
  --jv-palette-gray-400: #999999;     /* linha que separa o Total no checkout */
  /* Cores do XD do menu do celular, sem par no Figma (18/10/2026). */
  --jv-palette-purple-900: #351f79;   /* cartão da Central de Ajuda */
  --jv-palette-whatsapp: #24d366;     /* círculo do WhatsApp na Central de Ajuda */

  /* Cores por papel: é isto que os componentes usam. */
  --jv-color-bg: var(--jv-palette-snow);
  --jv-color-surface: var(--jv-palette-white);              /* cartões e fotos */
  --jv-color-surface-alt: var(--jv-palette-gray-100);       /* faixas e campos */
  --jv-color-surface-dark: var(--jv-palette-slate);
  --jv-color-text: var(--jv-palette-ink);
  --jv-color-text-muted: var(--jv-palette-gray-600);        /* sobre bg e surface */
  --jv-color-text-muted-on-alt: var(--jv-palette-gray-700); /* sobre surface-alt */
  --jv-color-text-inverse: var(--jv-palette-white);         /* sobre brand e surface-dark */
  --jv-color-brand: var(--jv-palette-purple);               /* títulos, preço e destaques */
  --jv-color-on-brand: var(--jv-palette-white);
  --jv-color-action: var(--jv-palette-mint);                /* fundo do botão de compra; nunca texto (contraste 1,8) */
  --jv-color-on-action: var(--jv-palette-ink);
  --jv-color-accent: var(--jv-palette-lilac);               /* fundo, sublinhado e seleção; nunca texto (contraste 2,3) */
  --jv-color-on-accent: var(--jv-palette-ink);
  --jv-color-info: var(--jv-palette-navy);
  --jv-color-danger: var(--jv-palette-red);
  --jv-color-success: var(--jv-palette-green);              /* ícone e borda; o texto usa success-text */
  --jv-color-success-bg: var(--jv-palette-green-100);
  --jv-color-success-text: var(--jv-palette-green-700);
  --jv-color-tag-green: var(--jv-palette-green);            /* texto e ícone da tag verde: o GREEN_BADGE do Figma, contraste 2,6 (usuário, 15/10/2026: manter as cores do Figma) */
  --jv-color-price: var(--jv-color-brand);
  --jv-color-price-old: var(--jv-color-text-muted);         /* além de cinza, sempre riscado */
  --jv-color-discount-text: var(--jv-palette-gold);       /* número do selo de desconto, sobre a etiqueta roxa */
  --jv-color-border: var(--jv-palette-ink);                 /* linhas e botões de contorno */
  --jv-color-selected: var(--jv-palette-lilac);             /* miniatura e aba selecionadas */
  --jv-color-focus: var(--jv-palette-purple);               /* contorno do foco do teclado */
  --jv-color-divider: var(--jv-palette-gray-400);           /* linha divisória do checkout, igual à do Total */
  --jv-color-photo-control: color-mix(in srgb, var(--jv-palette-white) 50%, transparent); /* fundo das setas e do Fechar sobre a foto: transparente (usuário, 15/10/2026) */
  --jv-color-glass: color-mix(in srgb, var(--jv-palette-white) 35%, transparent); /* fundo de vidro do Compartilhar sobre a foto (usuário, 15/10/2026), com --jv-blur-glass */
  /* Menu do celular: cores do XD "001 - MENU" (18/10/2026), mantidas como no desenho. */
  --jv-color-menu-link: var(--jv-palette-mint);             /* link da frase de boas-vindas, verde como no XD e no menu antigo (contraste 1,8) */
  --jv-color-menu-count: var(--jv-palette-lilac);           /* total da sacola no atalho Minha Seleção (contraste 2,1) */
  --jv-color-menu-divider: var(--jv-palette-gray-600);      /* linha entre os atalhos e as Categorias */
  --jv-color-help-bg: color-mix(in srgb, var(--jv-palette-purple) 90%, transparent); /* janela da Central de Ajuda */
  --jv-color-help-card: var(--jv-palette-purple-900);
  --jv-color-whatsapp: var(--jv-palette-whatsapp);

  /* Fontes. O carregamento fica num lugar só: Templates/masters/1Column.template. */
  --jv-font-sans: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --jv-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --jv-weight-regular: 400;
  --jv-weight-bold: 700;

  /* Tamanhos de texto (1rem = 16px, e cresce com a letra do aparelho). */
  --jv-text-xs: 0.75rem;   /* 12 */
  --jv-text-sm: 0.875rem;  /* 14 */
  --jv-text-md: 1rem;      /* 16 */
  --jv-text-lg: 1.125rem;  /* 18 */
  --jv-text-xl: 1.375rem;  /* 22 */
  --jv-text-2xl: 1.5rem;   /* 24 */
  --jv-text-3xl: 1.75rem;  /* 28 */
  --jv-text-4xl: 2rem;     /* 32 */

  /* Tamanhos por papel: mudam no computador (bloco @media abaixo). */
  --jv-size-title: var(--jv-text-2xl);    /* nome da joia: 24 no celular, 28 no computador */
  --jv-size-heading: var(--jv-text-3xl);  /* título de seção: 28 no celular (usuário, 15/10/2026; no Figma, 24), 32 no computador */
  /* Regra do site (usuário, 15/10/2026): 16px é o padrão do texto corrido; 14px fica só para rótulo curto. */
  --jv-size-body: var(--jv-text-md);    /* texto corrido: parágrafo, descrição, lista de detalhes, título de sanfona */
  --jv-size-label: var(--jv-text-sm);   /* rótulo curto: botão, selo, preço, legenda */
  --jv-size-subheading: var(--jv-text-md); /* destaque dentro de um bloco ("Ops, Produto indisponível"): 16 no celular (cabe numa linha no de 360px), 22 no computador */
  --jv-size-price: var(--jv-text-2xl);  /* preço principal (as parcelas): 24 no celular, 28 no computador */
  --jv-size-countdown: var(--jv-text-lg); /* 18: números do contador da Oferta Relâmpago (Figma 1421:4701) */

  /* Altura de linha. */
  --jv-leading-none: 1;        /* Figma 100%: rótulo de uma linha */
  --jv-leading-tight: 1.06;    /* Figma 106%: preço e texto curto de uma linha */
  --jv-leading-heading: 1.18;  /* Figma 118%: título que pode quebrar linha */
  --jv-leading-normal: 1.42;   /* Figma 142%: parágrafo */
  --jv-leading-auto: normal;   /* Figma "auto": botões */

  /* Espaço: régua de 4px (decisão de 13/10/2026). */
  --jv-space-1: 0.25rem;  /* 4 */
  --jv-space-2: 0.5rem;   /* 8 */
  --jv-space-3: 0.75rem;  /* 12 */
  --jv-space-4: 1rem;     /* 16 */
  --jv-space-5: 1.25rem;  /* 20 */
  --jv-space-6: 1.5rem;   /* 24 */
  --jv-space-8: 2rem;     /* 32 */
  --jv-space-10: 2.5rem;  /* 40 */
  --jv-space-12: 3rem;    /* 48 */
  --jv-space-16: 4rem;    /* 64 */

  /* Raio. */
  --jv-radius-sm: 4px;      /* selo e foto */
  --jv-radius-md: 12px;     /* cartão */
  --jv-radius-lg: 24px;     /* bloco grande */
  --jv-radius-pill: 999px;  /* botão */

  /* Bordas. */
  --jv-border-thin: 1px;
  --jv-border-thick: 2px;      /* miniatura selecionada */
  --jv-border-indicator: 4px;  /* sublinhado da aba ativa */

  /* Sombra (só em camada que flutua sobre a página, como menu aberto). */
  --jv-shadow-popover: 0 8px 24px color-mix(in srgb, var(--jv-palette-ink) 16%, transparent);
  --jv-shadow-bar: 0 -8px 24px color-mix(in srgb, var(--jv-palette-ink) 12%, transparent); /* barra fixa embaixo da tela (Comprar no celular) */
  --jv-blur-glass: 6px;  /* desfoque do que fica atrás do vidro (--jv-color-glass) */

  /* Toque e foco (WCAG 2.2). */
  --jv-touch-min: 2.75rem;  /* 44px */
  --jv-size-radio: 1.5rem;      /* 24px: rádio das opções de frete do carrinho (Figma, 19/10/2026) */
  --jv-size-radio-dot: 1rem;    /* 16px: bolinha do rádio escolhido */
  --jv-focus-width: 2px;
  --jv-focus-offset: 2px;

  /* Camadas. O <dialog> aberto com showModal() fica acima de tudo e não usa z-index. */
  --jv-z-raised: 1;
  --jv-z-sticky: 50;     /* barra fixa de compra; o CSS antigo vai até 11 */
  --jv-z-header: 100;
  --jv-z-toast: 10000;   /* acima do 9999 do CSS antigo */

  /* Movimento. */
  --jv-duration-fast: 150ms;
  --jv-duration-base: 250ms;
  --jv-ease: cubic-bezier(0.2, 0, 0, 1);

  /* Medidas próprias de componente, tiradas do Figma. */
  --jv-size-benefit-card: 16.75rem;  /* 268px: cartão de Facilidades */
  --jv-size-benefit-icon: 5rem;      /* 80px: área do ícone, do tamanho do maior ícone */
  --jv-size-pdp-info: 50rem;         /* 800px: Descrição, Garantia, Trocas e Personal Shopper no computador (801 no Figma) */
  --jv-pdp-info-lines: 5;            /* linhas da Descrição antes do "Ver mais" (usuário, 15/10/2026) */
  --jv-size-pdp-thumb: 3.5rem;       /* 56px: miniatura da galeria no celular */
  --jv-size-pdp-thumbs: 13%;         /* coluna de miniaturas no computador: 141 dos 1.099px da galeria no Figma */
  --jv-size-pdp-play: 1.5rem;        /* 24px: ícone da miniatura do vídeo (celular e janela ampliada) */
  --jv-size-pdp-play-lg: 2rem;       /* 32px: o mesmo ícone na coluna de miniaturas do computador (50 de 143px no Figma) */
  --jv-size-icon-circle: 2rem;       /* 32px: círculo colorido atrás de ícone em lista de opções (menu de compartilhar) */
  --jv-size-pdp-video: 60rem;        /* 960px: largura máxima da janela do vídeo */
  --jv-size-pdp-viewer: 75rem;       /* 1200px: limite da foto ampliada, o tamanho da foto Zoom da Linx */
  --jv-pdp-video-proporcao: 0.5625;  /* 9:16: a maioria dos vídeos da loja é vertical (usuário, 15/10/2026); o pdp-gallery.js mede cada um */
  --jv-size-pdp-card: 15.375rem;     /* 246px: cartão da lista "Selecionados pra você" no celular (Figma 1887:6047) */
  --jv-size-container: 100%;         /* largura do conteúdo, igual à do .container das páginas (medida em 15/10/2026): 100%, 1280 e 1536px */
  --jv-pdp-gallery-zoom: 1.5;        /* zoom da foto ao passar o mouse, o mesmo da galeria antiga */
  --jv-size-pdp-aro: 2rem;           /* 32px: botão de aro (31 no Figma, NUMBER_SELECTION 1421:9023) */
  --jv-size-pdp-aro-min: 1.75rem;    /* 28px: o menor que o botão de aro fica, para caberem numa linha no celular estreito */
  --jv-size-button-max: 21.5625rem;  /* 345px: largura máxima do BUTTON no Figma (Comprar no computador); no celular, largura toda */
  --jv-size-pdp-countdown-box: clamp(2.75rem, 12vw, 3rem); /* 44 a 48px: caixa de cada número do contador da Oferta Relâmpago (47 no Figma); 44 no celular de 360px, para a faixa caber */
  --jv-size-pdp-buy: max(22.5rem, 29.3%); /* coluna de compra no computador: 465 dos 1586px no Figma (1418:8337), e a foto fica com o resto; no mínimo 360px, para os oito aros e o Comprar caberem */
  --jv-size-pdp-photo-max: max(26rem, 100vh - 18.75rem); /* foto da página de produto no computador: a altura da tela menos o topo, a navegação e o começo das abas (300px), para as abas aparecerem na primeira tela (usuário, 19/10/2026); no mínimo 416px */
  --jv-size-pdp-gallery-max: calc((var(--jv-size-pdp-photo-max) + var(--jv-space-2)) / 0.87); /* galeria inteira com essa foto: a foto fica com 87% da largura menos 8px, e as miniaturas com 13% (--jv-size-pdp-thumbs) */
  --jv-size-pdp-upsell-box: 20.9375rem;   /* 335px: quadro "Leve os 3" do Compre Junto (Figma 1483:5893) */
  --jv-size-pdp-upsell-strip: 4.5rem;     /* 72px: faixa roxa do quadro, com a sacola */
  --jv-size-pdp-upsell-icon: 2.625rem;    /* 42px: a sacola com % (42x53) e o "+" entre as joias */
  --jv-size-tag-icon: 1.4em;         /* ícone da tag: 14px para texto de 10px no Figma; com o texto de 14px, 19,6px. Dá a altura de todas as tags */

  /* Menu do celular: XD "EVOLUÇÃO - SITE - JOIAS VIP 2023 (MOBILE)", pranchetas "001 - MENU" e "001 - MENU - SAC",
     desenhadas em 430px (18/10/2026). */
  --jv-size-menu-gutter: clamp(1rem, 7.9vw, 2.125rem); /* margem lateral: 34px no XD de 430px, na mesma proporção nos menores (28px no de 360px) */
  --jv-size-menu-logo: 8.5rem;            /* 136px: logotipo no topo */
  --jv-size-menu-close: 2.25rem;          /* 36px: círculo do X */
  --jv-size-menu-field: 2.375rem;         /* 38px: altura da busca e do botão Entre ou cadastre-se */
  --jv-size-menu-search-button: 4.6875rem; /* 75px: botão verde da lupa */
  --jv-size-menu-search-icon: 1.25rem;    /* 20px: lupa */
  --jv-size-menu-shortcut-min: 6rem;      /* 96px: largura mínima do atalho, com "de Ajuda" cabendo; com mais atalhos do que cabem, a fileira rola */
  --jv-size-menu-shortcut-h: 6.25rem;     /* 100px: altura do atalho */
  --jv-size-menu-shortcut-text: clamp(0.875rem, 4.1vw, 1rem); /* nome do atalho: 16px a partir de 390px, até 14px no de 360px, para "de Ajuda" caber no atalho de 96px */
  --jv-size-menu-row: 3.625rem;           /* 58px: linha de categoria */
  --jv-size-menu-icon: 1.625rem;          /* 26px: caixa do ícone da categoria e do atalho (os ícones vão de 16 a 27px no XD) */
  --jv-size-menu-chevron: 0.75rem;        /* 12px: caixa da seta das linhas (a seta tem 6x11) */
  --jv-size-menu-swatch: 1.25rem;         /* 20px: amostra de material e de cor (Materiais, Cor dos relógios) */
  --jv-radius-menu: 6px;                  /* cantos dos atalhos e das linhas de categoria */
  --jv-size-help: 25.875rem;              /* 414px: largura máxima da janela da Central de Ajuda */
  --jv-size-help-badge: 6.625rem;         /* 106px: círculo lilás do ícone de cada cartão */
  --jv-size-help-badge-icon: 3.75rem;     /* 60px: caixa do ícone dentro do círculo (carrinho no celular, TV) */
  --jv-size-help-channel: 2.875rem;       /* 46px: botões redondos de WhatsApp e e-mail */
  --jv-size-help-channel-icon: 1.5rem;    /* 24px: envelope do e-mail (o WhatsApp ocupa o círculo todo, como no arquivo do Drive) */
  --jv-size-help-phone-icon: 1.75rem;     /* 28px: fone de atendimento ao lado do telefone */
  --jv-help-photo-ratio: 0.833;           /* foto da atendente: 358 x 430 no XD */
  --jv-radius-help: 20px;                 /* janela, cartões e foto da Central de Ajuda */
}

/* Computador: ponto de quebra oficial de 1024px. */
@media (min-width: 1024px) {
  :root {
    --jv-size-title: var(--jv-text-3xl);
    --jv-size-heading: var(--jv-text-4xl);
    --jv-size-price: var(--jv-text-3xl);
    --jv-size-subheading: var(--jv-text-xl);
  }
}

@media (min-width: 1280px) {
  :root {
    --jv-size-container: 80rem;
  }
}

/* 1536px fica fora da lista de pontos de quebra do guia: é o degrau do .container antigo, para alinhar. */
@media (min-width: 1536px) {
  :root {
    --jv-size-container: 96rem;
  }
}

/* Fundo atrás das janelas (<dialog>): a página aparece desfocada e clara (prints do usuário, 15/10/2026).
   Fica no ::backdrop, e não no :root, porque antes de 2024 (Safari 17.4, Chrome 122) o ::backdrop não herdava
   as variáveis do :root; por isso o branco aparece escrito aqui, e não pela paleta. */
::backdrop {
  --jv-color-overlay: rgb(255 255 255 / 30%);
  --jv-blur-overlay: 20px;
  /* Central de Ajuda do menu do celular: página desfocada e 20% mais escura (XD "001 - MENU - SAC", 18/10/2026). */
  --jv-filter-overlay-dark: blur(16px) brightness(80%);
}

/* Quem pede menos movimento no aparelho não vê animação. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --jv-duration-fast: 0ms;
    --jv-duration-base: 0ms;
  }
}