/* ─────────────────────────────────────────────────────────────────────────
   zma-theme.css  v2.0  — Discord-Cosmic token layer
   ZMA IOMS · Blazor WebAssembly + MudBlazor 8

   Load order in index.html:
     1. MudBlazor.min.css
     2. THIS FILE   ← cosmic tokens + --zma-* backward-compat aliases
     3. app.css     ← utilities + component overrides
     4. AlatLabs.Web.styles.css  ← scoped component CSS

   data-theme="dark" (default) / data-theme="light"
   ───────────────────────────────────────────────────────────────────────── */

/* ─── Discord pack palette ────────────────────────────────────────────── */
:root {
  /* Brand */
  --color-blurple:         #5865f2;
  --color-dark-blurple:    #3442d9;
  --color-hover-blurple:   #8891f2;
  --color-spring-green:    #57f287;
  --color-fuchsia:         #eb459e;
  --color-cerulean:        #00b0f4;
  --color-ember-orange:    #fda220;
  --color-ekko-red:        #de2761;
  --color-void:            #000000;
  --color-snow:            #ffffff;
  --color-not-quite-black: #23272a;
  --color-dark-charcoal:   #2c2f33;
  --color-fog:             #babcd9;
  --color-greyple:         #99aab5;
  --color-off-white:       #f6f6f6;

  /* Surfaces (dark default) */
  --surface-cosmic-page:   #0e0f2d;
  --surface-deeper:        #080926;
  --surface-elevated:      #1a1c40;
  --surface-elevated-2:    #252852;
  --surface-line:          rgba(186,188,217,.10);
  --surface-line-strong:   rgba(186,188,217,.18);
  --surface-input:         rgba(255,255,255,.04);

  /* Typography */
  --font-display: 'Nunito','Nunito Sans',ui-sans-serif,system-ui,sans-serif;
  --font-body:    'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;
  --font-mono:    'JetBrains Mono',ui-monospace,Consolas,monospace;

  /* Named radii */
  --radius-buttons:        12px;
  --radius-buttons-lg:     16px;
  --radius-cards:          16px;
  --radius-feature-panels: 24px;
  --radius-pills:          104px;

  /* Motion */
  --motion-fast:  120ms;
  --motion-base:  200ms;
  --motion-slow:  320ms;
  --motion-extra: 520ms;
  --ease-out:     cubic-bezier(.22,.61,.36,1);
  --ease-in-out:  cubic-bezier(.83,0,.17,1);
  --ease-spring:  cubic-bezier(.34,1.56,.64,1);

  /* Spacing (4-pt grid) */
  --space-4:   4px;  --space-8:   8px;  --space-12: 12px; --space-16: 16px;
  --space-20: 20px;  --space-24: 24px;  --space-28: 28px; --space-36: 36px;
  --space-40: 40px;  --space-48: 48px;

  /* Module accent colours */
  --color-mod-imprest:     #0d9488;
  --color-mod-expense:     #f97316;
  --color-mod-transport:   #f59e0b;
  --color-mod-leave:       #16a34a;
  --color-mod-memo:        #475569;

  /* ─── Backward-compat aliases  (old --zma-* → new cosmic values) ────── */
  --zma-primary:         var(--color-blurple);
  --zma-primary-rgb:     88, 101, 242;
  --zma-primary-deep:    var(--color-dark-blurple);
  --zma-bg:              var(--surface-cosmic-page);
  --zma-surface:         var(--surface-elevated);
  --zma-surface-2:       var(--surface-elevated-2);
  --zma-drawer:          var(--color-not-quite-black);
  --zma-appbar:          rgba(14,15,45,0.55);
  --zma-text:            var(--color-snow);
  --zma-text-rgb:        255, 255, 255;
  --zma-text-muted:      var(--color-fog);
  --zma-text-disabled:   rgba(186,188,217,0.38);
  --zma-border:          var(--surface-line);
  --zma-border-hover:    rgba(88,101,242,.35);
  --zma-divider:         var(--surface-line);
  --zma-success:         var(--color-spring-green);
  --zma-warning:         var(--color-ember-orange);
  --zma-danger:          var(--color-ekko-red);
  --zma-info:            var(--color-cerulean);
  --zma-font-body:       var(--font-body);
  --zma-font-mono:       var(--font-mono);
  --zma-radius-sm:       4px;
  --zma-radius-md:       8px;
  --zma-radius-lg:       var(--radius-cards);
  --zma-radius-xl:       var(--radius-feature-panels);
  --zma-transition-fast: var(--motion-fast) var(--ease-out);
  --zma-transition:      var(--motion-base) var(--ease-out);
  --zma-transition-slow: var(--motion-slow) var(--ease-out);

  /* Navy kept for auth-page backward compat */
  --zma-navy:     #001F60;
  --zma-navy-rgb: 0, 31, 96;
  --zma-navy-dark:#00153f;
  --zma-red:      var(--color-ekko-red);
  --zma-red-rgb:  222, 39, 97;
  --zma-blue:     var(--color-blurple);
  --zma-blue-rgb: 88, 101, 242;

  /* Module accent RGB for rgba() inline usage */
  --zma-mod-imprest-rgb:   13, 148, 136;
  --zma-mod-expense-rgb:   249, 115, 22;
  --zma-mod-transport-rgb: 245, 158, 11;
  --zma-mod-leave-rgb:     22, 163, 74;
  --zma-mod-memo-rgb:      71, 85, 105;

  /* ─── MudBlazor structural remaps ─────────────────────────────────────── */
  --mud-default-borderradius:        12px;
  --mud-typography-default-family:   'Plus Jakarta Sans', ui-sans-serif, sans-serif;
  --mud-typography-button-transform: none;
}

/* ─── Light mode token overrides ─────────────────────────────────────────
   Applied when data-theme="light" on <html>
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --surface-cosmic-page: #f4f2ed;
  --surface-elevated:    #ffffff;
  --surface-elevated-2:  #eeece6;
  --surface-line:        rgba(35,39,42,.09);
  --surface-line-strong: rgba(35,39,42,.18);
  --surface-input:       rgba(0,0,0,.03);
  --color-snow:          #1f2226;
  --color-fog:           #5b616b;

  --zma-primary:       var(--color-blurple);
  --zma-primary-rgb:   88, 101, 242;
  --zma-bg:            #f4f2ed;
  --zma-surface:       #ffffff;
  --zma-surface-2:     #eeece6;
  --zma-appbar:        rgba(255,255,255,0.88);
  --zma-text:          #1f2226;
  --zma-text-rgb:      31, 34, 38;
  --zma-text-muted:    #5b616b;
  --zma-text-disabled: #a0a4ae;
  --zma-border:        rgba(35,39,42,.09);
  --zma-border-hover:  rgba(88,101,242,.25);
  --zma-divider:       rgba(35,39,42,.09);
  --zma-success:       #1f7a44;
  --zma-warning:       #a86214;
}

/* ─── Module colour utility classes ──────────────────────────────────────
   Use on icon containers and KPI card accents.
   ───────────────────────────────────────────────────────────────────────── */
.zma-icon--imprest   { background: rgba(13,148,136,.12);  color: var(--color-mod-imprest);   }
.zma-icon--expense   { background: rgba(249,115,22,.12);  color: var(--color-mod-expense);   }
.zma-icon--transport { background: rgba(245,158,11,.12);  color: var(--color-mod-transport); }
.zma-icon--leave     { background: rgba(22,163,74,.12);   color: var(--color-mod-leave);     }
.zma-icon--memo      { background: rgba(71,85,105,.12);   color: var(--color-mod-memo);      }

.zma-kpi--primary   { border-top: 3px solid var(--color-blurple)       !important; }
.zma-kpi--imprest   { border-top: 3px solid var(--color-mod-imprest)   !important; }
.zma-kpi--expense   { border-top: 3px solid var(--color-mod-expense)   !important; }
.zma-kpi--transport { border-top: 3px solid var(--color-mod-transport) !important; }
.zma-kpi--leave     { border-top: 3px solid var(--color-mod-leave)     !important; }
.zma-kpi--memo      { border-top: 3px solid var(--color-mod-memo)      !important; }
.zma-kpi--danger    { border-top: 3px solid var(--color-ekko-red)      !important; }
.zma-kpi--warning   { border-top: 3px solid var(--color-ember-orange)  !important; }

.zma-nav-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.zma-nav-dot--imprest   { background: var(--color-mod-imprest);   }
.zma-nav-dot--expense   { background: var(--color-mod-expense);   }
.zma-nav-dot--transport { background: var(--color-mod-transport); }
.zma-nav-dot--leave     { background: var(--color-mod-leave);     }
.zma-nav-dot--memo      { background: var(--color-mod-memo);      }

/* ─── Typography utilities ────────────────────────────────────────────── */
.zma-num   { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.zma-ref   { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .8125rem; letter-spacing: .01em; }
.zma-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .10em; color: var(--zma-text-muted); line-height: 1; }

/* ─── Icon containers ─────────────────────────────────────────────────── */
.zma-icon-ring {
  width: 36px; height: 36px;
  border-radius: var(--zma-radius-md);
  border: 1px solid rgba(88,101,242,.20);
  background: rgba(88,101,242,.08);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.zma-icon-sq {
  width: 32px; height: 32px;
  border-radius: var(--zma-radius-sm);
  background: rgba(88,101,242,.10);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ─── Card utilities ──────────────────────────────────────────────────── */
.zma-card {
  background: rgba(88,101,242,.03);
  border: 1px solid var(--zma-border);
  border-radius: var(--radius-cards);
}
.zma-card-hover:hover {
  border-color: var(--zma-border-hover) !important;
  background: rgba(88,101,242,.05) !important;
  transition: border-color var(--zma-transition), background var(--zma-transition);
}

/* ─── Status colour utilities ──────────────────────────────────────────── */
.zma-status--success { color: var(--zma-success); }
.zma-status--warning { color: var(--zma-warning); }
.zma-status--danger  { color: var(--zma-danger);  }
.zma-status--info    { color: var(--zma-info);    }
.zma-status--muted   { color: var(--zma-text-muted); }

.mud-chip.zma-chip--muted {
  background: rgba(186,188,217,.08) !important;
  color: var(--zma-text-muted) !important;
}

.zma-glow-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--zma-primary);
  box-shadow: 0 0 8px rgba(88,101,242,.60);
}