/* ============================================================
   Palma — Color tokens
   Two surfaces by design:
   • Sidebar  → always dark graphite (the navigation rail)
   • Content  → light by default, dark under [data-theme="dark"]
   ============================================================ */

:root {
  /* ---- Base palette ---- */
  --black:        #101216;
  --white:        #ffffff;

  /* Accent — soft blue, used ONLY for active state + key details */
  --blue-50:      #eef4ff;
  --blue-100:     #dbe7ff;
  --blue-200:     #b9d0ff;
  --blue-400:     #5b95f7;
  --blue-500:     #3b82f6;  /* primary accent */
  --blue-600:     #2f6fe0;  /* hover / pressed */
  --blue-700:     #2257bd;

  /* Semantic hues (finance + status) */
  --green-500:    #1ea672;  /* income / positive / on-track */
  --green-600:    #178a5e;
  --green-50:     #e6f6ef;
  --red-500:      #e5484d;  /* expense / debt / overdue */
  --red-600:      #cf3438;
  --red-50:       #fdecec;
  --amber-500:    #e0962b;  /* warning / due soon */
  --amber-50:     #fbf1e2;
  --violet-500:   #7c6cf0;  /* wellbeing / personal accent */
  --violet-50:    #efedfd;

  /* ---- Neutral ramp (warm-cool graphite, light surfaces) ---- */
  --gray-0:       #ffffff;
  --gray-25:      #fbfbfa;
  --gray-50:      #f6f6f4;  /* app background (off-white) */
  --gray-100:     #efefec;
  --gray-150:     #e7e7e3;
  --gray-200:     #dededa;
  --gray-300:     #c8c8c2;
  --gray-400:     #a3a39c;
  --gray-500:     #79798f33; /* (unused placeholder) */
  --gray-600:     #6b6b66;
  --gray-700:     #4a4a45;
  --gray-800:     #2c2c29;
  --gray-900:     #1a1a18;

  /* ============================================================
     SIDEBAR — always-dark navigation rail
     ============================================================ */
  --sidebar-bg:          #15171c;  /* black-bluish graphite */
  --sidebar-bg-elev:     #1b1e24;
  --sidebar-item:        #9aa0a8;  /* idle label */
  --sidebar-item-hover:  #cdd2d8;
  --sidebar-item-active: #f1f3f5;  /* active label */
  --sidebar-icon:        #7f8590;
  --sidebar-active-bg:   #262a31;  /* active pill */
  --sidebar-hover-bg:    #1f2228;
  --sidebar-divider:     rgba(255,255,255,0.07);
  --sidebar-section:     #62666e;  /* group caption */
  --sidebar-accent:      var(--blue-500);

  /* ============================================================
     SEMANTIC ALIASES — LIGHT (content area)
     ============================================================ */
  --bg-app:        var(--gray-50);
  --bg-canvas:     var(--gray-50);
  --surface-card:  var(--gray-0);
  --surface-sunken:var(--gray-100);
  --surface-hover: var(--gray-50);

  --border-hair:   rgba(17,18,22,0.07);
  --border-soft:   rgba(17,18,22,0.10);
  --border-strong: rgba(17,18,22,0.16);

  --text-strong:   var(--gray-900);
  --text-body:     #34342f;
  --text-muted:    var(--gray-600);
  --text-faint:    var(--gray-400);
  --text-on-accent:#ffffff;
  --text-inverse:  #ffffff;

  --accent:        var(--blue-500);
  --accent-hover:  var(--blue-600);
  --accent-soft:   var(--blue-50);
  --accent-tint:   rgba(59,130,246,0.10);
  --accent-ring:   rgba(59,130,246,0.35);

  --positive:      var(--green-500);
  --positive-soft: var(--green-50);
  --negative:      var(--red-500);
  --negative-soft: var(--red-50);
  --warning:       var(--amber-500);
  --warning-soft:  var(--amber-50);

  --focus-ring:    rgba(59,130,246,0.40);
}

/* ============================================================
   SEMANTIC ALIASES — DARK (content area)
   Sidebar tokens stay the same; only the content surfaces flip.
   ============================================================ */
[data-theme="dark"] {
  --bg-app:        #0e0f13;
  --bg-canvas:     #0e0f13;
  --surface-card:  #17191f;
  --surface-sunken:#101216;
  --surface-hover: #1c1f26;

  --border-hair:   rgba(255,255,255,0.07);
  --border-soft:   rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.16);

  --text-strong:   #f1f3f5;
  --text-body:     #d7dade;
  --text-muted:    #9aa0a8;
  --text-faint:    #6b7079;
  --text-on-accent:#ffffff;
  --text-inverse:  #15171c;

  --accent:        var(--blue-500);
  --accent-hover:  var(--blue-400);
  --accent-soft:   rgba(59,130,246,0.14);
  --accent-tint:   rgba(59,130,246,0.16);

  --positive-soft: rgba(30,166,114,0.16);
  --negative-soft: rgba(229,72,77,0.16);
  --warning-soft:  rgba(224,150,43,0.16);
}