/* ---------------------------------------------------------------------------
   One palette for both halves of DreamSoft.
 
   The WhatsApp panel and this app are one product on one address, and the
   loudest thing still saying otherwise was the colour: this side was navy and
   indigo, that side WhatsApp's greys and teal.
 
   Rather than rewriting four thousand lines of stylesheet, only the values
   behind this app's own variable names are changed. Every existing rule keeps
   working, unread and unedited, and comes out wearing the other half's colours.
   The names here are CallMitra's; the values are the panel's, taken from its
   app/globals.css so the two cannot drift by hand.
 
   Loaded after style.css, which is what lets it win without !important.
   --------------------------------------------------------------------------- */

:root {
  /* Dark is this app's default, and matches the panel's own dark theme. */
  --bg: #0b141a;
  --panel: #111b21;
  --border: #222d34;
  --text: #e9edef;
  --muted: #8696a0;
  --accent: #00a884;
  --danger: #f15c6d;
  --ok: #0ca30c;
  --warn: #fab219;

  /* The panel's own stack. Deliberately not a webfont: it is the face WhatsApp
     itself uses on each platform, so the inbox reads as native rather than as
     a website pretending to be one — and the rest of the product should not
     disagree with it. */
  --ds-font: "Segoe UI", "Helvetica Neue", Helvetica, "Lucida Grande", Arial,
    Ubuntu, Cantarell, "Fira Sans", system-ui, sans-serif;
}

:root[data-theme="light"] {
  --bg: #f0f2f5;
  --panel: #ffffff;
  --border: #e9edef;
  --text: #111b21;
  --muted: #667781;
  --accent: #008069;
  --danger: #ea0038;
  --ok: #0ca30c;
  --warn: #fab219;
}

body,
button,
input,
select,
textarea {
  font-family: var(--ds-font);
}

/* The display face was doing a lot of the old identity's work, so headings
   follow the rest rather than staying on Plus Jakarta Sans by themselves. */
h1,
h2,
h3,
h4,
.brand,
.sidebar .brand {
  font-family: var(--ds-font);
  letter-spacing: -0.01em;
}

/* The panel is squarer than this app was — 8px on cards, 4px on controls. A
   button that is a pill on one side and a rectangle on the other is the sort
   of difference nobody names but everybody notices. */
.panel,
.card,
.modal {
  border-radius: 8px;
}

.btn,
input,
select,
textarea {
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   The last of the old identity.

   A few surfaces were written as the literal #24284a — the indigo this app
   used to be built around — rather than through a variable, so redefining the
   palette above left them behind: badges and avatars still wearing the old
   colour on the new background. They are pulled onto the shared surface here.

   Written as a small override rather than by editing the rules in place, so
   the whole change to this app's own stylesheet stays in one file that can be
   removed in one go if the direction is ever reconsidered.
   --------------------------------------------------------------------------- */
.badge,
.assistant-card .avatar,
.profile-avatar {
  background: var(--panel-elevated, color-mix(in srgb, var(--text) 10%, transparent));
}

/* The wallet balance and the unanswered count are the two badges that carry a
   number worth noticing, so they take the accent rather than staying grey. */
#walletNavBalance,
#unansweredNavBadge {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}