/* ============================================================
   Marcela Finanças — Color tokens
   Anchor: deep cyan #004643 · warm creams, peach & gold accents
   ============================================================ */
:root {
  /* --- Teal / cyan (primary anchor) --- */
  --teal-900: #00302C;
  --teal-800: #004643; /* brand base */
  --teal-700: #0A5A54;
  --teal-600: #1E7168;
  --teal-500: #3B8A80;
  --teal-100: #D6E6E3;

  /* --- Warm neutrals & creams --- */
  --cream-50:  #FBF6EF; /* page background */
  --cream-100: #F5EDE1;
  --sand-200:  #E8DBCB; /* "laranja claro" */
  --peach-300: #FFE4BD; /* favorite warm peach */

  /* --- Gold / orange accent --- */
  --gold-300: #F9DCA6;
  --gold-400: #F4C981; /* "laranja pastel" */
  --gold-500: #EDB85F;
  --gold-600: #D99E3E;

  /* --- Pastel yellow --- */
  --yellow-200: #F6E7A8;

  /* --- Ink & warm greys --- */
  --ink-900: #1A2422;
  --brown-600: #6E5B4A; /* warm secondary text */
  --brown-400: #9C8B79;

  --white: #FFFFFF;

  /* --- Semantic status (harmonized with warm palette) --- */
  --success: #2E8B6F;
  --success-soft: #DCEEE7;
  --warning: #D99E3E;
  --warning-soft: #FBEFD4;
  --danger:  #C8553D; /* warm terracotta — overdue/debt */
  --danger-soft: #F6E0D8;
  --info: var(--teal-700);

  /* ===========================================================
     Semantic aliases — reference these in components
     =========================================================== */
  --brand: var(--teal-800);
  --brand-strong: var(--teal-900);
  --accent: var(--gold-400);
  --accent-strong: var(--gold-500);

  --surface-page:    var(--cream-50);
  --surface-card:    var(--white);
  --surface-muted:   var(--cream-100);
  --surface-warm:    var(--peach-300);
  --surface-inverse: var(--teal-800);

  --text-primary:   var(--teal-900);
  --text-secondary: var(--brown-600);
  --text-muted:     var(--brown-400);
  --text-inverse:   var(--cream-50);
  --text-on-accent: var(--teal-900);

  --border-soft:   #E7DDCF;
  --border-strong: #D8C9B4;
  --ring: color-mix(in oklab, var(--gold-400) 60%, transparent);
}