/* ═══════════════════════════════════════════════════════════════
   Quire — Design System (app chrome)
   ───────────────────────────────────────────────────────────────
   Single source of truth for tokens + base component styles across
   admin / help / logos / index / about / privacy / terms.
   Booklet + Comparison carry their own page-scoped stylesheets
   built on the same Quire tokens.

   Brand: ink blue #294D77 lives in the header, primary buttons,
   links and focus rings ONLY. Brass #A8752E marks a single active
   element per view. The workspace stays warm-neutral (paper).
   Chrome must sit beside any of the 12 booklet document themes
   without clashing — never flood large surfaces with brand ink.

   Last revised 2026-07-03 (Quire rebrand).
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&display=swap');

:root {
  /* ── Quire brand tokens ────────────────────────────────────── */
  --color-primary: #294D77;         /* ink blue — header, primary buttons, links, focus */
  --color-primary-hover: #1F3D61;
  --color-primary-tint: #EDF1F6;    /* light fill for ghost/selected states */
  --color-primary-ring: rgba(41,77,119,.14);
  --color-on-primary: #FFFFFF;
  --color-accent: #A8752E;          /* brass — single active/selected accent, sparingly */
  --color-accent-tint: #F4ECDD;

  --color-paper: #FAF9F7;           /* app/workspace background */
  --color-surface: #FFFFFF;         /* cards, inputs, tables */
  --color-ink: #1E2430;             /* primary text */
  --color-ink-2: #3B4250;           /* secondary text / labels */
  --color-muted: #6B7180;           /* tertiary text / captions */
  --color-line: #E6E3DD;            /* hairline borders */
  --color-line-strong: #D6D2C9;     /* stronger dividers */
  --color-neutral-50: #F5F4F1;
  --color-neutral-100: #ECEAE5;
  --color-neutral-200: #DEDBD4;
  --color-neutral-300: #C4C0B6;     /* control borders */
  --color-row-alt: #FBFAF8;         /* zebra row */

  --color-success: #2F7D5B;  --color-success-tint: #E6F1EC;
  --color-warning: #B5811E;  --color-warning-tint: #F7EEDA;
  --color-error:   #B23A38;  --color-error-tint:   #F6E7E6;
  --color-error-ring: rgba(178,58,56,.12);

  /* ── Legacy aliases (page-scoped styles reference these) ───── */
  --brand-primary:        var(--color-primary);
  --brand-primary-hover:  var(--color-primary-hover);
  --brand-primary-soft:   var(--color-primary-tint);
  --brand-accent:         var(--color-primary);
  --brand-accent-hover:   var(--color-primary-hover);

  --surface-page:    var(--color-paper);
  --surface-card:    var(--color-surface);
  --surface-muted:   var(--color-neutral-50);
  --surface-subtle:  var(--color-row-alt);
  --surface-overlay: rgba(30,36,48,0.5);

  --text-primary:    var(--color-ink);
  --text-secondary:  var(--color-ink-2);
  --text-tertiary:   #9AA0AC;
  --text-inverse:    #ffffff;
  --text-muted:      var(--color-muted);

  --border-default: var(--color-line);
  --border-strong:  var(--color-neutral-300);
  --border-focus:   var(--color-primary);
  --border-divider: #F0EEE9;

  --color-success-soft:  var(--color-success-tint);
  --color-success-text:  #266549;
  --color-warning-soft:  var(--color-warning-tint);
  --color-warning-text:  #8A6217;
  --color-danger:        var(--color-error);
  --color-danger-soft:   var(--color-error-tint);
  --color-danger-text:   #8F2E2C;
  --color-info:          var(--color-primary);
  --color-info-soft:     var(--color-primary-tint);
  --color-info-text:     #223F63;

  /* ── Typography ────────────────────────────────────────────── */
  --font-display: 'Source Serif 4', Georgia, serif;      /* page titles, brand voice */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs:   0.75rem;     /* 12 */
  --fs-sm:   0.8125rem;   /* 13 */
  --fs-base: 0.875rem;    /* 14 */
  --fs-md:   0.9375rem;   /* 15 */
  --fs-lg:   1.0625rem;   /* 17 */
  --fs-xl:   1.25rem;     /* 20 */
  --fs-2xl:  1.625rem;    /* 26 */
  --fs-3xl:  2rem;        /* 32 */
  --fs-4xl:  2.25rem;     /* 36 */

  --lh-tight: 1.25;
  --lh-snug:  1.4;
  --lh-base:  1.57;
  --lh-relaxed: 1.7;

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     600;   /* Quire caps chrome weight at 600 */
  --fw-extra:    700;

  --tracking-tight: -0.01em;
  --tracking-base:  0;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.12em;

  /* ── Spacing (4-base) ──────────────────────────────────────── */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  40px;
  --sp-8:  48px;
  --sp-10: 64px;
  --sp-12: 80px;

  /* ── Radius ────────────────────────────────────────────────── */
  --r-xs:   4px;
  --r-sm:   4px;
  --r-md:   6px;   /* buttons, inputs */
  --r-lg:   10px;  /* cards */
  --r-xl:   12px;  /* large cards, modals */
  --r-pill: 9999px;

  /* ── Shadows (restrained; only on floating things) ─────────── */
  --shadow-xs: 0 1px 2px rgba(30,36,48,.05);
  --shadow-sm: 0 1px 2px rgba(30,36,48,.06);
  --shadow-md: 0 6px 20px -6px rgba(30,36,48,.14);
  --shadow-lg: 0 16px 40px -12px rgba(30,36,48,.22);
  --shadow-xl: 0 16px 40px -12px rgba(30,36,48,.22);
  --shadow-focus: 0 0 0 3px var(--color-primary-ring);

  /* ── Motion ────────────────────────────────────────────────── */
  --motion-fast: 120ms ease;
  --motion-base: 200ms ease;
  --motion-slow: 320ms ease;

  /* ── Layout ────────────────────────────────────────────────── */
  --nav-height:      58px;
  --container-md:    960px;
  --container-lg:    1100px;
  --container-xl:    1280px;
}

/* ═══════════════════════════════════════════════════════════════
   Reset + base
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text-primary);
  background: var(--surface-page);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   Navigation — ink header, brass active underline
   ═══════════════════════════════════════════════════════════════ */
.ds-nav {
  background: var(--color-primary);
  height: var(--nav-height);
  border-bottom: 1px solid #21406A;
}
.ds-nav-inner {
  max-width: var(--container-xl);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 var(--sp-5);
}
.ds-nav-left {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 100%;
}
.ds-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -.01em;
  text-decoration: none;
  margin-right: var(--sp-3);
}
.ds-nav-brand:hover { text-decoration: none; }
.ds-nav-brand svg { display: block; }
.ds-nav-div {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.18);
  margin-right: var(--sp-2);
}
.ds-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  color: #fff;
  opacity: .72;
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding: 0 var(--sp-3);
  transition: opacity var(--motion-fast);
}
.ds-nav-link svg { width: 16px; height: 16px; }
.ds-nav-link:hover {
  opacity: 1;
  text-decoration: none;
}
.ds-nav-link.active {
  opacity: 1;
  font-weight: var(--fw-semibold);
  box-shadow: inset 0 -2px 0 var(--color-accent);
}
.ds-nav-right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.ds-nav-user {
  color: rgba(255,255,255,0.6);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}
.ds-nav-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #C9973F;
  color: #2B2313;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: .02em;
}
.ds-btn-signout {
  background: transparent;
  color: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 5px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: var(--fs-xs);
  font-family: inherit;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.ds-btn-signout:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.45);
  color: white;
}

/* ═══════════════════════════════════════════════════════════════
   Page layout
   ═══════════════════════════════════════════════════════════════ */
.ds-page {
  max-width: var(--container-md);
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-5) var(--sp-10);
}
.ds-page-lg {
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-5) var(--sp-10);
}
.ds-page-header {
  margin-bottom: var(--sp-6);
}
.ds-page-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -.01em;
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-2);
}
.ds-page-subtitle {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-snug);
}
.ds-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   Cards
   ═══════════════════════════════════════════════════════════════ */
.ds-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.ds-card-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.ds-card-divider {
  height: 1px;
  background: var(--border-divider);
  margin: var(--sp-4) calc(var(--sp-5) * -1);
}

/* ═══════════════════════════════════════════════════════════════
   Forms
   ═══════════════════════════════════════════════════════════════ */
.ds-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-ink-2);
  margin-bottom: var(--sp-2);
}
.ds-input,
.ds-select,
.ds-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-family: inherit;
  color: var(--text-primary);
  background: var(--surface-card);
  outline: none;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}
.ds-input::placeholder,
.ds-textarea::placeholder {
  color: var(--text-tertiary);
}
.ds-textarea {
  min-height: 88px;
  resize: vertical;
  line-height: var(--lh-snug);
}
.ds-select { cursor: pointer; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-tertiary) 50%), linear-gradient(135deg, var(--text-tertiary) 50%, transparent 50%); background-position: calc(100% - 18px) center, calc(100% - 13px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; }

.ds-form-group { margin-bottom: var(--sp-4); }
.ds-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

/* ═══════════════════════════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════════════════════════ */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-family: inherit;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-base);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast);
  outline: none;
}
.ds-btn:focus-visible { box-shadow: var(--shadow-focus); }
.ds-btn:disabled { color: #9A968C; background: var(--color-neutral-50); border-color: var(--border-default); cursor: not-allowed; box-shadow: none; }

.ds-btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.ds-btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.ds-btn-secondary {
  background: var(--surface-card);
  color: var(--color-primary);
  border-color: var(--color-neutral-300);
}
.ds-btn-secondary:hover:not(:disabled) {
  background: var(--color-neutral-50);
}

.ds-btn-ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: transparent;
}
.ds-btn-ghost:hover:not(:disabled) {
  background: var(--color-primary-tint);
}

.ds-btn-danger {
  background: var(--color-error);
  color: var(--text-inverse);
  border-color: var(--color-error);
}
.ds-btn-danger:hover:not(:disabled) {
  background: #99312F;
  border-color: #99312F;
}

.ds-btn-sm  { padding: 6px 12px; font-size: var(--fs-xs); }
.ds-btn-lg  { padding: 11px 20px; font-size: var(--fs-base); }
.ds-btn-block { width: 100%; }

/* ═══════════════════════════════════════════════════════════════
   Badges
   ═══════════════════════════════════════════════════════════════ */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  padding: 4px 10px;
  border-radius: 20px;
  line-height: 1.4;
}
.ds-badge-default { background: var(--color-neutral-100); color: var(--text-muted); }
.ds-badge-brand   { background: var(--color-primary-tint); color: var(--color-primary); }
.ds-badge-success { background: var(--color-success-tint); color: var(--color-success); }
.ds-badge-warning { background: var(--color-warning-tint); color: var(--color-warning); }
.ds-badge-danger  { background: var(--color-error-tint);   color: var(--color-error); }
.ds-badge-info    { background: var(--color-primary-tint); color: var(--color-primary); }

/* ═══════════════════════════════════════════════════════════════
   Tables
   ═══════════════════════════════════════════════════════════════ */
.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  background: var(--surface-card);
}
.ds-table thead th {
  background: var(--color-neutral-50);
  padding: 11px 14px;
  text-align: left;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  color: var(--color-ink-2);
  border-bottom: 1px solid var(--border-default);
}
.ds-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-divider);
  color: var(--text-primary);
  vertical-align: middle;
}
.ds-table tbody tr:nth-child(even) td { background: var(--color-row-alt); }
.ds-table tbody tr:last-child td { border-bottom: none; }
.ds-table tbody tr:hover td { background: var(--color-primary-tint); }
.ds-num { font-family: var(--font-mono); }

/* ═══════════════════════════════════════════════════════════════
   Messages / alerts
   ═══════════════════════════════════════════════════════════════ */
.ds-msg {
  font-size: var(--fs-base);
  padding: 10px 14px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  line-height: var(--lh-snug);
  margin-top: var(--sp-3);
}
.ds-msg-success { background: var(--color-success-tint); color: var(--color-success-text); border-color: rgba(47,125,91,0.25); }
.ds-msg-error   { background: var(--color-error-tint);   color: var(--color-danger-text);  border-color: rgba(178,58,56,0.25); }
.ds-msg-warning { background: var(--color-warning-tint); color: var(--color-warning-text); border-color: rgba(181,129,30,0.25); }
.ds-msg-info    { background: var(--color-primary-tint); color: var(--color-info-text);    border-color: rgba(41,77,119,0.2); }
.ds-msg-hidden  { display: none; }

/* ═══════════════════════════════════════════════════════════════
   States
   ═══════════════════════════════════════════════════════════════ */
.ds-loading {
  text-align: center;
  padding: var(--sp-7);
  color: var(--text-tertiary);
  font-size: var(--fs-base);
}
.ds-empty {
  text-align: center;
  padding: var(--sp-6);
  color: var(--text-tertiary);
  font-size: var(--fs-base);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   Spinner (auth + general)
   ═══════════════════════════════════════════════════════════════ */
@keyframes ds-spin { to { transform: rotate(360deg); } }
.ds-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--color-neutral-200);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: ds-spin 700ms linear infinite;
  margin: 0 auto var(--sp-3);
}
.ds-auth-overlay {
  position: fixed;
  inset: 0;
  background: var(--surface-page);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-auth-box { text-align: center; color: var(--text-secondary); font-size: var(--fs-base); }

/* ═══════════════════════════════════════════════════════════════
   Modal
   ═══════════════════════════════════════════════════════════════ */
.ds-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--surface-overlay);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
}
.ds-modal {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  max-width: 520px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
}
.ds-modal-header {
  padding: var(--sp-5);
  border-bottom: 1px solid var(--border-divider);
}
.ds-modal-header h1, .ds-modal-header h2, .ds-modal-header h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.01em;
}
.ds-modal-body { padding: var(--sp-5); }
.ds-modal-footer {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border-divider);
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
}

/* ═══════════════════════════════════════════════════════════════
   Utility classes (sparingly)
   ═══════════════════════════════════════════════════════════════ */
.ds-mt-0 { margin-top: 0; }
.ds-mt-1 { margin-top: var(--sp-1); }
.ds-mt-2 { margin-top: var(--sp-2); }
.ds-mt-3 { margin-top: var(--sp-3); }
.ds-mt-4 { margin-top: var(--sp-4); }
.ds-mt-5 { margin-top: var(--sp-5); }
.ds-mb-0 { margin-bottom: 0; }
.ds-mb-1 { margin-bottom: var(--sp-1); }
.ds-mb-2 { margin-bottom: var(--sp-2); }
.ds-mb-3 { margin-bottom: var(--sp-3); }
.ds-mb-4 { margin-bottom: var(--sp-4); }
.ds-mb-5 { margin-bottom: var(--sp-5); }
.ds-text-muted { color: var(--text-secondary); }
.ds-text-tertiary { color: var(--text-tertiary); }
.ds-text-sm { font-size: var(--fs-sm); }
.ds-text-xs { font-size: var(--fs-xs); }
.ds-text-center { text-align: center; }
.ds-flex { display: flex; }
.ds-flex-between { display: flex; justify-content: space-between; align-items: center; }
.ds-gap-1 { gap: var(--sp-1); }
.ds-gap-2 { gap: var(--sp-2); }
.ds-gap-3 { gap: var(--sp-3); }