/* ==========================================================================
   Tokens — contrato do design system Hourglass.
   Muda pouco. Componentes só consomem estas variáveis, nunca cor literal.
   ========================================================================== */

/* --- Tokens: cor -------------------------------------------------------- */
:root {
  /* Base da marca */
  --hg-laranja: #f2830a; /* sinal, ação, destaque */
  --hg-azul: #2f6bff; /* processo, dado, método */
  --hg-grafite: #0a0c0f; /* base institucional (escura) */
  --hg-areia: #efe8dc; /* base clara — substitui o branco puro */
  --hg-azulclaro: #dce8ff;
  --hg-petroleo: #12363a;
  --hg-cinza: #8b8f98;

  /* Texto sobre grafite */
  --hg-on-grafite-1: #efe8dc;
  --hg-on-grafite-2: #c9ccd2;
  --hg-on-grafite-3: #8b8f98;

  /* Estado */
  --hg-erro: #d93025;

  /* Tipo de documento (badge do card). Tons claros: sobre o card escuro, os
     tons cheios da marca não alcançam 4,5:1 no texto de 11px do badge. */
  --tipo-planilha: #3fb950;
  --tipo-pdf: #f87171;
  --tipo-doc: #7aa2ff;

  /* Aliases semânticos */
  --surface-card-dark: #14171c;
  --surface-card-dark-hover: #191d24;
  --surface-card-light: #f6f1e8;

  --text-primary: var(--hg-on-grafite-1);
  --text-secondary: var(--hg-on-grafite-2);
  --text-tertiary: var(--hg-on-grafite-3);

  --border-on-dark: rgba(239, 232, 220, 0.14);
  --border-on-light: rgba(10, 12, 15, 0.12);
  --border-strong: rgba(239, 232, 220, 0.28);

  --focus-ring: var(--hg-azul);
}

/* --- Tokens: tipografia ------------------------------------------------- */
:root {
  --font-sans: "Helvetica Neue", Helvetica, Arimo, Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --lh-title: 1.06;
  --lh-body: 1.5;
}

/* --- Tokens: espaço, raio e movimento ----------------------------------- */
:root {
  --radius-card: 16px;
  --radius-pill: 999px;

  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;

  --page-inline: clamp(24px, 5vw, 64px);
}

/* --- Gradiente de marca ("horizonte de luz") ---------------------------- */
/* Só em capa, hero de site e estados vazios de primeira visita.
   Nunca atrás de texto corrido nem em faixas pequenas. */
:root {
  --brand-gradient-base: #05070b;
  --brand-gradient-image: radial-gradient(
      75% 58% at 70% -18%,
      rgba(242, 131, 10, 0.85),
      transparent 55%
    ),
    radial-gradient(95% 70% at 44% -26%, #fff, #dce8ff 26%, #2f6bff 52%, transparent 74%),
    radial-gradient(150% 115% at 50% -42%, #2f6bff 28%, transparent 80%);
}

.hg-brand-gradient {
  background: var(--brand-gradient-base);
  background-image: var(--brand-gradient-image);
}