/* ============================================================
 * BNGHub Design System — Design Tokens
 * ------------------------------------------------------------
 * FONTE ÚNICA DE VERDADE para cores, tipografia, espaçamento etc.
 *
 * Estas variáveis são declaradas no :root (documento) e, por
 * herança, ATRAVESSAM a fronteira do Shadow DOM dos componentes.
 * Ou seja: defina aqui uma vez e todos os componentes herdam.
 *
 * Para trocar a cor da marca, mude UM valor abaixo — e pronto.
 *
 * Uso futuro no Google Apps Script: o conteúdo deste arquivo
 * deve ser inlinado dentro de um arquivo .html (ex.: Tokens.html)
 * e incluído via <?!= include('Tokens'); ?>, já que o GAS não
 * serve arquivos .css estáticos.
 * ============================================================ */

/* Carrega a fonte Poppins — precisa vir antes de qualquer regra.
 * Assim, quem consome os tokens (inclusive via CDN) já recebe a
 * fonte automaticamente, sem precisar de <link> extra na página. */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");

/* ---------- Fontes de ícone do <bng-icon> (Phosphor Icons, MIT) ----------
 *
 * Os três pesos de CONTORNO. As variantes preenchidas (fill) e de duas cores
 * (duotone) ficam deliberadamente fora do design system.
 *
 * Estes @font-face precisam viver AQUI, no documento, e não dentro do
 * componente: um @font-face declarado dentro de um Shadow DOM é ignorado pelo
 * navegador. Já a FAMÍLIA declarada aqui é enxergada de dentro do shadow root
 * — é isso que permite ao <bng-icon> manter o encapsulamento e desenhar o
 * ícone internamente, em vez de obrigar cada componente a recebê-lo por slot.
 *
 * Não usamos o CSS oficial do Phosphor (~80 KB por peso, ~245 KB nos três):
 * ele entrega as classes `.ph-*`, que NÃO atravessam Shadow DOM e seriam
 * inúteis para o componente. O mapa nome→caractere vive, bem menor, em
 * components/icon-codepoints.js.
 *
 * `font-display: block` é intencional: com `swap`, o navegador desenharia o
 * caractere numa fonte de fallback antes de a Phosphor chegar — e apareceria
 * um retângulo vazio no lugar do ícone. `block` prefere não desenhar nada
 * durante esse instante.
 *
 * As URLs apontam para o pacote npm em versão fixa (imutável, CORS liberado,
 * cache de 1 ano). Para self-hospedar no CDN da BNG, baixe os três .woff2 e
 * troque só as URLs abaixo — nada mais no design system depende disso. */
@font-face {
  font-family: "Phosphor-Light";
  src: url("https://unpkg.com/@phosphor-icons/web@2.1.2/src/light/Phosphor-Light.woff2") format("woff2");
  font-display: block;
}
@font-face {
  font-family: "Phosphor";
  src: url("https://unpkg.com/@phosphor-icons/web@2.1.2/src/regular/Phosphor.woff2") format("woff2");
  font-display: block;
}
@font-face {
  font-family: "Phosphor-Bold";
  src: url("https://unpkg.com/@phosphor-icons/web@2.1.2/src/bold/Phosphor-Bold.woff2") format("woff2");
  font-display: block;
}

:root {
  /* ---------- Cores ---------- */
  --bng-color-primary: #003cff;
  --bng-color-primary-hover: #00009b;
  --bng-color-text: #333333;
  --bng-color-text-inverted: #ffffff;

  /* ---------- Superfícies ----------
     Até a v0.3.7 o kit NÃO tinha token de fundo: quem fazia esse papel era o
     --bng-color-text-inverted, um token de TEXTO usado como background-color em
     quatro componentes. Funcionava porque os dois valem #ffffff — e quebraria
     no dia em que alguém trocasse a cor do texto invertido.

     "sunken" é a superfície REBAIXADA: o degrau abaixo do fundo padrão, para
     áreas que devem afundar em vez de saltar (a variante "filled" do
     <bng-card>). Não é o chão da página: esse é escolha do consumidor. */
  --bng-color-surface: #ffffff;
  --bng-color-surface-sunken: #f8f9fd;

  --bng-color-border: #cccccc;
  --bng-color-disabled: #cccccc;
  --bng-color-disabled-text: #888888;

  /* Texto secundário/auxiliar (ex.: dica abaixo do label do checkbox) */
  --bng-color-text-muted: #888888;

  /* Anel de foco — derivado da cor da marca (#003cff), não mais do azul do Bootstrap */
  --bng-color-focus-ring: rgba(0, 60, 255, 0.25);

  /* Trilha (parte não colorida) do spinner */
  --bng-color-spinner-track: rgba(0, 0, 0, 0.1);

  /* ---------- Tipografia ---------- */
  --bng-font-family: "Poppins", sans-serif;
  --bng-font-weight-regular: 400;
  --bng-font-weight-semibold: 600;
  --bng-font-weight-bold: 700;

  /* ATENÇÃO: não reduza abaixo de 1rem (16px). O Safari no iOS dá zoom
     automático ao focar um <input> com fonte menor que 16px, deslocando a
     página inteira. Se precisar de texto menor, use --bng-font-size-small
     em textos auxiliares — nunca no campo de entrada. */
  --bng-font-size-base: 1rem;

  /* Texto auxiliar (dicas abaixo de checkbox/switch/radio-group) */
  --bng-font-size-small: 0.875rem;

  --bng-line-height: 1.5;

  /* ---------- Escala de espaçamento ---------- */
  --bng-space-1: 0.25rem; /* 4px  */
  --bng-space-2: 0.5rem;  /* 8px  */
  --bng-space-3: 0.75rem; /* 12px */
  --bng-space-4: 1rem;    /* 16px */
  --bng-space-5: 1.5rem;  /* 24px */

  /* ---------- Raios de borda ---------- */
  --bng-radius-pill: 999px;
  --bng-radius-small: 0.375rem; /* cantos de caixas pequenas (ex.: checkbox) */
  --bng-radius-medium: 0.75rem; /* cartões e caixas de conteúdo (ex.: <bng-card>) */
  --bng-radius-large: 1.5rem;   /* superfícies grandes (ex.: painel do menu lateral) */

  /* ---------- Vidro (glassmorphism) ----------
   * Superfície translúcida que CLAREIA o fundo atrás dela, em vez de pintar
   * uma cor própria. São tokens do KIT, não de um componente: o próximo
   * elemento de vidro (cabeçalho, cartão, diálogo) lê os mesmos três valores.
   *
   * A física, em duas linhas: o branco a 12% deixa passar o que está atrás, e
   * o blur do backdrop-filter transforma esse fundo em cor difusa. Sobre
   * branco liso não há o que difundir — o vidro fica invisível. É por isso
   * que todo componente de vidro precisa de uma variante opaca (no menu
   * lateral, variant="solid") e que a demonstração exige fundo com gradiente.
   *
   * A borda de 25% não é enfeite: é a "aresta" que separa o vidro do fundo.
   * Sem ela o painel perde o limite visível quando o fundo por trás é claro.
   *
   * Contraste: texto sobre vidro herda o que está atrás. As cores de texto do
   * kit são pensadas para fundo claro; num painel de vidro o texto é branco,
   * o que exige fundo ESCURO atrás para atender o contraste da WCAG.
   *
   * Transparência reduzida (prefers-reduced-transparency) NÃO é tratada aqui,
   * de propósito: trocar --bng-glass-bg por um valor opaco às cegas deixaria
   * texto branco sobre fundo branco. Quem sabe a cor do próprio texto é o
   * componente, e é lá que a preferência é respeitada. */
  --bng-glass-bg: rgba(255, 255, 255, 0.12);
  --bng-glass-border: rgba(255, 255, 255, 0.25);
  --bng-glass-blur: 14px;

  /* ---------- Bordas ---------- */
  --bng-border-width: 1px;

  /* ---------- Elevação ----------
     Duas camadas de propósito: a primeira (1px, quase opaca) é o contato da
     superfície com o fundo e sobrevive em tela de baixo contraste; a segunda,
     larga e com spread negativo, é a sombra difusa que dá a altura. Uma camada
     só obriga a escolher entre "colada" e "flutuando demais".

     O tom é azulado (23,27,38) em vez de preto puro: sombra preta sobre fundo
     claro-frio suja, lê como cinza sujo em vez de sombra. */
  --bng-shadow-card:
    0 1px 2px rgba(23, 27, 38, 0.04),
    0 6px 16px -12px rgba(23, 27, 38, 0.16);

  /* ---------- Foco ---------- */
  --bng-focus-ring-width: 3px;

  /* ---------- Transições ---------- */
  --bng-transition-default: 0.2s ease-in-out;
  --bng-transition-fast: 0.1s ease;

  /* ---------- Dimensões de controle ----------
   * Tokens SEMÂNTICOS: os componentes não fixam mais tamanhos em pixels,
   * eles leem daqui. É o que permite o bloco @media (pointer: coarse)
   * logo abaixo adaptar TODOS os componentes de uma vez só. */

  /* Altura mínima de botão e campo de texto */
  --bng-control-height: 2.75rem; /* 44px */

  /* Lado da caixa do checkbox / diâmetro do círculo do radio */
  --bng-control-size: 1.25rem; /* 20px */

  /* Alvo de toque mínimo. 24px é o piso do WCAG 2.2 SC 2.5.8 (nível AA). */
  --bng-tap-target-min: 1.5rem; /* 24px */

  /* Dimensões do switch */
  --bng-switch-width: 2.75rem;
  --bng-switch-height: 1.5rem;
  --bng-switch-thumb: 1.125rem;

  /* Tamanho padrão do spinner */
  --bng-spinner-size: 3rem; /* 48px */
}

/* ============================================================
 * ADAPTAÇÃO POR MODALIDADE DE ENTRADA
 * ------------------------------------------------------------
 * Um componente não sabe se está num celular — mas sabe (pelo
 * navegador) se o ponteiro primário é um DEDO ou um mouse.
 *
 * Redefinir os tokens de dimensão aqui aumenta os alvos de toque
 * em todos os componentes de uma vez, inclusive nos que ainda
 * nem existem. Nenhum componente precisa de @media próprio.
 * ============================================================ */

@media (pointer: coarse) {
  :root {
    --bng-control-height: 3rem;    /* 48px — Material Design */
    --bng-control-size: 1.5rem;    /* 24px */
    --bng-tap-target-min: 2.75rem; /* 44px — Apple HIG */

    --bng-switch-width: 3.25rem;
    --bng-switch-height: 1.75rem;
    --bng-switch-thumb: 1.375rem;
  }
}

/* Respeita quem pediu menos movimento no sistema operacional (WCAG 2.3.3).
 * Zerar as durações aqui desliga as transições de TODOS os componentes.
 * A animação do spinner é @keyframes, não transição — ela tem a própria
 * guarda dentro do componente. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --bng-transition-default: 0s;
    --bng-transition-fast: 0s;
  }
}