/* Book Builder — Shared Stylesheet
   Tokens, base layout, and components per DESIGN.md.
   Shared-file-integrity rule applies (AI rule 7 / PROJECT-CONTEXT.md §3):
   grep for known key strings before any future overwrite of this file. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-variable.woff2') format('woff2-variations'), url('/assets/fonts/plus-jakarta-sans-variable.woff2') format('woff2');
}

:root {
  --paper:     #faf6ef;
  --surface:   #ffffff;
  --ink:       #2b2620;
  --ink-mid:   #6b6257;
  --ink-dim:   #a39a8d;
  --border:    #e8e0d3;
  --leaf:      #3e8e5a;
  --leaf-deep: #2d6b43;
  --sky:       #4a90c2;
  --berry:     #c94f4f;
  --sun:       #e8a531;
  --font:      'Plus Jakarta Sans', sans-serif;
}

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

html, body {
  min-height: 100%;
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--sky); }

/* ── layout: centred content column, per follw convention (DESIGN.md §4) ── */
.canvas {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 0 20px;
}

.wrapper {
  width: 100%;
  max-width: 1080px;
  padding: 32px 0 48px;
}

/* ── typography scale (DESIGN.md §3) ── */
h1.page-title { font-size: 24px; font-weight: 700; }
h2.section-heading { font-size: 18px; font-weight: 600; }
.helper-text { font-size: 14px; font-weight: 500; color: var(--ink-mid); }
.micro-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}

/* ── cards ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(43, 38, 32, .06);
}

/* ── buttons (DESIGN.md §4 — Simple Mode: 56px primary, 48px min hit area) ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 17px;
  min-height: 48px;
  padding: 0 24px;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: opacity .15s, transform .15s;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  min-height: 56px;
  background: linear-gradient(135deg, var(--leaf), var(--leaf-deep));
  color: #fff;
}
.btn-primary:hover { opacity: .92; }

.btn-secondary {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
}
.btn-secondary:hover { border-color: var(--ink-dim); }

.btn-destructive {
  background: var(--berry);
  color: #fff;
}

/* ── banners (DESIGN.md §4) ── */
.banner {
  border-radius: 10px;
  padding: 0.85rem 1.1rem;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 1.25rem;
  border: 1px solid transparent;
}
.banner-success { background: #eef7f0; border-color: #bfe3cb; color: #2d6b43; }
.banner-info    { background: #eef4fa; border-color: #bcd8ec; color: #2c6a94; }
.banner-warning { background: #fdf4e3; border-color: #f0d9a6; color: #8a6117; }
.banner-error   { background: #fbeeee; border-color: #eec3c3; color: #943c3c; }

/* ── form fields ── */
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-mid);
  margin-bottom: 6px;
}
.field input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  font-family: var(--font);
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus {
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(74, 144, 194, .12);
}

/* ── empty state (DESIGN.md §4) ── */
.empty-state {
  text-align: center;
  padding: 64px 24px;
  color: var(--ink-mid);
}
.empty-state p { font-size: 17px; margin-bottom: 20px; }