/* qwriter — editorial sans, confident punch */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  --ink: #14110d;
  --ink-2: #2a261f;
  --ink-3: #5a544a;
  --mute: #8a8278;
  --rule: #e2dccd;
  --rule-2: #ede8db;
  --paper: #faf7f2;
  --bone: #f1ece1;
  --cream: #f6f1e4;
  --white: #ffffff;
  --accent: #d24a1a;
  --accent-deep: #8a2a0d;
  --accent-soft: #f7ddcc;
  --sage: #4a6b4a;
  --sky: #3a5a8a;
  --gold: #c89a3a;

  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
}

/* base reset for artboards */
.qw-board {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
  line-height: 1.4;
  letter-spacing: -0.005em;
}
.qw-board * { box-sizing: border-box; }
.qw-board p { margin: 0; }
.qw-board h1, .qw-board h2, .qw-board h3, .qw-board h4 { margin: 0; font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; }
.qw-board h1 { font-weight: 700; letter-spacing: -0.035em; }
.qw-board button { font-family: inherit; cursor: pointer; }
.qw-board a { color: inherit; text-decoration: none; }
.qw-board ::selection { background: var(--accent); color: var(--paper); }

/* mono accents */
.qw-mono { font-family: var(--font-mono); font-feature-settings: 'ss01'; }
.qw-tabular { font-variant-numeric: tabular-nums; }

/* rules */
.qw-rule { height: 1px; background: var(--rule); border: 0; }
.qw-rule-strong { height: 1px; background: var(--ink); border: 0; }

/* labels / eyebrows */
.qw-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.qw-eyebrow-accent { color: var(--accent); }

/* buttons */
.qw-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  border: 1px solid transparent;
  letter-spacing: -0.01em;
  transition: background .12s, color .12s, border-color .12s, transform .08s;
  white-space: nowrap;
}
.qw-btn:active { transform: translateY(1px); }
.qw-btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.qw-btn-primary:hover { background: var(--accent); border-color: var(--accent); }
.qw-btn-accent { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.qw-btn-accent:hover { background: var(--ink); border-color: var(--ink); }
.qw-btn-ghost { background: transparent; color: var(--ink); }
.qw-btn-ghost:hover { background: var(--ink); color: var(--paper); }
.qw-btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.qw-btn-outline:hover { background: var(--ink); color: var(--paper); }
.qw-btn-sm { padding: 8px 14px; font-size: 13px; }

/* big editorial type */
.qw-display {
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.qw-display-italic { font-style: italic; font-weight: 500; }

/* cards */
.qw-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}

/* dotted rule (editorial) */
.qw-dotrule { background-image: linear-gradient(to right, var(--ink-3) 33%, transparent 0%); background-size: 6px 1px; background-repeat: repeat-x; background-position: 0 50%; height: 1px; }

/* small pill / chip */
.qw-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bone);
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 500;
}
.qw-chip-accent { background: var(--accent-soft); color: var(--accent-deep); }
.qw-chip-sage { background: #e0ead8; color: #2e4a2e; }
.qw-chip-ink { background: var(--ink); color: var(--paper); }

/* nav link */
.qw-navlink { font-size: 14px; color: var(--ink-2); transition: color .12s; }
.qw-navlink:hover { color: var(--accent); }

/* form */
.qw-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  outline: none;
}
.qw-input:focus { border-color: var(--ink); }
.qw-label { font-size: 13px; color: var(--ink-2); font-weight: 500; margin-bottom: 6px; display: block; }

/* badge counter */
.qw-numbox {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

/* magazine drop figure number */
.qw-bignum {
  font-weight: 600;
  font-size: 120px;
  line-height: 0.85;
  letter-spacing: -0.05em;
}

/* app chrome */
.qw-app-bg { background: var(--paper); }
.qw-app-sidebar { background: var(--white); border-right: 1px solid var(--rule); }
.qw-app-topbar { background: var(--white); border-bottom: 1px solid var(--rule); }

/* generic dot-grid bg */
.qw-grid-bg {
  background-image: radial-gradient(rgba(20,17,13,0.07) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* fake squiggle underline */
.qw-squiggle {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'><path d='M0 3 Q 3 0 6 3 T 12 3' fill='none' stroke='%23d24a1a' stroke-width='1.5'/></svg>");
  background-repeat: repeat-x;
  background-position: 0 100%;
  padding-bottom: 6px;
}

/* code window */
.qw-code {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}
.qw-code .qw-tok-kw { color: var(--accent); }
.qw-code .qw-tok-str { color: var(--sage); }
.qw-code .qw-tok-com { color: var(--mute); font-style: italic; }
.qw-code .qw-tok-key { color: var(--sky); }

/* highlight (markdown extracted) */
.qw-mark { background: linear-gradient(transparent 60%, #f7ddcc 60%); padding: 0 2px; }

/* diff colors */
.qw-diff-bad { background: #fbe7e0; color: #7a2a10; }
.qw-diff-good { background: #e6efe0; color: #2e4a2e; }