/* ============================================================
   OPEN SOURCE — Design Tokens (CSS Custom Properties)

   Dark only. Não existe tema claro aqui: o `:root` já é o escuro e não há
   bloco [data-theme]. Antes o claro morava no `:root` e o escuro sobrescrevia
   só parte dos tokens, então qualquer componente que usasse um token bruto
   (--plate, --gold, --stone-*) continuava com cor de tema claro no escuro.
   Era essa a causa dos painéis de benchmark claros no Argus.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---- Paleta bruta ----
     Só matéria-prima. Componente novo usa os semânticos abaixo, nunca estes. */
  --aegean-900: #061318;
  --aegean-800: #08191f;
  --aegean-700: #0c232c;
  --aegean-600: #10303a;
  --aegean-500: #143a46;
  --aegean-400: #1e4856;
  --aegean-300: #2a5a6b;
  --gold-400: #d9bc76;
  --gold-500: #c7a45b;
  --gold-600: #a9884a;
  --gold-700: #6f551f;
  --parchment-100: #eee6d4;
  --parchment-300: #b9c4c5;
  /* Era #7e9097, que dava 4.2:1 sobre --surface e 3.67:1 sobre --surface-2:
     abaixo do mínimo AA nos rótulos pequenos que usam --text-faint. Agora
     4.91:1 no pior fundo da paleta. */
  --parchment-500: #98a7ad;

  /* ---- Superfícies ---- */
  --page: var(--aegean-700);
  --surface: var(--aegean-600);
  --surface-2: var(--aegean-500);
  --deep: var(--aegean-800);
  --deep-2: var(--aegean-900);

  /* Placa impressa: o suporte das gravuras de Talos e Argus. Clara por
     natureza, e continua clara no dark de propósito. As gravuras usam
     mix-blend-mode: multiply, que precisa de fundo claro para funcionar, e o
     papel envelhecido é parte da identidade. Texto sobre ela usa --plate-text. */
  --plate: #ebe3d2;
  --plate-edge: #d8cbae;
  --plate-text: #1c1a14;
  --plate-text-soft: #433e33;
  --plate-text-faint: #5b5236;
  --plate-accent: var(--gold-700);
  /* Superfícies de dentro da placa: um e dois degraus abaixo do creme, para
     hover e estado ativo terem onde acontecer sem sair do claro. */
  --plate-surface: #e3dac6;
  --plate-surface-2: #d9ceb4;

  /* Painel de dados: benchmark, bloco de código, quadro informativo. Este é
     o que não pode ser claro no dark, e era ele que vinha claro porque dividia
     o token --plate com a placa das gravuras. */
  --panel: var(--aegean-500);
  --panel-edge: var(--aegean-300);

  /* ---- Bordas ---- */
  --border: var(--aegean-400);
  --border-strong: var(--aegean-300);

  /* ---- Texto ---- */
  --text: var(--parchment-100);
  --text-soft: var(--parchment-300);
  --text-faint: var(--parchment-500);
  --text-on-accent: var(--aegean-900);

  /* ---- Marca ---- */
  --accent: var(--gold-500);
  --accent-strong: var(--gold-400);
  --accent-deep: var(--gold-600);
  --gold: var(--accent);

  /* ==================== Espaçamento ====================
     Escala única. Antes cada componente inventava o próprio número: eram 137
     declarações de padding com 68 valores distintos, e o clamp do gutter
     aparecia copiado à mão em 20 arquivos. Custom property atravessa o shadow
     boundary, então o componente herda daqui sem precisar reimportar nada. */
  --space-3xs: 4px;
  --space-2xs: 6px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Ritmo vertical das seções, em um lugar só. */
  --section-y: clamp(48px, 7vw, 72px);
  --hero-y-top: clamp(32px, 5vw, 72px);
  --hero-y-bottom: clamp(24px, 4vw, 48px);
  --sec-head-gap: clamp(20px, 3.5vw, 40px);

  /* Paddings recorrentes, por papel do elemento e não por medida. */
  --pad-chip: var(--space-3xs) var(--space-sm);
  --pad-control: var(--space-sm) var(--space-md);
  --pad-card: clamp(14px, 2vw, 20px);
  --pad-panel: clamp(16px, 2.2vw, 26px);

  /* ==================== Tipografia ====================
     Mesma história do espaçamento: os mesmos clamps apareciam copiados dezenas
     de vezes, com deriva entre eles (14/1.6vw/16 e 14/1.6vw/16.5 lado a lado). */
  --text-2xs: clamp(9px, 1.1vw, 11px);
  --text-xs: clamp(10px, 1.2vw, 12px);
  --text-sm: clamp(11px, 1.3vw, 13px);
  --text-md: clamp(12px, 1.4vw, 14px);
  --text-base: clamp(14px, 1.6vw, 16px);
  --text-lg: clamp(16px, 2vw, 22px);
  --text-title: clamp(28px, 4.5vw, 52px);
  --text-display: clamp(28px, 5vw, 58px);

  /* ---- Layout ---- */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 72px);
  --frieze: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 22'%3E%3Cpath d='M0 20 H28 M4 20 V4 H24 V16 H10 V10 H18 V14' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}