/* ============================================================
   @databolsa/theme — TOKENS
   Variáveis cruas (:root + .dark), camada semântica shadcn/ui e o
   @theme inline do Tailwind v4. Importar DEPOIS de `@import "tailwindcss"`.
   FONTE ÚNICA — editar uma cor/raio aqui propaga a todos os apps.
   ============================================================ */

:root {
  /* superfícies e tinta */
  --paper: #fafaf8;
  --board: #f4f3f1;
  --card-bg: #ffffff;
  --ink: #1a1a1c;
  --ink-soft: #54545a;
  --ink-faint: #9a9aa0;
  --line: #e7e5e2;
  --line-strong: #1a1a1c;
  --fill: #f0efec;
  /* superfície invertida FIXA (faixas escuras do site): escura nos dois temas,
     texto branco hard-coded em cima dela é seguro */
  --inverse: #1a1a1c;

  /* acento de marca (verde-mercado, cirúrgico) */
  --accent: #0e7a4e;
  --accent-soft: #e9f4ee;
  --accent-ink: #fafaf8;

  /* semântica de preço — uso exclusivo em variações */
  --alta: #0e7a4e;
  --alta-soft: #e9f4ee;
  --baixa: #c0392b;
  --baixa-soft: #f9edeb;

  --warn: #a3611f;
  --warn-soft: #f6efe2;

  /* classes de ativo (carteira) — palette CATEGÓRICA fixa, cor segue a CLASSE (nunca o
     ranking). Ordem de exibição: ação, FII, BDR, tesouro, renda fixa, cripto, outros.
     Validada (dataviz: banda L, chroma, CVD adjacente, contraste) nos dois temas;
     "outros" é o neutro de fold-in (sempre com rótulo direto). */
  --class-acao: #0e7a4e;
  --class-fii: #3a66b0;
  --class-bdr: #96581a;
  --class-tesouro: #6b3d94;
  --class-rf: #0e7fa3;
  --class-cripto: #b0447e;
  --class-outros: #71717a;

  /* estrutura Strata */
  --r-ctl: 0px;
  --r-card: 0px;
  --r-chip: 0px;
  --bw: 1px;
  --shadow-card: 0 1px 2px rgba(20, 20, 22, 0.03), 0 10px 28px -14px rgba(20, 20, 22, 0.09);
  --shadow-card-up: 0 2px 3px rgba(20, 20, 22, 0.04), 0 16px 36px -14px rgba(20, 20, 22, 0.14);
  --shadow-pop: 0 4px 10px -2px rgba(20, 20, 22, 0.08), 0 16px 32px -12px rgba(20, 20, 22, 0.14);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --page-pad: 56px;
  --section-gap: 40px;
}

.dark {
  color-scheme: dark;

  --paper: #0e0f11;
  --board: #15161a;
  --card-bg: #15161a;
  --ink: #f2f2ef;
  --ink-soft: #a8a8ad;
  --ink-faint: #6b6b70;
  --line: #26282c;
  --line-strong: #f2f2ef;
  --fill: #1c1d21;
  --inverse: #15161a;

  --accent: #2fbf7f;
  --accent-soft: rgba(47, 191, 127, 0.12);
  --accent-ink: #0e0f11;

  --alta: #2fbf7f;
  --alta-soft: rgba(47, 191, 127, 0.12);
  --baixa: #e5605a;
  --baixa-soft: rgba(229, 96, 90, 0.12);

  --warn: #d9963f;
  --warn-soft: rgba(217, 150, 63, 0.12);

  /* classes de ativo — passos próprios do tema escuro (validados contra #15161a) */
  --class-acao: #25a06b;
  --class-fii: #5c8ede;
  --class-bdr: #b0762e;
  --class-tesouro: #9a6cc9;
  --class-rf: #2f96b8;
  --class-cripto: #c75f95;
  --class-outros: #9a9aa0;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -14px rgba(0, 0, 0, 0.5);
  --shadow-card-up: 0 2px 3px rgba(0, 0, 0, 0.35), 0 16px 36px -14px rgba(0, 0, 0, 0.6);
  --shadow-pop: 0 4px 10px -2px rgba(0, 0, 0, 0.4), 0 16px 32px -12px rgba(0, 0, 0, 0.55);
}

/* ---------------------------------------------------------------------------
 * Camada semântica shadcn/ui — referencia as vars cruas acima, então .dark
 * flipa tudo automaticamente. --primary é TINTA (não verde): o acento é um
 * gesto manual, nunca o default dos componentes.
 * ------------------------------------------------------------------------- */

:root,
.dark {
  --radius: 0rem;

  --background: var(--paper);
  --foreground: var(--ink);
  --card: var(--card-bg);
  --card-foreground: var(--ink);
  --popover: var(--card-bg);
  --popover-foreground: var(--ink);
  --primary: var(--ink);
  --primary-foreground: var(--paper);
  --secondary: var(--fill);
  --secondary-foreground: var(--ink);
  --muted: var(--fill);
  --muted-foreground: var(--ink-soft);
  --accent-ui: var(--fill);
  --accent-ui-foreground: var(--ink);
  --destructive: var(--baixa);
  --destructive-foreground: #ffffff;
  --border: var(--line);
  --input: var(--line);
  --ring: var(--accent);

  --chart-1: var(--accent);
  --chart-2: var(--ink-soft);
  --chart-3: var(--warn);
  --chart-4: var(--ink-faint);
  --chart-5: var(--baixa);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent-ui);
  --color-accent-foreground: var(--accent-ui-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);

  /* tokens DataBolsa expostos como utilitários (bg-paper, text-ink-soft, …) */
  --color-paper: var(--paper);
  --color-board: var(--board);
  --color-ink: var(--ink);
  --color-ink-soft: var(--ink-soft);
  --color-ink-faint: var(--ink-faint);
  --color-line: var(--line);
  --color-line-strong: var(--line-strong);
  --color-fill: var(--fill);
  --color-inverse: var(--inverse);
  --color-verde: var(--accent);
  --color-verde-soft: var(--accent-soft);
  --color-verde-ink: var(--accent-ink);
  --color-alta: var(--alta);
  --color-alta-soft: var(--alta-soft);
  --color-baixa: var(--baixa);
  --color-baixa-soft: var(--baixa-soft);
  --color-warn: var(--warn);
  --color-warn-soft: var(--warn-soft);
  --color-class-acao: var(--class-acao);
  --color-class-fii: var(--class-fii);
  --color-class-bdr: var(--class-bdr);
  --color-class-tesouro: var(--class-tesouro);
  --color-class-rf: var(--class-rf);
  --color-class-cripto: var(--class-cripto);
  --color-class-outros: var(--class-outros);

  --font-display: var(--font-bricolage), system-ui, sans-serif;
  --font-body: var(--font-archivo), system-ui, sans-serif;
  --font-mono: var(--font-space-mono), monospace;
  --font-sans: var(--font-archivo), system-ui, sans-serif;

  --radius-sm: 0rem;
  --radius-md: 0rem;
  --radius-lg: 0rem;
  --radius-xl: 0rem;

  --ease-out-expo: var(--ease-out);
}