/* ============================================================
   Mr Whatsapp — THEME
   ------------------------------------------------------------
   This is the only file you need to edit to recolour the whole
   dashboard. Change a hex, save, refresh. No build step.
   (Only structural changes need `npm run build`.)

   THE ONE RULE: green is the interface, gold is the accent.
   Gold never carries an action — it marks money, the human
   owner, and the brand mark. Everything clickable is green.
   ============================================================ */

:root {
  /* ---- surfaces ---------------------------------------- */
  --mw-paper:      #ffffff;   /* cards, panels                 */
  --mw-paper-2:    #f5f6f2;   /* app background                */
  --mw-paper-3:    #eceee6;   /* hover fills, table stripes    */
  --mw-line:       #e2e5da;   /* borders                       */
  --mw-line-soft:  #eff1ea;   /* internal dividers             */

  /* ---- text -------------------------------------------- */
  --mw-ink:        #191b14;   /* headings                      */
  --mw-ink-2:      #4c5045;   /* body copy                     */
  --mw-muted:      #767b70;   /* labels, helper text           */

  /* ---- green · every action ---------------------------- */
  --mw-green:      #12734e;
  --mw-green-deep: #0c5638;   /* hover / pressed               */
  --mw-green-soft: #e6f1ea;   /* tint fills                    */
  --mw-green-line: #bcd9c9;   /* tinted borders                */
  --mw-green-on:   #ffffff;   /* text on a green fill          */

  /* ---- gold · money, the owner, the brand -------------- */
  --mw-gold:       #b8912f;
  --mw-gold-deep:  #8f6e1c;
  --mw-gold-soft:  #faf3e1;
  --mw-gold-line:  #e6d6a6;

  /* ---- semantic ---------------------------------------- */
  --mw-amber:      #c97a0c;   /* low balance, paused           */
  --mw-amber-soft: #fdf2df;
  --mw-amber-line: #edcf9a;
  --mw-red:        #b3382c;   /* wallet empty, disconnected    */
  --mw-red-soft:   #fbeceb;
  --mw-red-line:   #eec2bd;
  --mw-red-dim:    #c76a60;   /* de-emphasised red text        */
  --mw-blue:       #2c6ba3;   /* neutral info                  */
  --mw-blue-soft:  #eaf2fa;
  --mw-blue-line:  #b9d4ec;
  --mw-gold-dim:   #a8894a;   /* de-emphasised gold text       */
  --mw-muted-dim:  #9aa094;   /* placeholder text              */
  --mw-paper-blur: rgba(255, 255, 255, .85);  /* sticky headers */

  /* ---- depth ------------------------------------------- */
  --mw-shadow-sm: 0 1px 2px rgba(25, 27, 20, .05);
  --mw-shadow:    0 1px 2px rgba(25, 27, 20, .04),
                  0 4px 12px -4px rgba(25, 27, 20, .08);
  --mw-shadow-lg: 0 2px 4px rgba(25, 27, 20, .04),
                  0 12px 32px -8px rgba(25, 27, 20, .14);
  --mw-shadow-xl: 0 4px 8px rgba(25, 27, 20, .04),
                  0 24px 56px -12px rgba(25, 27, 20, .20);
  --mw-ring:      0 0 0 3px rgba(18, 115, 78, .16);
  --mw-ring-gold: 0 0 0 3px rgba(184, 145, 47, .18);

  /* ---- shape ------------------------------------------- */
  --mw-radius-sm: 6px;
  --mw-radius:    10px;
  --mw-radius-lg: 14px;
  --mw-radius-xl: 20px;

  /* ---- motion ------------------------------------------
     These curves are what make the interface feel expensive.
     Change them and everything changes character at once.    */
  --mw-ease:        cubic-bezier(.4, 0, .2, 1);      /* default   */
  --mw-ease-out:    cubic-bezier(.16, 1, .3, 1);     /* entrances */
  --mw-ease-spring: cubic-bezier(.34, 1.4, .64, 1);  /* overshoot */
  --mw-fast:   140ms;
  --mw-normal: 240ms;
  --mw-slow:   420ms;
}

/* ============================================================
   DARK THEME
   Defined but not enabled in v1. To turn it on, remove the
   `[data-theme="dark"]` requirement and add the media query.
   ============================================================ */

:root[data-theme="dark"] {
  --mw-paper:      #1a1d17;
  --mw-paper-2:    #121410;
  --mw-paper-3:    #23271e;
  --mw-line:       #2e3229;
  --mw-line-soft:  #23271e;

  --mw-ink:        #e9ebe2;
  --mw-ink-2:      #b9beae;
  --mw-muted:      #8c9282;

  --mw-green:      #45b083;
  --mw-green-deep: #6ccba3;
  --mw-green-soft: #14291f;
  --mw-green-line: #2a5541;
  --mw-green-on:   #0d1a13;

  --mw-gold:       #dcb662;
  --mw-gold-deep:  #ecd08c;
  --mw-gold-soft:  #2a2314;
  --mw-gold-line:  #55471f;

  --mw-amber:      #e0a03c;
  --mw-amber-soft: #2b2112;
  --mw-amber-line: #5c451c;
  --mw-red:        #e07a6d;
  --mw-red-soft:   #2d1815;
  --mw-red-line:   #5e2f28;
  --mw-red-dim:    #b9635a;
  --mw-blue:       #6fa8d8;
  --mw-blue-soft:  #16232e;
  --mw-blue-line:  #2b4763;
  --mw-gold-dim:   #b8985a;
  --mw-muted-dim:  #6f7566;
  --mw-paper-blur: rgba(26, 29, 23, .85);

  --mw-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --mw-shadow:    0 1px 2px rgba(0, 0, 0, .35), 0 4px 12px -4px rgba(0, 0, 0, .5);
  --mw-shadow-lg: 0 2px 4px rgba(0, 0, 0, .35), 0 12px 32px -8px rgba(0, 0, 0, .6);
  --mw-shadow-xl: 0 4px 8px rgba(0, 0, 0, .35), 0 24px 56px -12px rgba(0, 0, 0, .7);
  --mw-ring:      0 0 0 3px rgba(69, 176, 131, .22);
  --mw-ring-gold: 0 0 0 3px rgba(220, 182, 98, .22);
}