/**
 * Alves Finança Familiar — Design Tokens
 * Desenvolvido por Juliano Alves
 *
 * Reflete estritamente as seções 26-A, 27, 28, 29 e 30 do PRD.
 */

:root {
  /* Tipografia */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Raios de borda (PRD §26-A: 20-24px nos cards principais) */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Espaçamentos */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;

  /* Área mínima de toque (PRD §25 e §31) */
  --touch-target-min: 44px;

  /* Safe Area para Mobile / PWA */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Transições suaves */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
}

/* ==========================================================================
   TEMA CLARO (Default — PRD §27)
   ========================================================================== */
[data-theme="light"],
:root:not([data-theme="dark"]) {
  --bg-app: #FDFDFB;
  --bg-surface: #FDFDFB;
  --bg-card: #F1EFE8;
  --bg-card-hover: #EBE8E0;
  --bg-input: #FFFFFF;
  --bg-pill: #F1EFE8;

  /* Aliases para compatibilidade */
  --surface: #FFFFFF;
  --surface-sunken: #F1EFE8;
  --primary: #3B6D11;
  --primary-contrast: #FFFFFF;

  --border-subtle: #E3E1D8;
  --border-strong: #D3D1C7;

  --text-primary: #22261B;
  --text-secondary: #8A8A80;
  --text-muted: #A8A89F;

  /* Cor de destaque oficial (PRD §27) */
  --accent: #3B6D11;
  --accent-hover: #315C0E;
  --accent-light: #EAF3DE;
  --accent-contrast: #FFFFFF;

  /* Hero card sólido (PRD §26-A) */
  --hero-bg: #3B6D11;
  --hero-text-title: rgba(255, 255, 255, 0.85);
  --hero-text-main: #FFFFFF;
  --hero-text-sub: rgba(255, 255, 255, 0.9);
  --hero-pill-bg: rgba(255, 255, 255, 0.18);
  --hero-pill-text: #FFFFFF;

  /* Cores semânticas de transação (PRD §29) */
  --positive-text: #3B6D11;
  --positive-bg: #EAF3DE;
  --negative-text: #A32D2D;
  --negative-bg: #FCEBEB;
  --warning-text: #B45309;
  --warning-bg: #FEF3C7;
  --info-text: #1D4ED8;
  --info-bg: #DBEAFE;

  /* Bottom Navigation */
  --nav-bg: rgba(253, 253, 251, 0.95);
  --nav-border: #E3E1D8;
  --nav-item-active: #3B6D11;
  --nav-item-inactive: #8A8A80;

  /* Sombra sutil minimalista */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-sheet: 0 -8px 24px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   TEMA ESCURO (Dark Mode — PRD §28)
   ========================================================================== */
[data-theme="dark"] {
  --bg-app: #000000;
  --bg-surface: #0D0D0D;
  --bg-card: #181818;
  --bg-card-hover: #202020;
  --bg-input: #181818;
  --bg-pill: #181818;

  /* Aliases para compatibilidade Dark Mode */
  --surface: #181818;
  --surface-sunken: #0D0D0D;
  --primary: #C8F04F;
  --primary-contrast: #0D0D0D;

  --border-subtle: #262626;
  --border-strong: #333333;

  --text-primary: #FFFFFF;
  --text-secondary: #8A8A8A;
  --text-muted: #666666;

  /* Cor de destaque oficial (PRD §28) */
  --accent: #C8F04F;
  --accent-hover: #B5DE3C;
  --accent-light: #1E280C;
  --accent-contrast: #0D0D0D;

  /* Hero card sólido escuro (PRD §26-A / §28) */
  --hero-bg: #1A3308;
  --hero-text-title: rgba(200, 240, 79, 0.85);
  --hero-text-main: #FFFFFF;
  --hero-text-sub: #C8F04F;
  --hero-pill-bg: rgba(200, 240, 79, 0.15);
  --hero-pill-text: #C8F04F;

  /* Cores semânticas de transação (PRD §29) */
  --positive-text: #8FE06A;
  --positive-bg: #152A1C;
  --negative-text: #F0685F;
  --negative-bg: #2A1515;
  --warning-text: #FBBF24;
  --warning-bg: #2C2208;
  --info-text: #60A5FA;
  --info-bg: #112038;

  /* Bottom Navigation */
  --nav-bg: rgba(13, 13, 13, 0.95);
  --nav-border: #262626;
  --nav-item-active: #C8F04F;
  --nav-item-inactive: #8A8A8A;

  /* Sombra sutil escuro */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
  --shadow-sheet: 0 -8px 30px rgba(0, 0, 0, 0.7);
}