/* ==========================================================================
   MZAZI TECH — theme for Pterodactyl
   Tokens mirrored exactly from https://mzazi.shop  :root
   File:   /var/www/pterodactyl/public/theme/mzazi.css
   Linked: resources/views/templates/wrapper.blade.php
   REVERT: remove the mzazi.css <link> from wrapper.blade.php, then
           php artisan view:clear   (original: /root/wrapper.blade.php.orig)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --mz-bg:#0b0d0f;
  --mz-bg-2:#0f1215;
  --mz-surface:#14181d;
  --mz-surface-2:#1a1f25;
  --mz-line:#262c33;
  --mz-line-soft:#1b2026;
  --mz-ink:#e9e7e2;
  --mz-ink-2:#aeb5bd;
  --mz-muted:#79818a;
  --mz-dim:#4c535b;
  --mz-amber:#f2a93b;
  --mz-amber-deep:#c97f1e;
  --mz-cobalt:#4c7dfc;
  --mz-red:#e5484d;
  --mz-green:#3ecf8e;
  --mz-font-display:"Space Grotesk","Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mz-font-body:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mz-font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- base ---------- */
html,body{
  background-color:var(--mz-bg) !important;
  color:var(--mz-ink) !important;
  font-family:var(--mz-font-body) !important;
}
h1,h2,h3,h4,h5,h6,.font-header{font-family:var(--mz-font-display) !important;letter-spacing:-.01em}
code,kbd,pre,samp,.font-mono{font-family:var(--mz-font-mono) !important}
::selection{background:var(--mz-amber);color:#14100a}
a{color:var(--mz-amber)}
a:hover{color:var(--mz-amber-deep)}

/* ---------- surfaces (whole ramp collapsed into mzazi's dark set) ---------- */
html body .bg-neutral-50,html body .bg-gray-50{background-color:var(--mz-bg) !important}
html body .bg-white{background-color:var(--mz-surface) !important}
html body .bg-neutral-100{background-color:var(--mz-surface) !important}
html body .bg-neutral-400,html body .bg-neutral-500{background-color:var(--mz-line) !important}
html body .bg-gray-600,html body .bg-gray-700,
html body .bg-neutral-600,html body .bg-neutral-700{background-color:var(--mz-surface-2) !important}
html body .bg-gray-800,html body .bg-neutral-800{background-color:var(--mz-surface-2) !important}
html body .bg-gray-900,html body .bg-neutral-900,html body .bg-black{background-color:var(--mz-bg-2) !important}
/* accent */
html body .bg-cyan-400{background-color:var(--mz-amber) !important}
html body .bg-cyan-800{background-color:var(--mz-amber-deep) !important}

/* opacity-modified surface variants (e.g. bg-neutral-900/50) */
[class*="bg-neutral-900/"]{background-color:rgb(15 18 21 / .55) !important}
[class*="bg-neutral-800/"]{background-color:rgb(20 24 29 / .6) !important}
[class*="bg-gray-900/"]{background-color:rgb(15 18 21 / .55) !important}
[class*="bg-gray-800/"]{background-color:rgb(20 24 29 / .6) !important}
[class*="bg-black/"]{background-color:rgb(11 13 15 / .6) !important}
[class*="bg-white/"]{background-color:rgb(233 231 226 / .08) !important}

/* ---------- text ---------- */
html body .text-gray-50,html body .text-gray-100,html body .text-gray-200,
html body .text-neutral-50,html body .text-neutral-100,html body .text-neutral-200,
html body .text-neutral-800,html body .text-neutral-900,html body .text-white{color:var(--mz-ink) !important}
html body .text-gray-300,html body .text-neutral-300,
html body .text-neutral-600,html body .text-neutral-700{color:var(--mz-ink-2) !important}
html body .text-gray-400,html body .text-gray-500,
html body .text-neutral-400,html body .text-neutral-500{color:var(--mz-muted) !important}
html body .text-cyan-100,html body .text-cyan-200{color:#ffc96b !important}
html body .text-cyan-400{color:var(--mz-amber) !important}

/* ---------- borders / dividers ---------- */
html body .border-black,html body .border-gray-800,
html body .border-neutral-200,html body .border-neutral-300,html body .border-neutral-400,
html body .border-neutral-500,html body .border-neutral-600,html body .border-neutral-700{border-color:var(--mz-line) !important}
html body .border-neutral-800,html body .border-neutral-900{border-color:var(--mz-line-soft) !important}
html body .border-cyan-400,html body .border-cyan-500{border-color:var(--mz-amber) !important}
html body .divide-neutral-200>*,html body .divide-neutral-300>*,
html body .divide-neutral-700>*,html body .divide-gray-700>*{border-color:var(--mz-line) !important}

/* ---------- form controls ---------- */
input,select,textarea{
  background-color:var(--mz-bg-2) !important;
  border-color:var(--mz-line) !important;
  color:var(--mz-ink) !important;
}
input::placeholder,textarea::placeholder{color:var(--mz-muted) !important}
input:focus,select:focus,textarea:focus{
  border-color:var(--mz-amber) !important;
  box-shadow:0 0 0 3px rgb(242 169 59 / .18) !important;
  outline:none !important;
}

/* ---------- semantic statuses ---------- */
.text-green-400,.text-green-500,.text-green-600{color:var(--mz-green) !important}
.text-red-400,.text-red-500,.text-red-600,.text-red-700{color:var(--mz-red) !important}
.text-yellow-400,.text-yellow-500,.text-amber-400,.text-amber-500{color:var(--mz-amber) !important}

/* ---------- scrollbars, focus ---------- */
*{scrollbar-color:var(--mz-line) var(--mz-bg)}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:var(--mz-bg-2)}
*::-webkit-scrollbar-thumb{background:var(--mz-line);border-radius:6px}
*::-webkit-scrollbar-thumb:hover{background:var(--mz-dim)}
*:focus-visible{outline:2px solid var(--mz-amber);outline-offset:1px}

/* ---------- tables / code blocks ---------- */
table{color:var(--mz-ink)}
pre,code{background-color:var(--mz-bg-2);color:var(--mz-ink-2)}