/* =============================================================
   2nd Draft Co — generator design system (mirrors the storefront theme).
   "Better, the 2nd time around." Editorial serif-italic + mono labels,
   parchment + forest, square corners. Source tokens: content/brand.md.
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Caveat:wght@400;500;600;700&family=Kalam:wght@400;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --paper:#f4f1ea; --paper-dim:#ece8de; --forest:#1a2018; --forest-soft:#2d3a2e;
  --sage:#6b7a5a; --sand:#c4a878; --copper:#a85a3a; --cream:#fff8e8;
  --rule:rgba(45,58,46,0.16);
  --serif:"Cormorant Garamond",Georgia,serif;
  --hand:"Caveat",cursive; --hand-bold:"Kalam","Caveat",cursive;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}

* { box-sizing:border-box; }
html, body {
  margin:0; background:var(--paper); color:var(--forest);
  font-family:var(--serif); font-size:17px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
::selection { background:var(--sand); color:var(--forest); }

/* headings — serif italic */
h1, h2, h3 {
  font-family:var(--serif); font-style:italic; font-weight:500;
  color:var(--forest); letter-spacing:-0.02em; line-height:1.02; margin:0 0 .3em;
}
h1 { font-size:clamp(34px,5vw,60px); }
h2 { font-size:clamp(26px,3.4vw,40px); }
h3 { font-size:clamp(20px,2.4vw,27px); }

/* mono label — the uppercase tracked caps used for nav, field labels, tags */
.label, .mono {
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.28em;
  font-size:11px; font-weight:500; color:var(--sage);
}
.hand { font-family:var(--hand); font-size:1.35em; color:var(--copper); letter-spacing:0; }

a { color:var(--forest-soft); text-decoration:none; border-bottom:1px solid transparent;
    transition:border-color .15s,color .15s; }
a:hover { color:var(--forest); border-bottom-color:var(--sand); }

/* wordmark */
.wordmark {
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(22px,2.4vw,30px); letter-spacing:-0.015em; color:var(--forest);
  text-decoration:none; border:none;
}

/* buttons — square, forest fill, mono caps; hover sand */
button, .btn, input[type=submit] {
  font-family:var(--mono); font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  background:var(--forest); color:var(--cream); border:1px solid var(--forest);
  padding:13px 24px; border-radius:0; cursor:pointer; box-shadow:none;
  transition:background .18s,color .18s,border-color .18s;
}
button:hover, .btn:hover, input[type=submit]:hover {
  background:var(--sand); color:var(--forest); border-color:var(--sand);
}
button:disabled, .btn:disabled { opacity:.45; cursor:default; }
.btn-ghost { background:transparent; color:var(--forest); border-color:var(--forest); }
.btn-ghost:hover { background:var(--forest); color:var(--cream); }
.btn-quiet { background:transparent; color:var(--forest-soft); border-color:transparent;
             letter-spacing:.18em; padding:8px 10px; }
.btn-quiet:hover { background:transparent; color:var(--forest); border-color:transparent; }

/* inputs — paper fill, forest hairline, square */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], select, textarea {
  font-family:var(--mono); font-size:13px; letter-spacing:.04em;
  background:var(--paper); color:var(--forest); border:1px solid var(--forest);
  padding:12px 14px; border-radius:0; box-shadow:none; width:100%;
}
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--sand); box-shadow:0 0 0 2px rgba(196,168,120,.3);
}
input[type=range] { accent-color:var(--copper); padding:0; border:none; background:none; }

/* field block */
.field { margin-bottom:14px; }
.field > label { display:block; margin-bottom:6px; font-family:var(--mono);
  text-transform:uppercase; letter-spacing:.22em; font-size:11px; color:var(--sage); }

/* card / surface */
.card { background:var(--cream); border:1px solid var(--rule); border-radius:0; }
.rule { border:0; border-top:1px solid var(--rule); margin:0; }
.tag { font-family:var(--mono); font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  background:var(--forest); color:var(--cream); padding:5px 10px; }
.tag.copper { background:var(--copper); }

/* status stamps */
.muted { color:var(--sage); }
.copper { color:var(--copper); }