/* ============================================================
   TOKENS — fontes e paletas. Unico lugar onde uma cor e' declarada.
   Temas via html[data-theme="dark|light"].
   Reune o que estava duplicado em css/us2.css e modules/travel/app.css:
   os tokens de grafico (--chart-*) vinham do Financeiro, os de globo,
   atlas e carimbo (--ocean-*, --land-*, --stamp-*) vinham de Viagens.
   ============================================================ */

:root {
  /* Uma família só para texto e títulos; a mono fica restrita a valores,
     códigos e datas. --serif é alias legado, não use em código novo. */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --display: var(--sans);
  --serif: var(--display);
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

/* DARK (padrao) */
html[data-theme="dark"] {
  --bg: oklch(0.14 0.012 260);
  --bg-elev: oklch(0.17 0.013 260);
  --bg-card: oklch(0.19 0.014 260);
  --fg: oklch(0.96 0.01 85);
  --fg-dim: oklch(0.65 0.015 260);
  --fg-faint: oklch(0.42 0.012 260);
  --line: oklch(0.28 0.012 260);
  --line-strong: oklch(0.38 0.014 260);
  --accent: oklch(0.82 0.17 75);
  --accent-dim: oklch(0.65 0.14 75);
  --cyan: oklch(0.78 0.12 210);
  --pos: oklch(0.75 0.14 150);
  --neg: oklch(0.70 0.16 25);
  --shadow-lg: 0 20px 60px -20px rgba(0,0,0,0.6);
  /* paleta de gráficos (hex — ApexCharts manipula cores internamente) */
  --chart-1: #e2a94e; /* âmbar / accent */
  --chart-2: #64b6d8; /* ciano */
  --chart-3: #6fbf8f; /* verde / positivo */
  --chart-4: #d97b6c; /* vermelho / negativo */
  --chart-5: #a48fd4; /* violeta */
  --chart-6: #8b93a7; /* neutro */
  --chart-grid: rgba(255,255,255,0.07);

  /* Viagens — globo, atlas e carimbos do passaporte */
  --accent-dim: oklch(0.65 0.14 75);
  --cyan: oklch(0.78 0.12 210);
  /* Ocean */
  --ocean-hi:  oklch(0.40 0.09 230);
  --ocean-mid: oklch(0.30 0.08 235);
  --ocean-lo:  oklch(0.18 0.06 240);
  /* Land */
  --land: oklch(0.32 0.012 85);
  --land-stroke: oklch(0.22 0.010 85);
  --land-visited: oklch(0.82 0.17 75);
  --land-visited-stroke: oklch(0.95 0.05 85);
  --land-wish: oklch(0.50 0.10 220);
  --land-wish-stroke: oklch(0.78 0.12 210);
  --graticule: oklch(0.55 0.05 230 / 0.4);
  --pin-ring: oklch(0.14 0.012 260);
  /* Linha do percurso entre as cidades de uma viagem. Cor propria, e nao
     --accent: o accent e' EXATAMENTE --land-visited neste tema, entao a linha
     desaparecia dentro do pais pintado. O contorno dela e' --pin-ring, que ja'
     existe para separar o pino do que esta' embaixo. */
  --route: oklch(0.97 0.02 85);
  --shadow-lg: 0 20px 60px -20px rgba(0,0,0,0.6);
  /* Passport stamp */
  --stamp-paper: oklch(0.22 0.015 80);
  --stamp-ink: oklch(0.82 0.17 75);
  --stamp-ink-dim: oklch(0.6 0.12 75);
}

/* LIGHT */
html[data-theme="light"] {
  --bg: oklch(0.97 0.005 85);
  --bg-elev: oklch(0.99 0.005 85);
  --bg-card: oklch(1 0 0);
  --fg: oklch(0.18 0.012 260);
  --fg-dim: oklch(0.42 0.012 260);
  --fg-faint: oklch(0.62 0.012 260);
  --line: oklch(0.88 0.008 85);
  --line-strong: oklch(0.75 0.010 85);
  --accent: oklch(0.62 0.17 55);
  --accent-dim: oklch(0.68 0.14 55);
  --cyan: oklch(0.55 0.12 230);
  --pos: oklch(0.55 0.14 150);
  --neg: oklch(0.55 0.16 25);
  --shadow-lg: 0 20px 60px -20px rgba(40,30,10,0.2);
  --chart-1: #c07a26;
  --chart-2: #33769e;
  --chart-3: #3e8e63;
  --chart-4: #bb5a49;
  --chart-5: #7b64ad;
  --chart-6: #6d7486;
  --chart-grid: rgba(0,0,0,0.07);

  /* Viagens */
  --accent-dim: oklch(0.68 0.14 55);
  --cyan: oklch(0.55 0.12 230);
  --ocean-hi:  oklch(0.90 0.05 230);
  --ocean-mid: oklch(0.82 0.06 230);
  --ocean-lo:  oklch(0.70 0.07 235);
  --land: oklch(0.94 0.015 85);
  --land-stroke: oklch(0.70 0.012 85);
  --land-visited: oklch(0.70 0.15 55);
  --land-visited-stroke: oklch(0.40 0.14 55);
  --land-wish: oklch(0.78 0.10 220);
  --land-wish-stroke: oklch(0.45 0.12 220);
  --graticule: oklch(0.55 0.05 230 / 0.3);
  --pin-ring: oklch(1 0 0);
  /* Invertida em relacao ao tema escuro: aqui a linha e' escura e o contorno
     (--pin-ring) e' branco. E' o que um contorno precisa fazer. */
  --route: oklch(0.35 0.10 55);
  --shadow-lg: 0 20px 60px -20px rgba(40,30,10,0.2);
  --stamp-paper: oklch(0.98 0.01 80);
  --stamp-ink: oklch(0.45 0.18 25);
  --stamp-ink-dim: oklch(0.6 0.12 25);
}

/* Planejamento de viagem: teal identifica a tela de Orcamento, o accent
   identifica a de Execucao. Dois tons porque o vivido nao e' legivel como
   texto sobre fundo claro. */
:root { --plan-teal: oklch(0.54 0.12 200); --plan-teal-vivid: oklch(0.70 0.14 200); }
html[data-theme="dark"] { --plan-teal: oklch(0.76 0.13 200); }