/**
 * 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-on-neon-fill: #ffffff;
  --palette-on-neon-fill-rgb: 255 255 255;
  --palette-surface-bg: #000000;
  --palette-surface-bg-rgb: 0 0 0;
  --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) */
  --fs-page: 210 20% 98%;
  --fs-elevated: 0 0% 100%;
  --fs-void: 210 16% 96%;
  --fs-border-subtle: 214 20% 88%;
  --fs-muted-text: 215 14% 45%;
  --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: 210 18% 94%;
  --secondary-foreground: 222 40% 18%;
  --muted: 210 18% 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;
}

.dark {
  /* shadcn — fundo #101010 / cartão #1a1a1a (print referência) */
  --fs-page: 0 0% 6.27%;
  --fs-elevated: 0 0% 10.2%;
  --fs-void: 0 0% 6.27%;
  --fs-border-subtle: 0 0% 22%;
  /* #A0A0A0 texto secundário (print) */
  --fs-muted-text: 0 0% 62.75%;
  /* 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% 14%;
  --secondary-foreground: 0 0% 92%;
  --muted: 0 0% 14%;
  --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;
}

/* @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(255, 255, 255, 0.88);
}
html.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(255, 255, 255, 0.94);
}
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 */