/* ============================================================
   INTERLOCK — primitives: reusable building blocks
   Compose these in markup; component files only add specifics.

   .btn / .btn-sm / .btn-ghost   action button
   .kicker                        mono section label with rule
   .panel                         bordered surface on raised bg
   .cellgrid                      1px-gap cell group (grid or flex)
   .input                         mono text input
   ============================================================ */

/* ---- button ---- */
.btn{
  display:inline-block;
  font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bg);background:var(--green);
  border:1px solid var(--green);
  padding:12px 26px;text-decoration:none;cursor:pointer;
  transition:background .2s,color .2s,box-shadow .2s;
}
.btn:hover{background:transparent;color:var(--green);box-shadow:0 0 24px rgba(54,242,139,.25)}
.btn-sm{padding:9px 18px;font-size:11px}
.btn-ghost{background:transparent;color:var(--green)}
.btn-ghost:hover{background:var(--green);color:var(--bg)}

/* ---- kicker: mono label with leading rule ---- */
.kicker{
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--green);
  display:flex;align-items:center;gap:12px;
}
.kicker::before{content:'';width:32px;height:1px;background:var(--green)}
.eyebrow{margin-bottom:28px}
.sec-label{margin-bottom:20px}

/* ---- panel: bordered raised surface ---- */
.panel{
  border:1px solid var(--line-bright);
  background:var(--bg-2);
}

/* ---- cellgrid: cells separated by 1px lines, hover-raise ---- */
.cellgrid{gap:1px;background:var(--line);border:1px solid var(--line)}
.cellgrid>*{background:var(--bg)}
.cellgrid>*:hover{background:var(--bg-2)}

/* ---- input ---- */
.input{
  background:var(--bg-2);border:1px solid var(--line-bright);color:var(--text);
  font-family:var(--mono);font-size:13px;padding:13px 16px;outline:none;
  transition:border-color .2s;
}
.input::placeholder{color:var(--text-faint)}
.input:focus{border-color:var(--green)}