/*!
 * MB Computers — dark neon theme (reusable core)
 * Variables, fonts, base typography, buttons, cards, forms, badges, tables.
 * Safe to load on its own (e.g. in a Blesta client area); layout lives in site.css.
 * Font paths are relative to this file: ../fonts/
 */

/* ---------- Fonts (self-hosted, SIL OFL) ---------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-600.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/inter-700.woff2") format("woff2")}
@font-face{font-family:"Exo 2";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/exo-2-600.woff2") format("woff2")}
@font-face{font-family:"Exo 2";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/exo-2-800.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jetbrains-mono-500.woff2") format("woff2")}

/* ---------- Tokens ---------- */
:root{
  color-scheme:dark;
  /* surfaces */
  --mbc-bg:#060a17;            /* page */
  --mbc-bg-2:#0a1024;          /* alt band */
  --mbc-surface:#0e1630;       /* cards */
  --mbc-surface-2:#131d3d;     /* raised / hover */
  --mbc-border:rgba(120,170,255,.16);
  --mbc-border-strong:rgba(31,209,255,.45);
  /* text */
  --mbc-text:#dbe4f3;          /* 14.9:1 on bg */
  --mbc-text-muted:#9fb0cc;    /* 8.6:1 on bg */
  --mbc-text-dim:#7d8db0;
  --mbc-heading:#f4f8ff;
  /* brand */
  --mbc-cyan:#1fd1ff;
  --mbc-cyan-600:#0bb4e6;
  --mbc-blue:#3d7bff;
  --mbc-magenta:#b84dff;
  --mbc-magenta-text:#d29bff;  /* magenta tuned for text contrast */
  --mbc-success:#3ee39a;
  --mbc-warning:#ffc857;
  --mbc-danger:#ff5d7a;
  /* effects */
  --mbc-glow-cyan:0 0 .5rem rgba(31,209,255,.45),0 0 1.75rem rgba(31,209,255,.18);
  --mbc-glow-magenta:0 0 .5rem rgba(184,77,255,.45),0 0 1.75rem rgba(184,77,255,.18);
  --mbc-gradient:linear-gradient(90deg,var(--mbc-cyan),var(--mbc-blue) 50%,var(--mbc-magenta));
  --mbc-chrome:linear-gradient(180deg,#ffffff 0%,#e6eefb 38%,#9fb2cf 52%,#dfe9f8 64%,#ffffff 100%);
  /* type */
  --mbc-font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mbc-font-display:"Exo 2","Inter",system-ui,sans-serif;
  --mbc-font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* shape */
  --mbc-radius:14px;
  --mbc-radius-sm:8px;
  --mbc-radius-pill:999px;
  --mbc-shadow:0 10px 30px rgba(0,0,0,.35);
  --mbc-focus:0 0 0 3px var(--mbc-bg),0 0 0 5px var(--mbc-cyan);
}

/* ---------- Base ---------- */
.mbc, body.mbc{background:var(--mbc-bg);color:var(--mbc-text);font-family:var(--mbc-font-body);font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased}
.mbc h1,.mbc h2,.mbc h3,.mbc h4{font-family:var(--mbc-font-display);color:var(--mbc-heading);line-height:1.15;letter-spacing:.01em;margin:0 0 .6em}
.mbc a{color:var(--mbc-cyan);text-underline-offset:.18em}
.mbc a:hover{color:#7fe6ff}
.mbc :focus-visible{outline:none;box-shadow:var(--mbc-focus);border-radius:4px}
.mbc ::selection{background:rgba(31,209,255,.3);color:#fff}

/* chrome heading effect (falls back to solid colour) */
.mbc-chrome{color:var(--mbc-heading)}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .mbc-chrome{background:var(--mbc-chrome);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(31,209,255,.18))}
}
.mbc-gradient-text{color:var(--mbc-cyan)}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .mbc-gradient-text{background:linear-gradient(90deg,#4fe0ff,#8fa8ff 55%,#d29bff);-webkit-background-clip:text;background-clip:text;color:transparent}
}
.mbc-eyebrow{font-family:var(--mbc-font-mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mbc-cyan)}

/* ---------- Buttons ---------- */
.mbc-btn,.mbc .btn-mbc{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:44px;padding:.7em 1.3em;border-radius:var(--mbc-radius-pill);font:600 .95rem/1.2 var(--mbc-font-body);text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .15s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease}
.mbc-btn:hover{transform:translateY(-1px)}
.mbc-btn--primary{background:var(--mbc-cyan);color:#041021 !important;box-shadow:var(--mbc-glow-cyan)}
.mbc-btn--primary:hover{background:#5fe0ff}
.mbc-btn--secondary{background:transparent;color:var(--mbc-heading) !important;border-color:var(--mbc-border-strong)}
.mbc-btn--secondary:hover{background:rgba(31,209,255,.08);box-shadow:var(--mbc-glow-cyan)}
.mbc-btn--magenta{background:linear-gradient(135deg,#9a3dff,var(--mbc-magenta));color:#fff !important;box-shadow:var(--mbc-glow-magenta)}
.mbc-btn--ghost{background:rgba(255,255,255,.04);color:var(--mbc-text) !important;border-color:var(--mbc-border)}
.mbc-btn--sm{min-height:36px;padding:.45em 1em;font-size:.875rem}
@media (prefers-reduced-motion:reduce){.mbc-btn{transition:none}.mbc-btn:hover{transform:none}}

/* ---------- Cards / panels ---------- */
.mbc-card{position:relative;background:linear-gradient(180deg,rgba(19,29,61,.85),rgba(12,19,42,.9));border:1px solid var(--mbc-border);border-radius:var(--mbc-radius);padding:1.5rem;box-shadow:var(--mbc-shadow)}
.mbc-card--glow{border-color:var(--mbc-border-strong);box-shadow:var(--mbc-shadow),inset 0 0 0 1px rgba(31,209,255,.08),0 0 2rem rgba(31,209,255,.08)}
.mbc-card--magenta{border-color:rgba(184,77,255,.45);box-shadow:var(--mbc-shadow),0 0 2rem rgba(184,77,255,.1)}

/* ---------- Badges / tags ---------- */
.mbc-badge{display:inline-block;padding:.2em .7em;border-radius:var(--mbc-radius-pill);font:500 .75rem/1.5 var(--mbc-font-mono);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--mbc-border-strong);color:var(--mbc-cyan);background:rgba(31,209,255,.07)}
.mbc-badge--magenta{border-color:rgba(184,77,255,.5);color:var(--mbc-magenta-text);background:rgba(184,77,255,.08)}
.mbc-badge--warning{border-color:rgba(255,200,87,.5);color:var(--mbc-warning);background:rgba(255,200,87,.08)}

/* ---------- Forms ---------- */
.mbc input[type=text],.mbc input[type=email],.mbc input[type=tel],.mbc input[type=password],.mbc input[type=number],.mbc input[type=search],.mbc select,.mbc textarea,.mbc-input{width:100%;min-height:44px;padding:.65em .9em;background:#0a1128;color:var(--mbc-text);border:1px solid var(--mbc-border);border-radius:var(--mbc-radius-sm);font:inherit}
.mbc input:focus,.mbc select:focus,.mbc textarea:focus,.mbc-input:focus{outline:none;border-color:var(--mbc-cyan);box-shadow:0 0 0 3px rgba(31,209,255,.25)}
.mbc label{color:var(--mbc-text-muted);font-weight:600;font-size:.9rem}

/* ---------- Tables ---------- */
.mbc-table{width:100%;border-collapse:collapse;font-size:.95rem}
.mbc-table th,.mbc-table td{padding:.7em .9em;border-bottom:1px solid var(--mbc-border);text-align:left}
.mbc-table th{font:600 .78rem/1.4 var(--mbc-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mbc-cyan)}
.mbc-table tbody tr:hover{background:rgba(31,209,255,.04)}

/* ---------- Alerts ---------- */
.mbc-alert{padding:1rem 1.2rem;border-radius:var(--mbc-radius-sm);border:1px solid var(--mbc-border-strong);background:rgba(31,209,255,.06)}
.mbc-alert--warning{border-color:rgba(255,200,87,.5);background:rgba(255,200,87,.07)}

/* ---------- Placeholder marker (content still to be supplied) ---------- */
.mbc-placeholder{border:1px dashed var(--mbc-magenta);background:repeating-linear-gradient(135deg,rgba(184,77,255,.06) 0 10px,transparent 10px 20px);border-radius:var(--mbc-radius-sm);padding:.8rem 1rem;color:var(--mbc-magenta-text)}
.mbc-placeholder::before{content:"PLACEHOLDER";display:block;font:600 .7rem/1.4 var(--mbc-font-mono);letter-spacing:.18em;color:var(--mbc-magenta-text);margin-bottom:.25rem}