/* PalmLife: tokens da marca para todas as telas. Fonte: docs/marca/tokens.css.
   Carregar antes do CSS de cada página; as páginas não redefinem cores de tema. */

:root {
  /* tema escuro (padrão atual da Central) */
  color-scheme: dark;
  --bg: #070b16;
  --surface: #0f1626;
  --surface-2: #0a101d;
  --card-hover: #141d31;
  --border: #1e2a42;
  --border-strong: #34435f;
  --text: #f3f6fc;
  --text-secondary: #b7c1d6;
  --text-tertiary: #8592ac;
  --brand: #1f4fd8;           /* azul PalmLife puro: FUNDO de botão principal, barra do app, ícone */
  --on-brand: #ffffff;
  --accent: #6b8cff;          /* azul clareado: TEXTO/ícone/borda de ação no escuro */
  --accent-strong: #8fa8ff;
  --accent-soft: rgba(107, 140, 255, 0.14);
  --highlight: #ff8a33;       /* laranja: foco, conquista, "feito" */
  --highlight-soft: rgba(255, 138, 51, 0.14);
  --on-highlight: #1a0e04;
  --good: #3dd68c;
  --good-soft: rgba(61, 214, 140, 0.13);
  --warn: #f2c14e;
  --danger: #ff6b6b;
  --danger-soft: rgba(255, 107, 107, 0.13);
  --shadow-card: 0 14px 36px rgba(0, 0, 0, 0.32);
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 7px;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --surface-3: #16203a;
  --accent-hover: var(--accent-strong);
  --warn-soft: rgba(242, 193, 78, 0.12);
  --overlay: rgba(4, 7, 16, 0.78);
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.55);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.6);
  --shadow-drag: 0 18px 40px rgba(0, 0, 0, 0.45);
  --shadow: var(--shadow-card);
  --radius: var(--radius-md);
  --grain-opacity: 0.028;
  --glow-a: rgba(107, 140, 255, 0.08);
  --glow-b: rgba(255, 138, 51, 0.05);
  --blob-a: rgba(107, 140, 255, 0.13);
  --blob-b: rgba(255, 138, 51, 0.08);
  --blob-c: rgba(31, 79, 216, 0.12);
  --jade-ring: rgba(107, 140, 255, 0.22);
  --brass-soft: rgba(242, 193, 78, 0.11);
  /* nomes antigos do Financeiro, apontando para os tokens novos */
  --ink: var(--bg);
  --ink-soft: var(--surface-2);
  --ink-card: var(--surface);
  --ink-line: var(--border);
  --line-strong: var(--border-strong);
  --jade: var(--accent);
  --jade-strong: var(--accent-strong);
  --jade-soft: var(--accent-soft);
  --jade-text: var(--accent);
  --rust: var(--danger);
  --rust-soft: var(--danger-soft);
  --rust-text: var(--danger);
  --brass: var(--warn);
  --brass-text: var(--warn);
  --paper: var(--text);
  --paper-dim: var(--text-secondary);
  --muted: var(--text-secondary);
  --muted-2: var(--text-tertiary);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #eaeef6;
  --card-hover: #ffffff;
  --border: #dce2ee;
  --border-strong: #b8c2d6;
  --text: #0e1b3d;            /* tinta */
  --text-secondary: #44506b;
  --text-tertiary: #667089;
  --brand: #1f4fd8;
  --on-brand: #ffffff;
  --accent: #1f4fd8;          /* azul PalmLife */
  --accent-strong: #173fb0;
  --accent-soft: rgba(31, 79, 216, 0.09);
  --highlight: #ff7a1a;       /* laranja PalmLife (formas, selos, barras) */
  --highlight-text: #b34a06;  /* laranja para TEXTO sobre fundo claro (contraste AA) */
  --highlight-soft: rgba(255, 122, 26, 0.12);
  --on-highlight: #1a0e04;
  --good: #12925e;
  --good-soft: rgba(18, 146, 94, 0.1);
  --warn: #b7791f;
  --danger: #d64545;
  --danger-soft: rgba(214, 69, 69, 0.09);
  --shadow-card: 0 1px 2px rgba(14, 27, 61, 0.05), 0 12px 32px rgba(14, 27, 61, 0.08);
  --surface-3: #dfe5f0;
  --accent-hover: var(--accent-strong);
  --warn-soft: rgba(183, 121, 31, 0.1);
  --overlay: rgba(14, 27, 61, 0.55);
  --shadow-pop: 0 16px 40px rgba(14, 27, 61, 0.16);
  --shadow-modal: 0 24px 64px rgba(14, 27, 61, 0.2);
  --shadow-drag: 0 18px 40px rgba(14, 27, 61, 0.18);
  --grain-opacity: 0.02;
  --glow-a: rgba(31, 79, 216, 0.06);
  --glow-b: rgba(255, 122, 26, 0.06);
  --blob-a: rgba(31, 79, 216, 0.1);
  --blob-b: rgba(255, 122, 26, 0.08);
  --blob-c: rgba(31, 79, 216, 0.07);
  --jade-ring: rgba(31, 79, 216, 0.2);
  --brass-soft: rgba(183, 121, 31, 0.1);
}

body { font-family: var(--font-sans); }
h1 { font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.02em; }
@media (pointer: coarse) {
  button, .btn, [role="button"], input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select { min-height: 44px; }
}