/*
 * Tokens visuais do Hub Adamante.
 * Fonte: variáveis do arquivo design/pencil/hub-adamante.pen.
 * Hex literal só existe aqui e em design/pencil/ (padrões §8.3).
 *
 * CSS puro, válido no browser: o app importa este arquivo e o gateway o serve
 * em /static/tokens.css para a página de acesso.
 *
 * Duas partes:
 * 1. Valores do Pencil com os mesmos nomes das variáveis do .pen. No Tailwind,
 *    use por referência: bg-(--color-surface), text-(length:--text-fs-base).
 * 2. Papéis semânticos do Arc sobrescritos (foundation.css não é editado).
 */

:root {
  --font-sans: "Poppins", ui-sans-serif, system-ui, sans-serif;

  --color-bg: #f2f5f9;
  --color-surface: #ffffff;
  --color-surface-2: #f7f9fc;
  --color-border: #e0e6ef;
  --color-border-strong: #c3ccdb;

  --color-text-primary: #142239;
  --color-text-secondary: #5f6c82;
  --color-text-muted: #68748a;

  --color-brand: #142239;
  --color-brand-2: #0f598c;
  --color-brand-soft: #e3edf5;
  --color-on-brand: #eef3f9;
  --color-on-brand-muted: #8fa0ba;

  --color-accent: #b25017;
  --color-accent-soft: #fbebe0;

  --color-success: #1f7a55;
  --color-success-soft: #e1f0ea;
  --color-warning: #a76a10;
  --color-warning-soft: #faeedb;
  --color-danger: #b4322c;
  --color-danger-soft: #f9e6e5;
  --color-info: #0f598c;
  --color-info-soft: #e3edf5;

  --text-fs-mini: 10px;
  --text-fs-xs: 11px;
  --text-fs-sm: 12px;
  --text-fs-base: 13px;
  --text-fs-md: 14px;
  --text-fs-lg: 16px;
  --text-fs-xl: 20px;
  --text-fs-2xl: 26px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 20px;
  --space-9: 24px;
  --space-10: 32px;
  /* Margem do conteúdo das telas (frame "Body" do Pencil) */
  --page-padding: 26px;

  /*
   * Medidas de componente do Hub. Vêm dos frames do Pencil, que não têm variável própria para elas.
   * Breakpoints não são tokens porque custom properties não valem em @media; os limites usados são
   * 767px (mobile, shell inteiro) e 1100px (detalhe do Atendimento em coluna única), ver design/README.md.
   */
  --space-hairline: 2px;
  --tracking-caps: 0.08em;
  --leading-compact: 17px;
  --focus-outline-width: 2px;
  --focus-outline-offset: 2px;
  --size-dot: 7px;
  --size-avatar-xs: 20px;
  --size-step-mark: 28px;
  --size-icon-box: 32px;
  --size-avatar-lg: 44px;
  --size-qr: 200px;
  --width-label-sm: 96px;
  --width-label: 112px;
  --width-step-min: 104px;
  --width-filter-min: 170px;
  --width-kanban-column: 264px;
  --width-aside: 360px;

  --shadow-card: 0 1px 2px #14223914;
  --shadow-float: 0 8px 24px #14223914;
}

:root {
  /* Superfícies e texto */
  --background: var(--color-bg);
  --surface: var(--color-surface);
  --surface-raised: var(--color-surface);
  --surface-muted: var(--color-surface-2);
  --foreground: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);

  /* Linhas */
  --border: var(--color-border);
  --border-subtle: var(--color-border);
  --border-strong: var(--color-border-strong);

  /* Destaque: no Pencil, item ativo e ação primária usam a cor da marca */
  --accent: var(--color-brand);
  --accent-strong: var(--color-brand-2);
  --accent-subtle: var(--color-brand-soft);
  --accent-foreground: var(--color-on-brand);
  --control-on: var(--color-brand);

  /* Status */
  --success: var(--color-success);
  --warning: var(--color-warning);
  --danger: var(--color-danger);
  --info: var(--color-info);

  /* Tipografia: Poppins em tudo, escala do Pencil */
  --font-body: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --tracking-body: 0;
  --tracking-display: 0;
  --text-xs: var(--text-fs-xs);
  --text-sm: var(--text-fs-base);
  --text-base: var(--text-fs-md);
  --text-lg: var(--text-fs-lg);
  --text-xl: var(--text-fs-xl);
  --text-2xl: var(--text-fs-2xl);

  /* Raios do Pencil */
  --radius-control: var(--radius-sm);
  --radius-panel: var(--radius-md);
  --radius-surface: var(--radius-lg);
}