/* RemDev Chat — shared theme.

   One place for the palette, the type and the shared controls, so every page
   agrees on them. Layout stays in each page's own <style>, because the pages
   genuinely differ.

   Two sets of token names live here on purpose. The pages were written at
   different times against different names (--paper, --hairline, --accent in
   one; --bg-soft, --border in another). Rather than rewrite every rule in
   every page, the older names are aliased onto the current palette — so
   changing a colour here still changes it everywhere. Prefer the names in
   the first block when writing new CSS. */

:root{
  /* ---- surfaces ---- */
  --bg:#FFFFFF;
  --bg-soft:#f7f7f7;
  --bg-elev:#f0f0f0;
  --white:#FFFFFF;
  --surface:#FFFFFF;
  --card:#FFFFFF;
  --card-text:#FFFFFF;

  /* ---- lines ---- */
  --border:#e5e5e5;
  --border-strong:#bcbcbc;

  /* ---- text ---- */
  --ink:#141414;
  --text:#141414;
  --text-muted:#555555;
  --text-faint:#666666;

  /* ---- brand ----
     Red is the shared brand accent, paired with white surfaces and black text. */
  --accent:#d5262e;
  --accent-deep:#b51922;
  --accent-soft:rgba(213, 38, 46,0.10);
  --red:#D6402D;
  --red-deep:#B32E1D;

  /* ---- status ---- */
  --green:#2E7D4F;
  --danger:#B3372A;
  --danger-veil:#FBEBE7;
  --amber:#8A5B12;
  --amber-veil:#FDF4E3;

  /* ---- aliases ----
     Older names used by the page styles. Kept so existing rules keep
     working and still follow the palette above. */
  --paper:#f7f7f7;
  --canvas:#f7f7f7;
  --hairline:#e5e5e5;
  --ink-faint:#555555;
  --ink-mid:#555555;
  --accent-veil:rgba(213, 38, 46,0.10);
  --red-veil:#FCEAE6;
  --green-ok:#2E7D4F;

  /* ---- type ---- */
  --font:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius-pill:100px;
  --radius:12px;
}

*{box-sizing:border-box;margin:0;padding:0;}

body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.1;
  color:var(--text);
}

a{color:inherit;}
img,svg{max-width:100%;display:block;}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}

/* ---- buttons ----
   Primary buttons are near-black and turn blue on hover. That reads calmer
   than a fully saturated button on every screen, and keeps blue meaningful
   as the "this is active" colour rather than the default one. */
.btn{
  font-family:var(--font);font-size:15px;font-weight:600;
  padding:14px 26px;border-radius:var(--radius-pill);text-decoration:none;
  display:inline-block;cursor:pointer;border:1px solid transparent;
  transition:background 0.15s ease,border-color 0.15s ease,color 0.15s ease;
}
.btn-primary{background:var(--ink);color:#fff;}
.btn-primary:hover{background:var(--accent);}
.btn-secondary{background:transparent;border-color:var(--border-strong);color:var(--ink);}
.btn-secondary:hover{border-color:var(--ink);}
.btn-white{background:#fff;color:var(--ink);}
.btn-white:hover{background:var(--accent);color:#fff;}
.btn:disabled{opacity:.65;cursor:default;}

/* ---- form controls ----
   Shared so a field looks the same on signup, login and checkout. */
.field{margin-bottom:20px;}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;}
.field .hint{font-size:12.5px;color:var(--text-muted);margin-bottom:8px;line-height:1.45;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:520px){ .field-row{grid-template-columns:1fr;} }

input, textarea, select{
  width:100%;font-family:var(--font);font-size:14.5px;
  padding:11px 13px;border-radius:10px;border:1px solid var(--border);
  background:var(--card);color:var(--ink);outline:none;
}
input::placeholder, textarea::placeholder{color:var(--text-faint);}
input:focus, textarea:focus, select:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
textarea{resize:vertical;min-height:110px;}

/* ---- messages ---- */
.alert{
  display:none;background:var(--danger-veil);border:1px solid #F0CFC0;
  color:var(--danger);border-radius:10px;padding:11px 14px;
  font-size:13.5px;line-height:1.45;margin-bottom:22px;
}
.alert.show{display:block;}