/* ===========================================================================
   MIRZA CREATIVE — COLOR TOKENS
   A high-contrast editorial palette: near-black ink, warm bone paper, and a
   single hot construction-orange accent. No gradients, no tints beyond the
   handful of dashboard status chips. Restraint is the brand.
   =========================================================================== */

:root {
  /* ---- Base ink & paper ---- */
  --mz-black:        #0a0a0a;   /* primary ink, dark backgrounds            */
  --mz-mid:          #1e1e1e;   /* secondary dark surface (cards on black)  */
  --mz-charcoal:     #111111;   /* "About" / deep section background        */
  --mz-elevated:     #2a2a2a;   /* hover state on dark cards                */
  --mz-white:        #f5f3ef;   /* warm bone — the real "white" of brand    */
  --mz-pure-white:   #ffffff;   /* nav bar / true white where needed        */
  --mz-light-gray:   #e8e6e1;   /* hairline borders, input underlines       */
  --mz-stone:        #6e6c67;   /* muted tier-card surface                  */
  --mz-gray:         #8a8880;   /* warm gray text, captions                 */

  /* ---- Accent ---- */
  --mz-orange:       #e84a0c;   /* THE brand color — CTAs, accents, rules   */
  --mz-orange-dark:  #c43a08;   /* orange pressed / hover-darken            */

  /* ---- Status chips (client portal only) ---- */
  --mz-status-review-bg:    #fff3e0;
  --mz-status-review-fg:    #e65c00;
  --mz-status-progress-bg:  #e8f4fd;
  --mz-status-progress-fg:  #1565c0;
  --mz-status-complete-bg:  #e8f5e9;
  --mz-status-complete-fg:  #2e7d32;

  /* ---- Semantic aliases ---- */
  --color-bg:            var(--mz-white);
  --color-bg-dark:       var(--mz-black);
  --color-bg-deep:       var(--mz-charcoal);
  --color-surface:       var(--mz-mid);
  --color-surface-hover: var(--mz-elevated);

  --color-text:          var(--mz-black);     /* body on light            */
  --color-text-invert:   var(--mz-white);     /* body on dark             */
  --color-text-muted:    var(--mz-gray);      /* captions, secondary      */
  --color-text-faint:    rgba(255,255,255,0.4); /* faint on dark          */

  --color-accent:        var(--mz-orange);
  --color-accent-press:  var(--mz-orange-dark);

  --color-border:        var(--mz-light-gray);
  --color-border-dark:   rgba(255,255,255,0.1);
  --color-rule:          var(--mz-orange);    /* accent rules / underlines */
}