/* ================================================================
   Zoro shared design tokens + primitives.

   Loaded by every public HTML page and used by resources/share-cta.js
   (via the .btn-primary / .input-base classes). Page-specific layout
   stays inline in each HTML file; what's here is the visual language
   that should be identical everywhere.
   ================================================================ */

:root{
  --ground:#080B10;
  --ground-2:#0B0E13;
  --surface-1:#0F1318;
  --surface-2:#12171D;

  --border:#232932;
  --border-subtle:rgba(35,41,50,.55);
  --border-dim:#181C22;

  --accent:#00D4A0;
  --accent-text:#34D399;
  --accent-fill:#2EA96E;
  --accent-soft:rgba(0,212,160,.10);

  --text:#ECF0F6;
  --text-2:#A6AFB9;
  --text-3:#6A747E;
  --text-4:#3F464E;

  --negative:#EF4444;

  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --display:'Outfit', 'Helvetica Neue', system-ui, sans-serif;
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  background:var(--ground);
  color:var(--text);
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ----------------------------------------------------------------
   Primary CTA button. The single canonical primary button used
   across the post-signup form, the share-cta copy buttons, etc.
   ---------------------------------------------------------------- */
.btn-primary{
  background:var(--accent);
  color:#05221B;
  border:0;
  padding:12px 24px;
  border-radius:2px;
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s, transform .2s;
}
.btn-primary:hover{background:#0EE2AF;transform:translateY(-1px)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-primary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Secondary button — same geometry as .btn-primary so they line up
   on the same row. Used for Reset / Cancel actions where green
   would be too loud. */
.btn-secondary{
  background:transparent;
  color:var(--text-3);
  border:1px solid var(--border);
  padding:12px 24px;
  border-radius:2px;
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .2s, border-color .2s;
}
.btn-secondary:hover{color:var(--text);border-color:var(--text-3)}
.btn-secondary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ----------------------------------------------------------------
   Standard text/email input — matches .field-input on the landing
   page so every input field has the same chrome.
   ---------------------------------------------------------------- */
.input-base{
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:3px;
  padding:8px 10px;
  color:var(--text);
  /* Explicit font-size — `font: inherit` was picking up 28px from
     .thankyou on the post-signup screen. */
  font-family:var(--mono);
  font-size:13px;
  line-height:1.4;
}
.input-base:focus{outline:none;border-color:var(--accent)}