/* Shared design tokens and base components for The Biggest Gym's
   staff and member portals — kept in sync with index.html's visual system
   (same custom properties, same fonts, same button/card treatment). */

:root{
  --ink:#f5f1e6;
  --ink-dim:#a8a49a;
  --bg:#121110;
  --bg-raised:#1b1a18;
  --bg-raised-2:#211f1c;
  --line: rgba(245,241,230,0.12);
  --yellow:#F6C500;
  --yellow-dim:#7a6300;
  --steel:#3a3d42;
  /* status colors, not part of the public site, needed only in the portals */
  --green:#3DD68C;
  --orange:#FF9F43;
  --red:#FF6B5E;
}

*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background-color:var(--bg);
  color:var(--ink);
  font-family:'Inter',"Helvetica Neue",Arial,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--yellow); text-decoration:none;}
h1,h2,h3{
  font-family:'Anton', Impact, sans-serif;
  line-height:1.05;
  letter-spacing:0.01em;
  font-weight:400;
  text-transform:uppercase;
  margin:0;
}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}

.brand{font-family:'Anton',Impact,sans-serif; letter-spacing:0.01em; display:flex; align-items:center; gap:10px;}
.brand span{color:var(--yellow);}

.kicker{color:var(--yellow); font-size:13px; font-weight:800; margin-bottom:14px; text-transform:uppercase; letter-spacing:0.1em;}

.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--yellow); color:#141210; padding:15px 28px 15px 22px; font-weight:800; font-size:14px;
  text-transform:uppercase; letter-spacing:0.04em; border:0; cursor:pointer;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 14px 100%);
  transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-primary:hover{background:#ffd633; transform:translateY(-3px); box-shadow:0 12px 26px rgba(246,197,0,.28);}
.btn-primary:active{transform:translateY(-1px);}
.btn-primary:disabled{opacity:.5; cursor:default; transform:none; box-shadow:none;}

.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--line); background:transparent; color:var(--ink); padding:15px 28px 15px 22px;
  font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:0.04em; cursor:pointer;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 14px 100%);
  transition:border-color .2s ease, transform .2s ease, background-color .2s ease;
}
.btn-ghost:hover{border-color:var(--ink-dim); transform:translateY(-3px); background:rgba(255,255,255,.04);}

.btn-small{padding:9px 16px 9px 13px; font-size:12px; clip-path:polygon(0 0, 100% 0, 100% 100%, 8px 100%);}

.card{
  background:var(--bg-raised); border:1px solid var(--line); border-radius:2px; padding:28px;
}

.badge{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; padding:3px 9px; background:rgba(168,164,154,.15); color:var(--ink-dim); border-radius:2px;}
.badge.ok{background:rgba(61,214,140,.15); color:var(--green);}
.badge.warn{background:rgba(255,159,67,.15); color:var(--orange);}
.badge.bad{background:rgba(255,107,94,.15); color:var(--red);}
.badge.y{background:var(--yellow); color:#141210;}

label{display:block; font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--ink-dim); margin:12px 0 6px;}
input,select,textarea{
  width:100%; min-height:46px; padding:10px 13px; background:var(--bg); color:var(--ink);
  border:1px solid var(--line); font:inherit; border-radius:2px;
}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--yellow); outline-offset:1px;}
textarea{min-height:96px; resize:vertical;}

.muted{color:var(--ink-dim);}
.small{font-size:13px;}

.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:999;
  background:var(--ink); color:#141210; padding:12px 18px; font-weight:700; border-radius:2px; max-width:90vw;
}
.toast.err{background:var(--red); color:#fff;}

.empty{padding:28px; text-align:center; color:var(--ink-dim); border:1px dashed var(--line); border-radius:2px;}

.portal-shell{min-height:100vh;}
.portal-topbar{
  position:sticky; top:0; z-index:40; background:rgba(18,17,16,0.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.portal-topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:68px;}
.portal-topbar .brand{font-size:16px;}
.portal-topbar .brand img{width:34px; height:34px; border-radius:50%; object-fit:cover;}

.setup-screen, .signin-screen{
  min-height:100vh; display:grid; place-items:center; padding:28px;
}
.setup-screen .box, .signin-screen .box{width:min(460px,100%);}
.setup-screen .brand, .signin-screen .brand{font-size:clamp(28px,5vw,40px); margin-bottom:8px;}