/* ============================================================
   BFMIDI — VITRINE (Site/) · TOKENS
   ------------------------------------------------------------
   A FONTE ÚNICA do tema publicado: o palco escuro. Só custom
   properties, nenhuma regra de componente. Carregado ANTES de
   todas as outras folhas.

   Quem consome:
   · o cromo (css/style.css, css/refine.css): cápsula de
     modelos, barras, rodapé, HOME;
   · a linguagem dos painéis (css/pages.css), que só cria
     APELIDOS (--pg-*) apontando para cá;
   · os painéis (info/conects/shop/downloads.css) e os Apps.
   Painel NÃO redefine token: se faltar um, ele entra aqui.

   SELETOR `html:root` (e não `:root`): especificidade 0,1,1.
   Assim nenhum `:root` solto que outra folha ainda declare
   ganha deste arquivo por vir depois na cascata — a fonte é
   uma só por construção, não por ordem de <link>.

   Contrastes medidos sobre --bg (#080b10), o fundo real da
   página. Sobre o cartão (--surface, ~#19212c) cada um perde
   cerca de 20%, e ainda passa AA onde é usado.

   Três regras de cor, iguais no site inteiro:
   A) O LARANJA é o único estado aceso — o leito do modelo
      ativo, a pílula ativa, o CTA, o ponto do micro-rótulo.
   B) O AZUL é luz, nunca enfeite: anel de LED, contraluz.
   C) A cor de LED diz o ASSUNTO (tabela --led-*), não a
      posição do cartão. Ela mora só no anel, no brilho de
      canto do cartão e nos pontos de LED; rótulo e botão
      fantasma ficam neutros.
   ============================================================ */

html:root {
  color-scheme: dark;

  /* ---------- PALCO ---------------------------------------- */
  --bg:   #080b10;   /* fundo da página (o palco) */
  --bg-2: #111720;   /* placa um degrau acima do fundo */

  /* Superfície de cartão: grafite com alfa .95, para o bokeh das
     partículas não atravessar o cartão e virar mancha. */
  --surface: linear-gradient(180deg, #19212cf2, #121820f2);
  /* Poço: o rebaixo dentro de um cartão (fileira de LEDs, miniatura). */
  --well: #0c1118e6;
  /* Filete do cartão (o limite de cima que pega luz). */
  --card-edge: #ffffff0d;
  /* Sombra do cartão: o filete de luz em cima + a sombra curta embaixo. */
  --card-shadow: inset 0 1px 0 #ffffff0f, 0 16px 30px -24px #000;
  --well-shadow: inset 0 1px 3px #0009, inset 0 0 0 1px #ffffff0c;

  /* ---------- TINTA ----------------------------------------
     Sobre #080b10: */
  --ink:   #eef3fa;   /* 17,7:1 — títulos, números, texto forte */
  --ink-2: #bdc8d8;   /* 11,7:1 — corpo de texto, rótulo de cartão */
  --ink-3: #a4b0c2;   /*  9,0:1 (7,4:1 no cartão) — legenda, nota, micro-rótulo fraco */
  --title-ink: #f5f8fc;   /* 18,5:1 — a primeira linha do título de página */

  /* Filetes: divisor decorativo (--line) e contorno de controle
     (--line-2, o que identifica botão fantasma e pílula). */
  --line:   #a6bedd24;
  --line-2: #a6bedd3b;

  /* ---------- LARANJA (o único aceso) --------------------- */
  --orange:  #ff792f;                                     /* ponto do micro-rótulo, leito */
  --cta:     linear-gradient(155deg, #ffb765, #ff7838);   /* botão primário */
  --cta-ink: #391508;                                     /* texto sobre o --cta: 9,5:1 a 6,2:1 */
  --cta-edge: #ffc17e99;
  --cta-shadow: inset 0 1px 1px #ffdfb2, 0 10px 28px -10px #ff6a1f88;
  /* Botão fantasma (secundário): neutro, sem a cor do assunto. */
  --ghost-bg: #0f1824cc;
  --ghost-bg-hover: #16212fcc;
  --ghost-edge-hover: #ffffff4d;
  --kicker-ink: #ffc196;   /* micro-rótulo de página: 12,5:1 — o único acento de texto */
  /* A segunda linha do título: degradê laranja (--hot) com a cor
     sólida de reserva (--hot-ink) para navegador sem clip. */
  --hot: linear-gradient(100deg, #ffd9ad 0%, #ffb765 28%, #ff8a45 62%, #ff6a26 100%);
  --hot-ink: #ff9a4c;

  /* Etiqueta branca do chassi (a serigrafia das portas e o nome do
     modelo no micro-rótulo): 16,1:1. */
  --tag-bg:  #e6eaf0;
  --tag-ink: #0b0d11;

  /* Verde de sucesso — e a EXCEÇÃO documentada do código de LED:
     o WhatsApp é sempre #39d98a, porque é a cor da marca dele. */
  --ok: #39d98a;

  /* ---------- FOCO ÚNICO -----------------------------------
     #ffd2a6 sobre #080b10 = 14,1:1 (11,6:1 sobre o cartão). A espessura muda por faixa
     (3px no celular, 3.75px CSS no desktop, que com o zoom .8
     dão os mesmos 3px na tela). Em pílula ou tecla de navegação
     o anel entra por DENTRO (outline-offset -4px). */
  --focus: #ffd2a6;
  --focus-w: 3px;
  --focus-offset: 4px;

  /* ---------- COR = ASSUNTO (o LED do pedal) ---------------
     Uma tabela só para INFO, IN/OUT, Apps e Downloads. Quem
     desenha passa a STRING 'var(--led-x)' ao ledRing() e ao --c
     do cartão. */
  --led-midi:     #ffac61;  /* MIDI, DIN5/TRS, footswitches, editor/app, modo amigável */
  --led-usb:      #3fa9ff;  /* USB device/host, cabo USB, atualizador de firmware */
  --led-wireless: #b07cff;  /* Bluetooth, Wi-Fi, rede de casa */
  --led-input:    #57df95;  /* EXP, 2SW (entradas) */
  --led-screen:   #39e1e9;  /* tela, tela e LEDs */
  --led-presets:  #ffd166;  /* presets, bancos, Backup View */
  --led-live:     #ff6fae;  /* comportamentos do LIVE, modo LIVE */
  --led-doc:      #dfe6ef;  /* manual, sem pedal / offline */
  --led-whatsapp: var(--ok);  /* a exceção: a cor da marca do WhatsApp */

  /* ---------- CROMO EM GRAFITE -----------------------------
     Cápsula de modelos, pílulas da barra de baixo, barra de
     recursos e botões utilitários: o mesmo material dos
     cartões, opaco (sem backdrop-filter). */
  --chrome-bg:     linear-gradient(180deg, #19212c, #121820);
  --chrome-edge:   var(--line-2);
  --chrome-shadow: inset 0 1px 0 #ffffff14, 0 16px 34px -20px #000;
  --chrome-ink:    #c3cfdd;          /* texto inativo: 10,3:1 sobre #19212c */
  --chrome-sep:    var(--line);      /* separador entre abas */
  --chrome-hover-bg:   #ffffff0d;    /* só dentro de @media (hover: hover) */
  --chrome-hover-edge: #a6bedd55;
  /* A pílula ativa da barra (o laranja aceso em grafite). */
  --chrome-on-bg:   linear-gradient(155deg, #3a2a1f, #231a14);
  --chrome-on-edge: #e7a36b;
  --chrome-on-ink:  #ffd2a4;          /* 9,8:1 no tom mais claro do fundo */
  /* A tecla utilitária ativa (APP, engrenagem): anel + brilho. */
  --chrome-util-on: 0 0 0 2px #ff8e3e, 0 0 24px #ff7a3355;

  /* ---------- TIPOGRAFIA -----------------------------------
     Archivo é VARIÁVEL no eixo de largura. Três ajustes, e só
     três: título e título de cartão em 'wdth' 108/800; número de
     ficha e nome de modelo (a leitura de instrumento, a "placa")
     em 'wdth' 115/800 com tabular-nums; a frase forte de cartão
     em 'wdth' 100/700. O 900 é só da palavra da HOME. A mono é
     de sistema: nos micro-rótulos, SF Mono / Cascadia / Consolas
     são indistinguíveis. */
  --font-display: "Archivo", "Arial Black", Helvetica, Arial, sans-serif;
  --font-body:    "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --wdth-title:   108;
  --wdth-readout: 115;
  --wdth-phrase:  100;
  --wdth-plate: var(--wdth-readout);   /* nome antigo, mesmo valor */

  /* Piso de texto: 11px renderizados em qualquer lugar, cromo
     incluído. No desktop são 14px CSS (× zoom .8 = 11,2px). */
  --t-min: 11px;
  /* Tracking dos micro-rótulos: .16em no micro-rótulo de página,
     .14em nos rótulos de cartão. Nenhum outro valor. */
  --ls-kicker: .16em;
  --ls-micro:  .14em;
  /* Título de página: duas linhas apertadas, a mesma em toda aba. */
  --lh-title: 1.02;
  --ls-title: -.035em;

  /* Escala por CONTAINER (`pg`): o sufixo é o degrau
     (s < 700px, m ≥ 700px, l ≥ 1400px de container). O valor já
     resolvido (--t-page, --t-card, --t-lead) é escolhido pelo
     pages.css dentro de cada container; aqui fica o degrau s,
     que vale fora de qualquer container. */
  --t-page-s: clamp(30px, 9cqi, 38px);
  --t-page-m: clamp(44px, 5.2cqi, 64px);
  --t-page-l: clamp(64px, 4.2cqi, 88px);
  --t-card-s: 22px;
  --t-card-m: 26px;
  --t-card-l: 30px;
  --t-card-sub: 22px;   /* a frase forte do cartão ('wdth' 100/700) */
  --t-lead-s: 15px;
  --t-lead-m: 17px;
  --t-lead-l: 19px;
  --t-page: var(--t-page-s);
  --t-card: var(--t-card-s);
  --t-lead: var(--t-lead-s);

  /* Ritmo vertical (mesmos degraus s/m/l): entre cabeçalho+palco e
     a faixa de cartões e entre seções; entre cartões; dentro do
     cartão. */
  --gap-section-s: 32px;
  --gap-section-m: 48px;
  --gap-section-l: 64px;
  --gap-grid-s: 12px;
  --gap-grid-m: 16px;
  --gap-grid-l: 20px;
  --pad-card-s: 16px;
  --pad-card-m: 20px;
  --pad-card-l: 24px;
  --gap-section: var(--gap-section-s);
  --gap-grid: var(--gap-grid-s);
  --pad-card: var(--pad-card-s);

  /* ---------- MOLDURA E NAVEGAÇÃO --------------------------
     --frame: a largura máxima (CSS) de todo .panel-inner e do
     .ap-wrap, em qualquer tela — trocar de aba não desloca nada.
     --w-nav: cápsula, barra de baixo, barra de recursos e rodapé
     com a mesma largura no desktop.
     --pg-top: a distância fixa do topo do painel ao micro-rótulo.
     Nenhum painel é centrado na vertical. */
  --frame: 1720px;
  --w-nav: 900px;
  --gutter: 16px;
  --pg-top: 16px;

  /* ZOOM: o desktop (≥861px) é servido a 80% — pedido do dono,
     vale em TODA tela grande. `html { zoom: var(--zoom) }` mora no
     refine.css. Media query continua em px do dispositivo.
     --fold é a altura da janela em px CSS de layout: use no lugar
     de "125svh" (que só acerta com o zoom .8). */
  --zoom: 1;
  --fold: calc(100svh / var(--zoom));

  /* ---------- RAIOS ----------------------------------------
     Todo cartão 22; poço e miniatura 18 (raio interno = externo
     menos o respiro); todo botão retangular 14 — botão de ação não
     é pílula; a etiqueta branca 3. Pílula (999) só em chip de
     status e na cápsula de modelos do desktop. No celular a
     navegação (cápsula, utilitários, pílulas de baixo) usa 18. */
  --r-card: 22px;
  --r-well: 18px;
  --r-btn:  14px;
  --r-tag:  3px;
  --r-nav:  18px;
  --r-pill: 999px;

  /* ---------- BOTÕES EM DUAS ALTURAS -----------------------
     Primário (.pg-cta, .ap-cta, .shop-cta) e secundário
     (.pg-ghost, .ap-help-btn, .ap-link-btn, .dl-card__go). No
     desktop os valores CSS já contam o zoom: 64 e 56 CSS dão 51
     e 44,8 na tela — o alvo mínimo de 44 continua de pé. */
  --btn-h:    52px;
  --btn-fs:   16px;
  --btn2-h:   48px;
  --btn2-fs:  15px;
  --btn-px:   24px;

  /* ---------- MOVIMENTO ------------------------------------
     Uma curva só. Tudo o que anima é transform ou opacity, e a
     regra global de reduced-motion para tudo. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-slide: 0.44s;
  --dur-fade:  0.20s;


  /* ---------- LEGADO ---------------------------------------
     Nomes que o style.css e o refine.css ainda leem. Continuam
     definidos, apontando para o palco escuro; código novo usa os
     nomes de cima. */
  --paper:   var(--bg);
  --paper-2: var(--bg-2);
  --hairline:        var(--line);
  --hairline-strong: var(--line-2);
  --graphite:      #121820;
  --graphite-lift: #19212c;
  --on-graphite:     var(--ink);
  --on-graphite-dim: #9a9aa2;
  --edge-control:    #8e8e97;
  --contact: #0009;           /* sombra de contato sob a foto */
  --sweep:   var(--bg-2);     /* o ciclorama antigo (.app::before, desligado) */
  /* Azuis de link e do LED antigo do seletor (hoje apagado). */
  --blue:     #4289ff;
  --blue-ink: #91bcff;
  --blue-lit: #99c4ff;
  --led-core: 0 0 12px 0 rgba(61, 139, 255, 0.90);
  --led-halo: 0 0 34px 4px rgba(61, 139, 255, 0.45);
  --r-media: 14px;
  --r-chip:  6px;

  --fs-label: .75rem;
  --ls-label: 0.18em;
  --fs-tab: clamp(15px, 2.05vw, 31px);
  --ls-tab: 0.005em;
  --fs-h1: clamp(34px, 4.8vw, 66px);
  --ls-h1: -0.032em;
  --lh-h1: 0.90;
  --fs-h2: clamp(28px, 3.4vw, 46px);
  --ls-h2: -0.025em;
  --lh-h2: 0.96;
  --fs-lead: clamp(15px, 1.15vw, 18px);
  --lh-lead: 1.55;
  --fs-body: 1rem;
  --lh-body: 1.6;

  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-28: 112px;
  --maxw-page:  1360px;
  --maxw-fold:  1080px;
  --maxw-prose: 60ch;
  --sp-section: clamp(72px, 8vw, 128px);
}


/* ---------- faixas -------------------------------------------
   Os degraus que dependem da JANELA (não do container). */
@media (min-width: 601px) {
  html:root {
    --gutter: clamp(20px, 4.5vw, 64px);
    --pg-top: 28px;
  }
}
@media (min-width: 861px) {
  html:root {
    --zoom: .8;
    --pg-top: 48px;
    --t-min: 14px;
    --focus-w: 3.75px;
    --btn-h: 64px;
    --btn-fs: 18px;
    --btn2-h: 56px;
    --btn2-fs: 17px;
  }
}
@media (max-width: 860px) {
  html:root { --sp-section: clamp(56px, 9vw, 80px); }
}
/* Notebook baixo (legado do style.css): quem falta é altura. */
@media (max-height: 880px) and (min-width: 861px) {
  html:root {
    --fs-h1: clamp(30px, 3.6vw, 46px);
    --fs-tab: clamp(15px, 1.7vw, 25px);
  }
}