/* Tokens do Carga.
   Tres degraus, herdados do padrao de organizacao da casa:
   --carga-palette-*  o valor cru, que nenhuma peca le direto
   --carga-<cat>-<papel>  o nivel semantico, que e o que se usa
   --carga-<peca>-<parte>  o valor que so uma peca usa
   --carga-runtime-*  o que o JS escreve no elemento; nao e decisao de design.

   Claro por padrao: o trabalho e na rua, sob sol. O escuro e variante. */

:root {
  /* ---------------- palette ---------------- */
  --carga-palette-tinta-0: #ffffff;
  --carga-palette-tinta-5: #f4f5f7;
  --carga-palette-tinta-10: #e6e8ec;
  --carga-palette-tinta-20: #ccd1d9;
  --carga-palette-tinta-40: #98a1ae;
  --carga-palette-tinta-60: #5c6675;
  --carga-palette-tinta-80: #2b3340;
  --carga-palette-tinta-95: #14181f;
  --carga-palette-tinta-100: #0a0c10;

  --carga-palette-ambar-40: #b45309;
  --carga-palette-ambar-50: #d97706;
  --carga-palette-ambar-60: #f59e0b;
  --carga-palette-ambar-90: #fef3c7;

  --carga-palette-verde-50: #15803d;
  --carga-palette-verde-90: #dcfce7;
  --carga-palette-vermelho-50: #b91c1c;
  --carga-palette-vermelho-60: #dc2626;
  --carga-palette-vermelho-90: #fee2e2;
  --carga-palette-azul-50: #1d4ed8;
  --carga-palette-azul-90: #dbeafe;

  /* ---------------- superficie ---------------- */
  --carga-surface-page: var(--carga-palette-tinta-5);
  --carga-surface-raised: var(--carga-palette-tinta-0);
  --carga-surface-sunken: var(--carga-palette-tinta-10);
  --carga-surface-inverse: var(--carga-palette-tinta-95);

  /* ---------------- texto ---------------- */
  --carga-text-strong: var(--carga-palette-tinta-100);
  --carga-text-default: var(--carga-palette-tinta-80);
  --carga-text-muted: var(--carga-palette-tinta-60);
  --carga-text-faint: var(--carga-palette-tinta-40);
  --carga-text-oninverse: var(--carga-palette-tinta-0);
  --carga-text-onaccent: var(--carga-palette-tinta-100);

  /* ---------------- borda ---------------- */
  --carga-border-default: var(--carga-palette-tinta-20);
  --carga-border-strong: var(--carga-palette-tinta-40);
  --carga-border-faint: var(--carga-palette-tinta-10);

  /* ---------------- acento e sinais ---------------- */
  --carga-accent: var(--carga-palette-ambar-50);
  --carga-accent-strong: var(--carga-palette-ambar-40);
  --carga-accent-wash: var(--carga-palette-ambar-90);

  --carga-signal-good: var(--carga-palette-verde-50);
  --carga-signal-good-wash: var(--carga-palette-verde-90);
  --carga-signal-bad: var(--carga-palette-vermelho-50);
  --carga-signal-bad-wash: var(--carga-palette-vermelho-90);
  --carga-signal-info: var(--carga-palette-azul-50);
  --carga-signal-info-wash: var(--carga-palette-azul-90);

  /* ---------------- tipografia ---------------- */
  --carga-type-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --carga-type-family-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --carga-type-size-1: 0.6875rem; /* 11 */
  --carga-type-size-2: 0.75rem;   /* 12 */
  --carga-type-size-3: 0.875rem;  /* 14 */
  --carga-type-size-4: 1rem;      /* 16 - minimo de corpo, nao desce daqui */
  --carga-type-size-5: 1.125rem;  /* 18 */
  --carga-type-size-6: 1.375rem;  /* 22 */
  --carga-type-size-7: 1.75rem;   /* 28 */
  --carga-type-size-8: 2.25rem;   /* 36 */
  --carga-type-size-9: 3rem;      /* 48 - o numero do lucro */

  /* ---------------- espaco ---------------- */
  --carga-space-0: 4px;
  --carga-space-1: 8px;
  --carga-space-2: 12px;
  --carga-space-3: 16px;
  --carga-space-4: 20px;
  --carga-space-5: 24px;
  --carga-space-6: 32px;
  --carga-space-7: 40px;
  --carga-space-8: 56px;

  /* ---------------- raio ---------------- */
  --carga-radius-1: 8px;
  --carga-radius-2: 12px;
  --carga-radius-3: 16px;
  --carga-radius-4: 22px;
  --carga-radius-pill: 999px;

  /* ---------------- alvo de toque ---------------- */
  --carga-target-dense: 40px;
  --carga-target-default: 48px;
  --carga-target-large: 60px;
  --carga-target-huge: 76px;

  /* ---------------- movimento ---------------- */
  --carga-motion-toque: 90ms;
  --carga-motion-troca: 180ms;
  --carga-motion-entra: 260ms;
  --carga-motion-curva: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---------------- sombra ---------------- */
  --carga-shadow-raised: 0 1px 2px rgb(10 12 16 / 0.06), 0 2px 8px rgb(10 12 16 / 0.05);
  --carga-shadow-float: 0 6px 16px rgb(10 12 16 / 0.12), 0 2px 4px rgb(10 12 16 / 0.08);

  --carga-barra-altura: 68px;
  --carga-topo-altura: 56px;
}

:root[data-tema='escuro'] {
  --carga-surface-page: var(--carga-palette-tinta-100);
  --carga-surface-raised: var(--carga-palette-tinta-95);
  --carga-surface-sunken: #1c2129;
  --carga-surface-inverse: var(--carga-palette-tinta-0);

  --carga-text-strong: var(--carga-palette-tinta-0);
  --carga-text-default: #dde1e8;
  --carga-text-muted: #9aa3b0;
  --carga-text-faint: #6b7483;
  --carga-text-oninverse: var(--carga-palette-tinta-100);

  --carga-border-default: #2f3744;
  --carga-border-strong: #475062;
  --carga-border-faint: #1f252e;

  --carga-accent: var(--carga-palette-ambar-60);
  --carga-accent-strong: var(--carga-palette-ambar-50);
  --carga-accent-wash: #3b2a0c;

  --carga-signal-good: #4ade80;
  --carga-signal-good-wash: #0f2e1b;
  --carga-signal-bad: #f87171;
  --carga-signal-bad-wash: #3a1414;
  --carga-signal-info: #60a5fa;
  --carga-signal-info-wash: #10243f;

  --carga-shadow-raised: 0 1px 2px rgb(0 0 0 / 0.4);
  --carga-shadow-float: 0 8px 24px rgb(0 0 0 / 0.55);
}