/* Tokens de design do Garimpo.
   =============================

   De onde vem cada número: o bloco :root abaixo é o Quick Start da referência
   `Linear — escuro, instrumento` do acervo da casa
   (~/cerebro/agentes/design/referencias/linear--escuro-instrumento.md),
   copiado INTEIRO. O Linear foi escolhido porque é painel escuro de operação
   densa, com fila, estado e "trabalhando" — que é literalmente este produto.

   O que mudou em relação à referência, e nada além disso:
   o acento `--color-acid-lime` (o limão ácido) saiu e o dourado da marca entrou.

   Regras que não se negociam neste arquivo:
   - Este é o ÚNICO lugar do projeto onde pode aparecer uma cor literal. Um
     teste varre estatico/, painel/, site/ e ferramentas/ e falha se achar hex,
     rgb() ou hsl() em qualquer outro arquivo.
   - Mexer num valor copiado da referência faz o teste `teste/pele.test.mjs`
     falhar, de propósito: trocar um cinza "que ficou melhor" é perder a origem
     medida do sistema. Para mudar, mude a referência escolhida e refaça a
     etapa visual.
   - A escala de peso para em 590. Não existe 700 aqui.
   - Três raios são o vocabulário todo: 12px cartão, 6px botão/campo, 9999px
     pílula (mais 8px no item de nav e 9px na linha de item, medidos no mock do
     produto).
   - Profundidade vem de borda fina e de troca de superfície
     (#08090a -> #0f1011 -> #161718 -> #23252a), não de sombra embaixo de tudo.

   O bloco `@media (prefers-reduced-motion: reduce)` NÃO fica aqui: ele vive em
   `base.css`, junto das classes que ele desliga. Bloco de movimento reduzido
   longe do seletor que ele apaga é bloco que não apaga nada. */

:root {
  /* Colors */
  --color-void: #08090a;
  --color-carbon: #0f1011;
  --color-obsidian: #161718;
  --color-graphite: #23252a;
  --color-smoke: #383b3f;
  --color-ash: #62666d;
  --color-fog: #8a8f98;
  --color-mist: #d0d6e0;
  --color-bone: #e5e5e6;
  --color-paper: #ffffff;
  /* O acento da marca: ouro de bateia. Entrou NO LUGAR do limão ácido do
     Linear, cujo token e cujo hex saíram deste arquivo. Regra de uso: UMA vez
     por tela — o indicador de coleta ao vivo, ou o cartão do plano ativo. Nunca em fundo de seção,
     nunca em borda de todos os cartões, nunca em série de gráfico.
     Contraste medido (WCAG 2.1, script do COMO-USAR): 10.42:1 contra a tela
     --color-void e 10.42:1 com o breu por cima, então passa como texto nos
     dois sentidos. Número e conta estão em docs/PLANO-VISUAL.md. */
  --color-garimpo-ouro: #e8b422;
  /* O ocre da bateia: o fundo do ouro, para o degradê da atmosfera e da barra
     não ser uma cor chapada só. */
  --color-garimpo-ocre: #b8701a;
  --color-garimpo-ouro-hover: color-mix(in oklab, var(--color-garimpo-ouro) 88%, white);
  --color-garimpo-ouro-veu: color-mix(in oklab, var(--color-garimpo-ouro) 12%, transparent);
  --color-pulse-green: #27a644;
  --color-coral-red: #eb5757;
  --color-signal-teal: #02b8cc;
  --color-iris-violet: #6366f1;
  --color-lavender: #8b5cf6;
  --color-delta-red: #f34e52;
  --color-series-teal: #00b8cc;
  --color-series-amber: #f0bf00;
  --color-series-indigo: #5e6ad2;
  --color-bar-gray: #9c9da1;
  --color-sidebar-edge: #24282c;
  --color-veil-2: rgba(255, 255, 255, 0.02);
  --color-veil-5: rgba(255, 255, 255, 0.05);
  --color-veil-8: rgba(255, 255, 255, 0.08);
  --color-veil-3: rgba(255, 255, 255, 0.03);
  --color-veil-4: rgba(255, 255, 255, 0.04);
  --color-hover-text: #f7f8f8;
  --color-accent: #7170ff;
  --color-accent-hover: #828fff;
  --color-overlay: rgba(0, 0, 0, 0.85);

  /* Typography — Font Families (substituto livre primeiro; a original é proprietária) */
  --font-inter-variable: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* original: Inter Variable */
  --font-berkeley-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; /* original: Berkeley Mono */
  --font-features: "cv01" on, "ss03" on, "zero" on; /* body { font-feature-settings: var(--font-features) } */

  /* Typography — tamanhos de painel (ver Escala de painel) */
  --text-10: 10px;
  --text-11: 11px;
  --text-12: 12px;
  --text-14: 14px;
  --tracking-ui: -0.13px;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.2;
  --tracking-caption: 0;
  --text-body-sm: 15px;
  --leading-body-sm: 1.6;
  --tracking-body-sm: -0.165px;
  --text-body-lg: 20px;
  --leading-body-lg: 1.33;
  --tracking-body-lg: -0.24px;
  --text-subheading: 24px;
  --leading-subheading: 1.33;
  --tracking-subheading: -0.288px;
  --text-heading-sm: 32px;
  --leading-heading-sm: 1.13;
  --tracking-heading-sm: -0.704px;
  --text-heading: 48px;
  --leading-heading: 1;
  --tracking-heading: -1.056px;
  --text-heading-lg: 64px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -1.408px;
  --text-display: 72px;
  --leading-display: 1;
  --tracking-display: -1.584px;

  /* Typography — Weights */
  --font-weight-400: 400;
  --font-weight-510: 510;
  --font-weight-590: 590;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-1: 1px;
  --spacing-2: 2px;
  --spacing-3: 3px;
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-11: 11px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-19: 19px;
  --spacing-20: 20px;
  --spacing-22: 22px;
  --spacing-24: 24px;
  --spacing-26: 26px;
  --spacing-28: 28px;
  --spacing-31: 31px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-96: 96px;
  --spacing-128: 128px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 96px;
  --card-padding: 24px;
  --element-gap: 8px;

  /* Border Radius */
  --radius-2: 2px;
  --radius-9999: 9999px;
  --radius-6: 6px;
  --radius-12: 12px;
  --radius-22: 22px;
  --radius-16: 16px;
  --radius-400: 400px;

  /* Named Radii */
  --radius-cards: 12px;
  --radius-pills: 9999px;
  --radius-small: 2px;
  --radius-badges: 4px;
  --radius-inputs: 6px;
  --radius-buttons: 6px;
  --radius-8: 8px;   /* item de nav lateral, foco de linha */
  --radius-9: 9px;   /* linha/cartão de issue */

  /* Focus (CSS do site) */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: #5e6ad2;

  /* Shadows */
  --shadow-card: rgba(0, 0, 0, 0.4) 0px 2px 4px 0px;
  --shadow-inset-soft: rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset;
  --shadow-hairline-inset: rgb(35, 37, 42) 0px 0px 0px 1px inset;
  --shadow-ring: rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
  --shadow-cta-stack: rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px;
  --shadow-float: rgba(8, 9, 10, 0.6) 0px 4px 32px 0px;
  /* [MEDIDO] Raycast (acervo: raycast--escuro-neon-coral.md, --shadow-key).
     Filete branco 5% no topo, anel externo branco 25% de 1px e sombra interna
     preta embaixo: o cartão parece uma TECLA afundada, não papel flutuando.
     É o que dava profundidade à landing e faltava. */
  --shadow-key: rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset,
                rgba(255, 255, 255, 0.14) 0px 0px 0px 1px,
                rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset;
  --shadow-button-raised: rgba(255, 255, 255, 0.03) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.6) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 4px 0px;
  --shadow-ring-2: rgba(0, 0, 0, 0.1) 0px 0px 0px 2px;

  /* Surfaces */
  --surface-void: #08090a;
  --surface-carbon: #0f1011;
  --surface-obsidian: #161718;
  --surface-slate: #23252a;

  /* Layout de painel */
  --sidebar-width: 232px;   /* [MEDIDO] mock do produto */

  /* Motion (ver ## Movimento) */
  --dur-hover: 100ms;
  --dur-control: 160ms;
  --dur-overlay: 175ms;     /* [MEDIDO] fade do fundo escurecido */
  --dur-menu: 180ms;        /* [MEDIDO] menu do celular; deslize da gaveta lateral [INFERIDO] igual */
  --dur-message: 300ms;
  --dur-dot-in: 420ms;
  --dur-scene: 1500ms;
  --delay-scene: 1300ms;
  --stagger-dot: 2ms;       /* por ponto em 164; o total medido é ~326ms — divida pelo nº de itens */
  --ease-control: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-scene: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-link: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Movimento NOSSO (e22). Cada um tem papel declarado e faixa conferida em
     `teste/movimento-tokens.test.mjs`: token de tempo novo sem papel faz o
     teste falhar, para a régua não ser contornada por quem inventa um
     `--dur-qualquercoisa`. */
  /* A moldura do hero entrava 1,3s depois de a página abrir, usando o atraso de
     CENA da referência — e quem abria via 1,3s de buraco preto. Cartão não é
     cena: entra como interface. (07/10) */
  --delay-moldura: 150ms;
  /* A atmosfera do hero: essa SIM é cena, e o atraso dela é um degrau. */
  --dur-aurora: 1200ms;
  --delay-aurora: 80ms;
  --dur-moldura: 500ms;     /* [MEDIDO] moldura do screenshot acendendo */
  --dur-contador: 720ms;    /* o número subindo; 600–900ms é a faixa da régua */
  --dur-pulso: 1600ms;      /* [MEDIDO] a coreografia mais curta do "carregando" */
  --dur-varredura: 2000ms;  /* [MEDIDO] o selo "Working…" varrendo */
  --dur-reduzido: 200ms;    /* o TETO do modo reduzido: só opacidade, e curta */
  --stagger-cena: 300ms;    /* o TOTAL da cascata (~326ms medidos, redondo) */
  --passo-minimo: 20ms;     /* a faixa do degrau por item: menos não se vê... */
  --passo-maximo: 100ms;    /* ...e mais vira fila de espera */
  --ease-linear: linear;    /* [MEDIDO] varredura; curva constante é intencional */
}