/* tokens.css — Editorial design system tokens (light + dark) */

:root {
  /* light palette */
  --ws-cream: #FAF6F0;
  --ws-ink: #2A1810;
  --ws-terracotta: #B85C3C;
  --ws-olive: #6B8E4E;
  --ws-wheat: #D4B896;
  --ws-wheat-soft: #F2E5D2;
  --ws-line: #e8e0d2;
  --ws-line-dotted: #d9c9b3;
  --ws-muted: #6b4f3f;
  --ws-faint: #a89484;

  /* type scale */
  --ws-display-xl: 2.5rem;
  --ws-display-lg: 1.75rem;
  --ws-heading-md: 1.25rem;
  --ws-body: 1rem;
  --ws-body-sm: 0.85rem;
  --ws-ui: 0.85rem;
  --ws-ui-sm: 0.78rem;
  --ws-label-cap: 0.7rem;

  /* font stacks */
  --ws-serif-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ws-serif-body: 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --ws-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --ws-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* spacing */
  --ws-space-1: 4px;
  --ws-space-2: 8px;
  --ws-space-3: 12px;
  --ws-space-4: 16px;
  --ws-space-5: 24px;
  --ws-space-6: 32px;
  --ws-space-7: 48px;
  --ws-space-8: 64px;
  --ws-space-9: 96px;

  /* radius */
  --ws-radius-card: 4px;
  --ws-radius-pill: 999px;
}

[data-bs-theme="light"] {
  --ws-cream: #FAF6F0;
  --ws-ink: #2A1810;
  --ws-terracotta: #B85C3C;
  --ws-olive: #6B8E4E;
  --ws-wheat: #D4B896;
  --ws-wheat-soft: #F2E5D2;
  --ws-line: #e8e0d2;
  --ws-line-dotted: #d9c9b3;
  --ws-muted: #6b4f3f;
  --ws-faint: #a89484;

  /* Bootstrap variable overrides (light) */
  --bs-body-bg: var(--ws-cream);
  --bs-body-color: var(--ws-ink);
  --bs-primary: var(--ws-terracotta);
  --bs-primary-rgb: 184, 92, 60;
  --bs-secondary: var(--ws-ink);
  --bs-secondary-rgb: 42, 24, 16;
  --bs-success: var(--ws-olive);
  --bs-success-rgb: 107, 142, 78;
  --bs-border-color: var(--ws-line);
  --bs-tertiary-bg: var(--ws-wheat-soft);
  --bs-tertiary-bg-rgb: 242, 229, 210;
  --bs-link-color: var(--ws-terracotta);
  --bs-link-hover-color: #8a4530;
}

[data-bs-theme="dark"] {
  --ws-cream: #141822;
  --ws-ink: #E6E8EE;
  --ws-terracotta: #E89878;
  --ws-olive: #A6C088;
  --ws-wheat: #1E2330;
  --ws-wheat-soft: #1E2330;
  --ws-line: #2E3547;
  --ws-line-dotted: #2E3547;
  --ws-muted: #B9C0CC;
  --ws-faint: #6E7689;

  /* Bootstrap variable overrides (dark) */
  --bs-body-bg: var(--ws-cream);
  --bs-body-color: var(--ws-ink);
  --bs-primary: var(--ws-terracotta);
  --bs-primary-rgb: 232, 152, 120;
  --bs-secondary: var(--ws-ink);
  --bs-secondary-rgb: 230, 232, 238;
  --bs-success: var(--ws-olive);
  --bs-success-rgb: 166, 192, 136;
  --bs-border-color: var(--ws-line);
  --bs-tertiary-bg: var(--ws-wheat);
  --bs-tertiary-bg-rgb: 30, 35, 48;
  --bs-link-color: var(--ws-terracotta);
  --bs-link-hover-color: #f3b298;
}

html, body {
  background: var(--ws-cream);
  color: var(--ws-ink);
  font-family: var(--ws-serif-body);
  font-size: var(--ws-body);
  line-height: 1.55;
}

/* Baseline: never let images overflow their container.
 * Component-scoped rules (e.g. .ws-detail__hero img) override via specificity. */
img {
  max-width: 100%;
  height: auto;
}

/* Type primitives — apply by class so we don't fight Bootstrap defaults */
.ws-display-xl { font-family: var(--ws-serif-display); font-size: var(--ws-display-xl); line-height: 1.05; font-weight: 400; letter-spacing: -0.02em; margin: 0; }
.ws-display-lg { font-family: var(--ws-serif-display); font-size: var(--ws-display-lg); line-height: 1.1; font-weight: 400; margin: 0; }
.ws-heading-md { font-family: var(--ws-serif-display); font-size: var(--ws-heading-md); line-height: 1.2; font-weight: 600; margin: 0; }
.ws-body-sm { font-family: var(--ws-serif-body); font-size: var(--ws-body-sm); line-height: 1.5; }
.ws-ui { font-family: var(--ws-sans); font-size: var(--ws-ui); }
.ws-ui-sm { font-family: var(--ws-sans); font-size: var(--ws-ui-sm); }
.ws-label-cap {
  font-family: var(--ws-sans);
  font-size: var(--ws-label-cap);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--ws-terracotta);
}
.ws-muted { color: var(--ws-muted); }
.ws-faint { color: var(--ws-faint); }

/* Brand divider — short terracotta line above section labels */
.ws-divider {
  border: none;
  border-top: 1px solid var(--ws-terracotta);
  width: 40px;
  margin: 0 0 var(--ws-space-2) 0;
}