/**
 * FinanScan — tokens de tema + paleta de marca (imutável).
 * Cores da landing / marca: docs/design/COLOR_PALETTE.md
 * --palette-* nunca dependem do tema claro/escuro (identidade visual fixa).
 */

:root {
  /* @generated brand-palette begin — edit styles/brand-palette.json */
  --palette-neon-green: #39ff14;
  --palette-neon-green-rgb: 57 255 20;
  --palette-neon-green-fill: #145e27;
  --palette-neon-green-fill-rgb: 20 94 39;
  --palette-neon-on-light-fg: #156d2c;
  --palette-neon-on-light-fg-rgb: 21 109 44;
  --palette-light-glass-surface: #ecefec;
  --palette-light-glass-surface-rgb: 236 239 236;
  --palette-on-neon-fill: #ffffff;
  --palette-on-neon-fill-rgb: 255 255 255;
  --palette-surface-bg: #000000;
  --palette-surface-bg-rgb: 0 0 0;
  --palette-landing-void: #0a0a0e;
  --palette-landing-void-rgb: 10 10 14;
  --palette-landing-slate: #141820;
  --palette-landing-slate-rgb: 20 24 32;
  --palette-card-bg: #111111;
  --palette-card-bg-rgb: 17 17 17;
  --palette-dark-bg: #111111;
  --palette-dark-bg-rgb: 17 17 17;
  --palette-accent-peach: #ffe8e3;
  --palette-accent-peach-rgb: 255 232 227;
  --palette-on-neon: #0a0a0a;
  --palette-on-neon-rgb: 10 10 10;
  --palette-text-subdued: #a3a3a3;
  --palette-text-subdued-rgb: 163 163 163;
  --palette-mockup-teal: #335e54;
  --palette-mockup-teal-rgb: 51 94 84;
  --palette-mockup-panel-grey: #e8e8e8;
  --palette-mockup-panel-grey-rgb: 232 232 232;
  /* @generated brand-palette end */

  /* shadcn — tema claro (app): base ~#F8F8F8, texto secundário ~#525252 */
  --fs-page: 0 0% 97%;
  --fs-elevated: 0 0% 100%;
  --fs-void: 0 0% 96%;
  --fs-border-subtle: 0 0% 90%;
  --fs-muted-text: 0 0% 32%;
  --fs-brand: 108 100% 54%;
  --fs-on-brand: 0 0% 6%;
  --fs-accent-tint: 108 35% 92%;
  --fs-accent-fg: 108 55% 22%;

  --background: var(--fs-page);
  --foreground: 222 47% 11%;
  --card: var(--fs-elevated);
  --card-foreground: 222 47% 11%;
  --popover: var(--fs-elevated);
  --popover-foreground: 222 47% 11%;
  --primary: var(--fs-brand);
  --primary-foreground: var(--fs-on-brand);
  --secondary: 0 0% 94%;
  --secondary-foreground: 222 40% 18%;
  --muted: 0 0% 94%;
  --muted-foreground: var(--fs-muted-text);
  --accent: var(--fs-accent-tint);
  --accent-foreground: var(--fs-accent-fg);
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 98%;
  --border: var(--fs-border-subtle);
  --input: var(--fs-border-subtle);
  --ring: var(--fs-brand);
  --radius: 1rem;

  --chart-income: #22a33a;
  --chart-expense: #dc2626;
  --chart-balance: #4ade80;
  --chart-grid: #cbd5e1;

  /* KPIs — hex para Tailwind text-kpi-* (sem isto a cor fica inválida) */
  --kpi-income: #156d2c;
  --kpi-expense: #b91c1c;
  --kpi-balance: #1d4ed8;

  /* Texto/ícone verde legível: escuro no claro, néon no escuro (ver docs/design/COLOR_PALETTE.md) */
  --app-neon-readable: var(--palette-neon-on-light-fg);
}

.dark {
  /* Base ~#0F0F0F, cartão ~#202020; texto secundário mais claro (docs/design/DESIGN-SYSTEM-TOKENS-VIBE.md) */
  --fs-page: 0 0% 6%;
  --fs-elevated: 0 0% 12.5%;
  --fs-void: 0 0% 6%;
  --fs-border-subtle: 0 0% 22%;
  --fs-muted-text: 0 0% 71%;
  /* Botões primários: verde preenchido (--palette-neon-green-fill) para texto branco legível (WCAG AA) */
  --fs-brand: 134 65% 22%;
  --fs-on-brand: 0 0% 100%;
  --fs-accent-tint: 108 40% 16%;
  --fs-accent-fg: 108 100% 70%;

  --background: var(--fs-page);
  --foreground: 0 0% 100%;
  --card: var(--fs-elevated);
  --card-foreground: 0 0% 100%;
  --popover: var(--fs-elevated);
  --popover-foreground: 0 0% 100%;
  --primary: var(--fs-brand);
  --primary-foreground: var(--fs-on-brand);
  --secondary: 0 0% 16%;
  --secondary-foreground: 0 0% 96%;
  --muted: 0 0% 16%;
  --muted-foreground: var(--fs-muted-text);
  --accent: var(--fs-accent-tint);
  --accent-foreground: var(--fs-accent-fg);
  --destructive: 0 62% 45%;
  --destructive-foreground: 0 0% 98%;
  --border: var(--fs-border-subtle);
  --input: var(--fs-border-subtle);
  --ring: var(--fs-brand);

  --chart-income: #39ff14;
  --chart-expense: #ef4444;
  --chart-balance: #86efac;
  --chart-grid: #334155;

  --kpi-income: #86efac;
  --kpi-expense: #fca5a5;
  --kpi-balance: #93c5fd;

  --app-neon-readable: var(--palette-neon-green);
}

/* @generated brand-ui-effects begin — edit styles/brand-palette.json */
.glass-header {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html:not(.dark) .glass-header {
  background: rgba(236, 239, 236, 0.92);
}
html.dark .glass-header {
  background: rgba(17, 17, 17, 0.85);
}
/* Landing: vidro escuro mesmo com tema global claro (ver pages/LandingPage.tsx .landing-theme-dark) */
html:not(.dark) .landing-theme-dark .glass-header {
  background: rgba(17, 17, 17, 0.85);
}

.glass-bottom-nav {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html:not(.dark) .glass-bottom-nav {
  background: rgba(236, 239, 236, 0.96);
}
html.dark .glass-bottom-nav {
  background: rgba(17, 17, 17, 0.92);
}

.neon-shadow {
  box-shadow: 0 0 20px rgba(57, 255, 20, 0.25);
}
.neon-border {
  border: 1px solid rgba(57, 255, 20, 0.35);
}
.neon-text-glow {
  text-shadow: 0 0 12px rgba(57, 255, 20, 0.45);
}
/* @generated brand-ui-effects end */
