/*
 * Tokens do design system da Arkens (A5, A9, A10). Tema escuro, base "Trilho".
 * Os produtos importam este arquivo inteiro e aplicam os tokens nos componentes; cada produto pode
 * trocar a cor de destaque (--accent e companhia) e a densidade, e o tema padrão quando o claro
 * existir (A5, A15). O contraste de cada par está medido em design-system/DESIGN.md.
 */
:root {
  color-scheme: dark;

  /* Superfícies: quase preto embaixo, cartão um passo acima, mais um passo para o que flutua. */
  --bg: #0E0F11;
  --surface: #141517;
  --surface-2: #1D1F24;
  --surface-3: #262930;

  /* Linhas: 1 px, nunca sombra. A borda a 8% fica abaixo de 3:1 por escolha (exceção declarada). */
  --line: #1F2126;
  --line-2: #262930;
  --line-3: #2A2D35;
  --line-4: #3A3D45;

  /* Texto: três forças que se leem e uma só para placeholder e elemento desligado. */
  --text: #ECEDEF;
  --text-2: #9A9DA6;
  --text-3: #8A8E97;
  --text-4: #6B6F78;

  /* Destaque: uma cor só, em uma peça por tela. O produto pode trocar (A5). */
  --accent: #C9F25A;
  --on-accent: #0E0F11;
  --accent-soft: rgba(201, 242, 90, 0.14);
  --accent-line: rgba(201, 242, 90, 0.35);
  --accent-glow: rgba(201, 242, 90, 0.07);

  /* Sinais: sempre com texto ou ícone junto; nunca só a cor. */
  --ok: #5BD38B;
  --ok-soft: rgba(91, 211, 139, 0.14);
  --warn: #E6B450;
  --warn-soft: rgba(230, 180, 80, 0.16);
  --bad: #F58C83;
  --bad-strong: #F0665B;
  --bad-soft: rgba(240, 102, 91, 0.16);
  --neutral-pill: #C3C6CE;
  --neutral-soft: rgba(154, 157, 166, 0.14);

  /* Cores de tipo de objeto (t1 a t6): no ícone do tipo, no cabeçalho de coluna e no marcador de relação; nunca em texto corrido, nunca no destaque. */
  --t1: #3FB8A8;
  --t2: #D9A441;
  --t3: #9A8CF2;
  --t4: #5FA8F0;
  --t5: #E07BA6;
  --t6: #5BD38B;
  --t-alpha: 0.18;

  /* Véu atrás de gaveta e janela. */
  --overlay: rgba(8, 9, 10, 0.45);

  /* Tipografia. */
  --font-text: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --size-page: 22px;      /* título de página, peso 700, -0.01em */
  --size-section: 16px;   /* título de seção, 700 */
  --size-card: 14px;      /* título de cartão, 600 */
  --size-body: 13px;      /* texto, 400 e 600 para ênfase */
  --size-small: 12px;     /* apoio, rótulo de campo (600), cabeçalho de tabela (500) */
  --size-caption: 11px;   /* pílula (600), contador em mono, micro rótulo */
  --size-number: 26px;    /* número grande, 700, -0.02em, tabular */
  --line-body: 18px;
  --line-small: 16px;

  /* Grade, cantos, medidas. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-pill: 4px;      /* pílula de status e contador */
  --radius-control: 6px;   /* botão, campo, chip, menu item */
  --radius-tile: 8px;      /* azulejo de ícone, item do trilho, cartão pequeno */
  --radius-card: 10px;     /* cartão, painel, gaveta */
  --radius-dialog: 12px;   /* janela */
  --h-header: 52px;
  --w-rail: 56px;
  --w-settings-nav: 232px;
  --w-drawer: 520px;
  --h-control: 32px;       /* botão e campo padrão */
  --h-control-sm: 28px;
  --h-control-lg: 40px;    /* só na tela de entrar */
  --h-row: 42px;           /* linha de tabela */
  --h-nav-item: 30px;

  /* Sombra: só no que flutua (gaveta, menu, janela). */
  --shadow-float: -24px 0 48px -12px rgba(0, 0, 0, 0.6);
  --shadow-menu: 0 12px 32px -12px rgba(0, 0, 0, 0.6);

  /* Movimento: curto e sem exagero; tudo desliga com prefers-reduced-motion. */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-panel: 220ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-panel: 0ms;
  }
}