/* ============================================================
   XPERTS PORTAL — shared design tokens & primitives
   Used by index.html (hub) and login.html (sign-in).
   Add a product = add an entry in registry.js + a
   [data-theme] block below.
   ============================================================ */

:root{
  --paper:#FFFFFF;
  --ink:#0C1512;
  --ink-2:#3E4A45;
  --ink-3:#7A8781;
  --line:#DFE6E2;
  --field:#F1F5F3;
  --danger:#B3261E;
  --gutter:clamp(44px,8vh,96px);
  --cardpad:clamp(26px,3vw,38px);
  --radius:14px;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* neutral house colours — overridden per product */
  --brand:#2E9E75;
  --brand-ink:#1A6B4E;
}

/* ---- brand themes ---------------------------------------- */
[data-theme="mining"]   { --brand:#45C46B; --brand-ink:#12793A; }
[data-theme="hydrox"]   { --brand:#4AA3CC; --brand-ink:#1A6A8E; }
[data-theme="solarx"]   { --brand:#3FA96C; --brand-ink:#1B7549; }
[data-theme="xtims"]    { --brand:#4F9E85; --brand-ink:#256B58; }
[data-theme="legalx"]   { --brand:#1D8A5F; --brand-ink:#006039; }
[data-theme="maintainx"]{ --brand:#7CB742; --brand-ink:#48761D; }
[data-theme="techfarm"] { --brand:#A8B84B; --brand-ink:#66741C; }
[data-theme="ivms"]     { --brand:#2FC2A8; --brand-ink:#0E7362; }
[data-theme="evlease"]  { --brand:#2FA37A; --brand-ink:#0E6B4A; }
[data-theme="evcharge"] { --brand:#3FCB6E; --brand-ink:#15803D; }
[data-theme="ticketx"]  { --brand:#2E8B62; --brand-ink:#14523B; }
[data-theme="kaixen"]   { --brand:#2F9E68; --brand-ink:#166B45; }
[data-theme="xcelerate"]{ --brand:#3BA871; --brand-ink:#1A5C3A; }
[data-theme="osa"]      { --brand:#5A63CC; --brand-ink:#2A2F86; }
[data-theme="visitor"]  { --brand:#54A88C; --brand-ink:#26705A; }
[data-theme="xpats"]    { --brand:#2E9E77; --brand-ink:#125843; }
[data-theme="loranet"]  { --brand:#35C9A5; --brand-ink:#0F7A64; }
[data-theme="xdrive"]   { --brand:#1FA3B5; --brand-ink:#0A6875; }
/* the portal itself */
[data-theme="portal"]   { --brand:#2E9E75; --brand-ink:#1A6B4E; }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 16px/1.55 "IBM Plex Sans",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---- shared type ------------------------------------------ */
.wordmark{
  font-family:Archivo,system-ui,sans-serif;
  font-weight:800;
  font-stretch:112%;
  letter-spacing:-.02em;
  line-height:1;
  margin:0;
}
.wordmark .tail{color:var(--brand-ink)}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}

/* ---- chevron mark ----------------------------------------- */
.mark{flex:none;overflow:visible}
.mark .chev-a,.mark .chev-b{transition:transform .7s var(--ease)}
.mark .chev-a{fill:var(--ink)}
.mark .chev-b{fill:var(--brand)}
.opened .mark .chev-a{transform:translateX(-7px)}
.opened .mark .chev-b{transform:translateX(7px)}

/* ---- ambient chevron field + light sweep ------------------ */
.field{position:absolute;inset:-10%;pointer-events:none;
  -webkit-mask-image:radial-gradient(120% 90% at 20% 12%,#000 15%,transparent 72%);
          mask-image:radial-gradient(120% 90% at 20% 12%,#000 15%,transparent 72%);
  transition:transform .9s var(--ease)}
.field rect{fill:transparent}
.field .p1{fill:var(--brand);opacity:.14}
.field .p2{fill:var(--brand);opacity:.07}
.sweep{position:absolute;inset:-40%;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,color-mix(in srgb,var(--brand) 10%,transparent) 50%,transparent 58%);
  animation:sweep 9s linear infinite}
@keyframes sweep{from{transform:translate3d(-30%,-10%,0)}to{transform:translate3d(30%,10%,0)}}

/* ---- motion ----------------------------------------------- */
@keyframes rise{to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ---- status rail ------------------------------------------ */
.rail{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin:0;
}
.rail .sep{opacity:.3}
.dot{width:7px;height:7px;border-radius:50%;background:var(--brand-ink);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 70%,transparent);
  animation:pulse 2.4s ease-out infinite}

/* ---- buttons ---------------------------------------------- */
.btn{
  width:100%;border:0;border-radius:10px;cursor:pointer;
  font:600 15px/1 "IBM Plex Sans",sans-serif;
  padding:15px 18px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:transform .12s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
}
.btn:focus-visible{outline:2px solid var(--brand-ink);outline-offset:3px}
.btn-primary{
  position:relative;overflow:hidden;
  background:var(--brand-ink);color:#fff;
  box-shadow:0 8px 20px -12px color-mix(in srgb,var(--brand-ink) 80%,transparent);
}
.btn-primary:hover{background:color-mix(in srgb,var(--brand-ink) 88%,#000);
  box-shadow:0 12px 26px -12px color-mix(in srgb,var(--brand-ink) 90%,transparent)}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:#C3CFC9;background:#FAFBFA}

.spinner{
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:spin .7s linear infinite;display:none;
}
[data-state="pending"] .spinner{display:block}
.btn-check{display:none}
[data-state="done"] .btn-check{display:block}

/* ---- accessibility ---------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001s!important;animation-delay:0s!important;
    transition-duration:.001s!important;
  }
  .sweep{display:none}
}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}