/* ─────────────────────────────────────────────────────────────
   FinFlowme — Design Tokens
   Gold & Sepia palette + compat aliases
   ───────────────────────────────────────────────────────────── */

/* Light (default) */
:root,
html[data-theme="light"] {
  /* Paleta nova — Gold & Sepia */
  --bg-color:             #FFFFFF;
  --bg-color-alt:         #F8F8F8;
  --primary-text-color:   #8D7447;
  --secondary-text-color: #1C1C1E;
  --meta-text-color:      #707378;
  --accent-color:         #8D7447;
  --amount-positive-color:#4DAF51;
  --amount-negative-color:#A26C53;
  --destructive-color:    #B5361D;
  --filter-bg-inactive:   #FFFFFF;
  --filter-border-inactive:#E0E0E0;
  --search-bg-color:      #FFFFFF;
  --search-border-color:  #D6C29E;
  --nav-bg-color:         #FFFFFF;
  --nav-icon-inactive:    #707378;
  --nav-icon-active:      #8D7447;

  /* Aliases de compat (sistema antigo "Apple Finance") */
  --bg:      var(--bg-color);
  --surface: var(--bg-color-alt);
  --label:   var(--secondary-text-color);
  --label2:  var(--meta-text-color);
  --label3:  var(--meta-text-color);
  --label4:  var(--filter-border-inactive);
  --sep:     rgba(141, 116, 71, 0.12);
  --border:  var(--filter-border-inactive);
  --fill4:   rgba(141, 116, 71, 0.08);
  --blue:    var(--accent-color);
  --green:   var(--amount-positive-color);
  --red:     var(--destructive-color);
  --amber:   var(--accent-color);
  --purple:  var(--accent-color);

  /* FAB metálico dourado */
  --fab-gradient: radial-gradient(circle at 30% 25%, #E8CA8C 0%, #C6A76E 45%, #8D7447 100%);
  --fab-border:   rgba(232, 202, 140, .9);
  --fab-shadow:   0 6px 18px rgba(0,0,0,.38), inset 0 1px 2px rgba(255,255,255,.35);
  --fab-ink:      #2A1F0E;
}

/* Dark */
html[data-theme="dark"] {
  --bg-color:             #0D0E11;
  --bg-color-alt:         #1A1C1F;
  --primary-text-color:   #C6A76E;
  --secondary-text-color: #FFFFFF;
  --meta-text-color:      #A0A3A7;
  --accent-color:         #C6A76E;
  --amount-positive-color:#80D79F;
  --amount-negative-color:#C18F71;
  --destructive-color:    #E57373;
  --filter-bg-inactive:   #1A1C1F;
  --filter-border-inactive:#2C2F34;
  --search-bg-color:      #0D0E11;
  --search-border-color:  #C6A76E;
  --nav-bg-color:         #1A1C1F;
  --nav-icon-inactive:    #A0A3A7;
  --nav-icon-active:      #C6A76E;

  --bg:      var(--bg-color);
  --surface: var(--bg-color-alt);
  --label:   var(--secondary-text-color);
  --label2:  var(--meta-text-color);
  --label3:  var(--meta-text-color);
  --label4:  var(--filter-border-inactive);
  --sep:     rgba(198, 167, 110, 0.16);
  --border:  var(--filter-border-inactive);
  --fill4:   rgba(198, 167, 110, 0.12);
  --blue:    var(--accent-color);
  --green:   var(--amount-positive-color);
  --red:     var(--destructive-color);
  --amber:   var(--accent-color);
  --purple:  var(--accent-color);
}

/* Raios, sombras, espaçamentos */
:root {
  --radius-row:       9px;   /* squircle de avatar */
  --radius-icon-sq:   7px;   /* ícone quadrado em Config */
  --radius-card:      14px;  /* grouped card */
  --radius-button:    12px;  /* botão primário */
  --radius-input:     10px;  /* input / segmented */
  --radius-chip:      20px;  /* chips de filtro */

  --shadow-card:  0 1px 0 rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-pop:   0 8px 24px rgba(0,0,0,.18);

  --space-row-y:  11px;
  --space-row-x:  16px;
  --space-section-gap: 28px;
  --page-max:     512px;
  --page-pad:     16px;
}

/* Reset leve + base */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--label);
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Numerais tabulares por padrão em dígitos monetários */
.num-tabular { font-variant-numeric: tabular-nums; }

/* Brand wordmark — 'me' em italic Playfair Display dourado (mesma serifa do
   carrossel/reel do Instagram — unifica a ênfase editorial da marca).
   Aplicar apenas em wordmarks de body (hero principal, header de email).
   Nav/footer logo usam PNG (public/brand/finflowme-wordmark-*.png).
   Em texto corrido, usar 'FinFlowme' plain pra preservar fluência. */
.brand-me {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -.02em;
  color: #C6A76E;
}