/* Tokens compartilhados pelo site inteiro. Cor e espaço entram SÓ por custom property.
   Rampa neutra fria de 10 passos (--n0..--n9): o @media (prefers-color-scheme: dark) redefine os dez.
   Sem light-dark(): sem suporte, a property fica inválida e a página abre sem cor.
   Fonte: Bricolage Grotesque (Mathieu Triay, SIL OFL 1.1; texto da licença em assets/fonts/OFL.txt),
   subset latin, wght 400-700, wdth 80-100, servida daqui. */

@font-face{
  font-family:'Bricolage Grotesque';
  src:url(/assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');
  font-weight:400 700; font-stretch:80% 100%; font-style:normal; font-display:swap;
}
/* reserva com métrica ajustada: a troca para a Bricolage quase não desloca o layout */
@font-face{
  font-family:'Bricolage Fallback';
  src:local('Arial'),local('Helvetica Neue'),local('Helvetica');
  size-adjust:96%; ascent-override:93%; descent-override:24%; line-gap-override:0%;
}

:root{
  color-scheme:light dark;

  /* rampa */
  --n0:#FFFFFF; --n1:#F0F3F5; --n2:#E4E9ED; --n3:#D0D8DF; --n4:#B1BCC7;
  --n5:#8493A3; --n6:#566474; --n7:#384454; --n8:#1A2433; --n9:#0A111B;

  /* semânticos */
  --paper:var(--n1); --surface:var(--n0);
  --fg:var(--n9); --fg-2:var(--n7); --fg-3:var(--n6);
  --line:var(--n6);                       /* borda de controle: 3:1 contra a superfície E contra o preenchimento do campo */
  --hair:color-mix(in srgb,var(--n9) 14%,transparent);
  --link:#1C3FB7;                         /* azul do logo: só link, foco e estado atual */
  --err:#B3261E;
  --ink-bg:#0A111B; --ink-fg:#F0F3F5; --ink-fg-2:#B5C0CB;   /* rodapé: tinta sólida nos dois modos */
  --ink-focus:#8FADFF; --ink-line:rgba(255,255,255,.14);

  /* objetos dentro dos painéis de produto (molduras de janela e de aparelho) */
  --obj-bg:#0B1222; --obj-line:rgba(255,255,255,.2); --pane-edge:rgba(255,255,255,.1);
  --win-bg:#F6F6F2; --win-bar:#E8E8E3; --win-dot:#B9B9B2; --win-edge:rgba(255,255,255,.16);
  --on-pane-btn:#030712;
  --shadow-menu:0 18px 40px rgba(0,0,0,.18);

  /* produtos: cores amostradas das capturas reais; só existem dentro do painel de cada produto */
  --tpg-bg:#030712; --tpg-ac:#A3E635;
  --gq-bg:#0F1237;  --gq-ac:#9DB8FF;
  --bfl-bg:#0B3B25; --bfl-ac:#3DD16F;
  --pane-fg:#FFFFFF; --pane-fg-2:#C9D2DD;

  /* forma */
  --r-pane:22px; --r-ctl:12px;

  /* espaço: escala de 4 px */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px; --space-32:128px;
  --pad:clamp(20px,4vw,56px);
  --section:clamp(64px,9vw,128px);

  /* tipo */
  --font:'Bricolage Grotesque','Bricolage Fallback',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --fs-h1:clamp(2.3rem,4.5vw,4.15rem);
  --fs-h2:clamp(1.9rem,3.4vw,3rem);
  --fs-prod:clamp(1.7rem,2.5vw,2.3rem);
  --fs-body:1.0625rem;
  --fs-sm:.95rem;
  --fs-xs:.88rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --n0:#101926; --n1:#0A111B; --n2:#1B2431; --n3:#2A3544; --n4:#3E4B5B;
    --n5:#697788; --n6:#8E9CAB; --n7:#B5C0CB; --n8:#D9E0E6; --n9:#F0F3F5;
    --hair:color-mix(in srgb,var(--n9) 16%,transparent);
    --link:#8FADFF;
    --line:var(--n5);
    --err:#FF9A90;
    --ink-bg:#101926;
  }
}

/* foco visível, 3 px, em todo controle */
:focus-visible{outline:3px solid var(--link);outline-offset:3px;border-radius:6px}
::selection{background:var(--link);color:var(--paper)}