/**
 * Mão na Massa — tokens de tema + paleta de marca (imutável).
 * App em modo claro único; landing/onboarding podem ter secções pretas decorativas.
 * Cores da marca: docs/design/COLOR_PALETTE.md (Deep Teal #0F4C5C, âmbar #E76F51, preto #0A0A0A, branco #FFFFFF)
 * --palette-* nunca dependem do tema (identidade visual fixa).
 */

:root {
  /* @generated brand-palette begin — edit styles/brand-palette.json */
  --palette-brand-teal: #0F4C5C;
  --palette-brand-teal-rgb: 15 76 92;
  --palette-brand-teal-strong: #0B3A47;
  --palette-brand-teal-strong-rgb: 11 58 71;
  --palette-brand-teal-on-light-fg: #0B3A47;
  --palette-brand-teal-on-light-fg-rgb: 11 58 71;
  --palette-brand-teal-fill: #0F4C5C;
  --palette-brand-teal-fill-rgb: 15 76 92;
  --palette-brand-amber: #E76F51;
  --palette-brand-amber-rgb: 231 111 81;
  --palette-brand-amber-fg: #B85A3F;
  --palette-brand-amber-fg-rgb: 184 90 63;
  --palette-ice-gray: #E9EFF3;
  --palette-ice-gray-rgb: 233 239 243;
  /* legado: neon-green = brand-teal */
  --palette-neon-green: #0F4C5C;
  --palette-neon-green-rgb: 15 76 92;
  --palette-neon-green-fill: #0F4C5C;
  --palette-neon-green-fill-rgb: 15 76 92;
  --palette-neon-on-light-fg: #0B3A47;
  --palette-neon-on-light-fg-rgb: 11 58 71;
  --palette-light-glass-surface: #F8FAFC;
  --palette-light-glass-surface-rgb: 248 250 252;
  --palette-on-neon-fill: #FFFFFF;
  --palette-on-neon-fill-rgb: 255 255 255;
  --palette-surface-bg: #FFFFFF;
  --palette-surface-bg-rgb: 255 255 255;
  --palette-landing-void: #0A0A0A;
  --palette-landing-void-rgb: 10 10 10;
  --palette-landing-slate: #111827;
  --palette-landing-slate-rgb: 17 24 39;
  --palette-card-bg: #FFFFFF;
  --palette-card-bg-rgb: 255 255 255;
  --palette-dark-bg: #FFFFFF;
  --palette-dark-bg-rgb: 255 255 255;
  --palette-accent-peach: #E0ECFF;
  --palette-accent-peach-rgb: 224 236 255;
  --palette-on-neon: #FFFFFF;
  --palette-on-neon-rgb: 255 255 255;
  --palette-text-subdued: #475569;
  --palette-text-subdued-rgb: 71 85 105;
  --palette-mockup-teal: #0F4C5C;
  --palette-mockup-teal-rgb: 15 76 92;
  --palette-mockup-panel-grey: #F1F5F9;
  --palette-mockup-panel-grey-rgb: 241 245 249;
  --palette-panel-grey: #F1F5F9;
  --palette-panel-grey-rgb: 241 245 249;
  --palette-accent-mint: #10B981;
  --palette-accent-mint-rgb: 16 185 129;
  --palette-accent-mint-deep: #059669;
  --palette-accent-mint-deep-rgb: 5 150 105;
  --palette-accent-mint-soft: #D1FAE5;
  --palette-accent-mint-soft-rgb: 209 250 229;
  --palette-accent-coral: #FB7185;
  --palette-accent-coral-rgb: 251 113 133;
  --palette-accent-coral-deep: #BE123C;
  --palette-accent-coral-deep-rgb: 190 18 60;
  --palette-accent-coral-soft: #FFE4E6;
  --palette-accent-coral-soft-rgb: 255 228 230;
  --palette-accent-sky: #38BDF8;
  --palette-accent-sky-rgb: 56 189 248;
  --palette-accent-sky-deep: #0284C7;
  --palette-accent-sky-deep-rgb: 2 132 199;
  --palette-accent-sky-soft: #E0F2FE;
  --palette-accent-sky-soft-rgb: 224 242 254;
  --palette-accent-violet: #A78BFA;
  --palette-accent-violet-rgb: 167 139 250;
  --palette-accent-violet-deep: #7C3AED;
  --palette-accent-violet-deep-rgb: 124 58 237;
  --palette-accent-violet-soft: #EDE9FE;
  --palette-accent-violet-soft-rgb: 237 233 254;
  --palette-accent-sunshine: #FACC15;
  --palette-accent-sunshine-rgb: 250 204 21;
  --palette-accent-sunshine-deep: #CA8A04;
  --palette-accent-sunshine-deep-rgb: 202 138 4;
  --palette-accent-sunshine-soft: #FEF3C7;
  --palette-accent-sunshine-soft-rgb: 254 243 199;
  /* @generated brand-palette end */

  /* shadcn — tema claro (Mão na Massa): base gelo, marca Deep Teal #0F4C5C */
  /* Fundo gelo-teal: contraste com cartões brancos (--fs-elevated) sem “deserto branco”. */
  --fs-page: 192 20% 96%;
  --fs-elevated: 0 0% 100%;
  --fs-void: 192 25% 94%;
  --fs-border-subtle: 210 20% 88%;
  --fs-muted-text: 215 16% 40%;
  --fs-brand: 192 71% 21%;
  --fs-on-brand: 0 0% 100%;
  --fs-accent-tint: 192 35% 94%;
  --fs-accent-fg: 192 55% 26%;

  --background: var(--fs-page);
  --foreground: 0 0% 11%;
  --card: var(--fs-elevated);
  --card-foreground: 0 0% 11%;
  --popover: var(--fs-elevated);
  --popover-foreground: 0 0% 11%;
  --primary: var(--fs-brand);
  --primary-foreground: var(--fs-on-brand);
  --secondary: 0 0% 94%;
  --secondary-foreground: 0 0% 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;

  /* Gráficos: Receitas/Despesas/Saldo + par Previsto x Realizado (teal / âmbar) */
  --chart-income: #14532d;
  --chart-expense: #b91c1c;
  --chart-balance: #0f4c5c;
  --chart-planned: var(--palette-brand-teal);
  --chart-actual: var(--palette-brand-amber);
  --chart-grid: #cbd5e1;

  /* KPIs — hex para Tailwind text-kpi-* (sem isto a cor fica inválida) */
  --kpi-income: #14532d;
  --kpi-expense: #b91c1c;
  --kpi-balance: #0b3a47;

  /* Texto/ícone marca legível no claro (WCAG — ver docs/design/COLOR_PALETTE.md) */
  --app-neon-readable: var(--palette-brand-teal-on-light-fg);

  /* App premium — elevação e mesh (Vibrant Bento) */
  --shadow-soft: 0 1px 2px rgb(15 23 42 / 0.05), 0 1px 3px rgb(15 23 42 / 0.08);
  --shadow-elevated: 0 4px 6px -1px rgb(15 23 42 / 0.07), 0 10px 15px -3px rgb(15 23 42 / 0.08);
  --shadow-floating: 0 10px 25px -5px rgb(15 23 42 / 0.1), 0 20px 40px -12px rgb(15 76 92 / 0.12);
  --shadow-brand-glow: 0 0 0 1px rgb(var(--palette-brand-teal-rgb) / 0.12), 0 8px 24px rgb(15 76 92 / 0.18);
  --shadow-success-glow: 0 0 0 1px rgb(var(--palette-accent-mint-rgb) / 0.2), 0 6px 20px rgb(16 185 129 / 0.15);
  --shadow-warn-glow: 0 0 0 1px rgb(var(--palette-accent-sunshine-rgb) / 0.25), 0 6px 20px rgb(250 204 21 / 0.18);

  --gradient-mesh-teal: radial-gradient(ellipse 80% 55% at 20% -10%, rgb(var(--palette-brand-teal-rgb) / 0.14), transparent 55%),
    radial-gradient(ellipse 60% 45% at 100% 20%, rgb(16 185 129 / 0.08), transparent 50%),
    radial-gradient(ellipse 50% 40% at 0% 90%, rgb(56 189 248 / 0.07), transparent 48%);
  --gradient-mesh-warm: radial-gradient(ellipse 70% 50% at 90% 0%, rgb(var(--palette-brand-amber-rgb) / 0.12), transparent 50%),
    radial-gradient(ellipse 55% 45% at 10% 100%, rgb(var(--palette-brand-teal-rgb) / 0.08), transparent 48%);
  --gradient-mesh-cool: radial-gradient(ellipse 75% 50% at 50% -15%, rgb(56 189 248 / 0.1), transparent 52%),
    radial-gradient(ellipse 45% 40% at 0% 80%, rgb(167 139 250 / 0.08), transparent 45%);
  --gradient-bento-hero: var(--gradient-mesh-teal);

  --radius-bento: 1.25rem;
  --radius-tile: 1rem;
}

.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%;
  /* Primários: Deep Teal preenchido (--palette-brand-teal-fill) */
  --fs-brand: 192 55% 38%;
  --fs-on-brand: 0 0% 100%;
  --fs-accent-tint: 192 35% 18%;
  --fs-accent-fg: 192 45% 78%;

  --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: #4ade80;
  --chart-expense: #f87171;
  --chart-balance: #5eead4;
  --chart-planned: var(--palette-brand-teal);
  --chart-actual: var(--palette-brand-amber);
  --chart-grid: #52525b;

  --kpi-income: #86efac;
  --kpi-expense: #fca5a5;
  --kpi-balance: #99f6e4;

  --app-neon-readable: var(--palette-brand-teal);

  --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.25), 0 1px 3px rgb(0 0 0 / 0.2);
  --shadow-elevated: 0 8px 24px rgb(0 0 0 / 0.35);
  --shadow-floating: 0 16px 40px rgb(0 0 0 / 0.45);
  --shadow-brand-glow: 0 0 0 1px rgb(94 234 212 / 0.15), 0 8px 28px rgb(45 212 191 / 0.12);
  --shadow-success-glow: 0 0 0 1px rgb(74 222 128 / 0.12), 0 6px 22px rgb(74 222 128 / 0.1);
  --shadow-warn-glow: 0 0 0 1px rgb(250 204 21 / 0.15), 0 6px 22px rgb(250 204 21 / 0.1);

  --gradient-mesh-teal: radial-gradient(ellipse 80% 55% at 20% -10%, rgb(45 212 191 / 0.12), transparent 55%),
    radial-gradient(ellipse 60% 45% at 100% 20%, rgb(167 139 250 / 0.08), transparent 50%);
  --gradient-mesh-warm: radial-gradient(ellipse 70% 50% at 90% 0%, rgb(251 113 133 / 0.1), transparent 50%);
  --gradient-mesh-cool: radial-gradient(ellipse 75% 50% at 50% -15%, rgb(56 189 248 / 0.1), transparent 52%);
  --gradient-bento-hero: var(--gradient-mesh-teal);

  --radius-bento: 1.25rem;
  --radius-tile: 1rem;
}

/* @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(248, 250, 252, 0.92);
}
html.dark .glass-header {
  /* Carvão alinhado à rail (landingVoid) */
  background: rgba(10, 10, 10, 0.82);
}
/* 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(10, 10, 10, 0.82);
}

/*
 * Landing marketing — barra superior = Deep Teal (alinhado ao menu principal / sidebar).
 * Tem de vencer html:not(.dark) .glass-header (0,2,1): usar html + .landing-theme-light (0,3,1).
 */
html:not(.dark) .landing-theme-light .glass-header,
html.dark .landing-theme-light .glass-header {
  background: linear-gradient(
    180deg,
    rgba(15, 76, 92, 0.99) 0%,
    rgba(11, 58, 71, 0.98) 100%
  );
  border-bottom-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 10px 28px -12px rgba(0, 0, 0, 0.35);
}

.glass-bottom-nav {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html:not(.dark) .glass-bottom-nav {
  background: rgba(248, 250, 252, 0.96);
}
html.dark .glass-bottom-nav {
  background: rgba(10, 10, 10, 0.88);
}

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