/* Bookspert brand tokens. Reference: bookspert.com (WordPress + Uncode theme).
   Editorial / publishing-house aesthetic: greyscale + Lora serif headings + Inter body. */

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* === Brand colors (greyscale editorial) === */
  --bk-dark:           #1F2226;  /* near-black for headings + dark surfaces */
  --bk-text:           #303133;  /* primary body text */
  --bk-text-muted:     #5B616B;  /* secondary text */
  --bk-text-placeholder:#828282;
  --bk-bg:             #EFEFEF;  /* page background */
  --bk-surface:        #FFFFFF;  /* card / panel surface */
  --bk-surface-soft:   #F7F7F7;  /* input bg, hover */
  --bk-border:         #D6D7D9;  /* hairline borders */
  --bk-border-strong:  #C9CACC;
  --bk-accent:         #F0704F;  /* warm coral accent (matches the existing Bookspert group color) */
  --bk-accent-dark:    #C9543A;
  --bk-danger:         #C5612F;
  --bk-warn:           #D89B3E;

  /* === Typography === */
  --bk-font:           'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bk-font-serif:     'Lora', Georgia, 'Times New Roman', serif;

  /* === Spacing === */
  --bk-s-1: 5px;
  --bk-s-2: 8px;
  --bk-s-3: 12px;
  --bk-s-4: 16px;
  --bk-s-5: 24px;
  --bk-s-6: 32px;
  --bk-s-7: 48px;
  --bk-s-8: 64px;

  /* === Radius (Bookspert is more conservative, smaller radii) === */
  --bk-r-1: 3px;
  --bk-r-2: 6px;
  --bk-r-3: 10px;
  --bk-r-pill: 999px;

  /* === Shadows (subtle) === */
  --bk-shadow-sm:  0 1px 2px rgba(31, 34, 38, 0.06);
  --bk-shadow-md:  0 4px 10px -3px rgba(31, 34, 38, 0.10);
  --bk-shadow-lg:  0 14px 30px -14px rgba(31, 34, 38, 0.20);
}

/* === Base scaffolding utility classes (opt-in, namespaced "bk-") === */
.bk-body {
  background: var(--bk-bg);
  color: var(--bk-text);
  font-family: var(--bk-font);
  font-size: 14px;
  line-height: 1.55;
}

.bk-heading {
  font-family: var(--bk-font-serif);
  color: var(--bk-dark);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.bk-surface {
  background: var(--bk-surface);
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-r-2);
  box-shadow: var(--bk-shadow-sm);
}

.bk-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: var(--bk-r-2);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  background: transparent;
  color: var(--bk-text);
}
.bk-btn:hover { background: var(--bk-surface-soft); }

.bk-btn--primary {
  background: var(--bk-dark);
  color: #fff;
}
.bk-btn--primary:hover { background: #0F1114; color: #fff; }

.bk-btn--accent {
  background: var(--bk-accent);
  color: #fff;
}
.bk-btn--accent:hover { background: var(--bk-accent-dark); color: #fff; }

.bk-btn--ghost {
  border-color: var(--bk-border-strong);
  color: var(--bk-text);
}
.bk-btn--ghost:hover {
  border-color: var(--bk-dark);
  color: var(--bk-dark);
  background: transparent;
}

.bk-input, .bk-textarea, .bk-select {
  font-family: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border-radius: var(--bk-r-2);
  border: 1px solid var(--bk-border);
  background: var(--bk-surface);
  color: var(--bk-text);
  width: 100%;
  transition: border-color 0.15s;
}
.bk-input:focus, .bk-textarea:focus, .bk-select:focus {
  outline: none;
  border-color: var(--bk-dark);
}

.bk-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: var(--bk-r-pill);
  background: var(--bk-surface-soft);
  color: var(--bk-text-muted);
  border: 1px solid var(--bk-border);
}
.bk-chip--accent { background: var(--bk-accent); color: #fff; border-color: var(--bk-accent); }
.bk-chip--dark   { background: var(--bk-dark); color: #fff; border-color: var(--bk-dark); }

.bk-link { color: var(--bk-dark); text-decoration: underline; text-underline-offset: 3px; }
.bk-link:hover { color: var(--bk-accent); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bk-border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--bk-text-muted); }