/*!
 * BookClub editorial design tokens (Claude.com-inspired)
 * Maps semantic Basecoat variables + BookClub-specific tokens.
 * Reference: DESIGN.md §3
 */

:root {
  /* Brand & accent */
  --bc-primary: #cc785c;
  --bc-primary-active: #a9583e;
  --bc-primary-disabled: #e6dfd8;
  --bc-accent-teal: #5db8a6;
  --bc-accent-amber: #e8a55a;

  /* Surfaces */
  --bc-canvas: #faf9f5;
  --bc-surface-soft: #f5f0e8;
  --bc-surface-card: #efe9de;
  --bc-surface-cream-strong: #e8e0d2;
  --bc-surface-dark: #181715;
  --bc-surface-dark-elevated: #252320;
  --bc-surface-dark-soft: #1f1e1b;
  --bc-hairline: #e6dfd8;
  --bc-hairline-soft: #ebe6df;

  /* Text */
  --bc-ink: #141413;
  --bc-body-strong: #252523;
  --bc-body: #3d3d3a;
  --bc-muted: #6c6a64;
  --bc-muted-soft: #8e8b82;
  --bc-on-primary: #ffffff;
  --bc-on-dark: #faf9f5;
  --bc-on-dark-soft: #a09d96;

  /* Semantic */
  --bc-success: #5db872;
  --bc-warning: #d4a017;
  --bc-error: #c64545;

  /* Typography families — Pretendard (KO body/UI), Cormorant (Latin display), JetBrains Mono (code) */
  --bc-font-display: "Cormorant Garamond", "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", serif;
  --bc-font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --bc-font-mono: "JetBrains Mono", Pretendard, ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing (4px base) */
  --bc-space-xxs: 0.25rem;
  --bc-space-xs: 0.5rem;
  --bc-space-sm: 0.75rem;
  --bc-space-md: 1rem;
  --bc-space-lg: 1.5rem;
  --bc-space-xl: 2rem;
  --bc-space-xxl: 3rem;
  --bc-space-section: 6rem;

  /* Radius */
  --bc-radius-xs: 4px;
  --bc-radius-sm: 6px;
  --bc-radius-md: 8px;
  --bc-radius-lg: 12px;
  --bc-radius-xl: 16px;
  --bc-radius-pill: 9999px;

  /* Layout */
  --bc-max-width: 75rem;

  /* Basecoat semantic bridge (light) */
  --background: var(--bc-canvas);
  --foreground: var(--bc-ink);
  --card: var(--bc-surface-card);
  --card-foreground: var(--bc-ink);
  --popover: var(--bc-canvas);
  --popover-foreground: var(--bc-ink);
  --primary: var(--bc-primary);
  --primary-foreground: var(--bc-on-primary);
  --secondary: var(--bc-surface-soft);
  --secondary-foreground: var(--bc-ink);
  --muted: var(--bc-surface-soft);
  --muted-foreground: var(--bc-muted);
  --accent: var(--bc-surface-card);
  --accent-foreground: var(--bc-ink);
  --destructive: var(--bc-error);
  --destructive-foreground: var(--bc-on-primary);
  --border: var(--bc-hairline);
  --input: var(--bc-hairline);
  --ring: color-mix(in srgb, var(--bc-primary) 35%, transparent);
  --radius: var(--bc-radius-md);
}

.dark,
html.dark {
  --background: var(--bc-surface-dark);
  --foreground: var(--bc-on-dark);
  --card: var(--bc-surface-dark-elevated);
  --card-foreground: var(--bc-on-dark);
  --popover: var(--bc-surface-dark-elevated);
  --popover-foreground: var(--bc-on-dark);
  --primary: var(--bc-primary);
  --primary-foreground: var(--bc-on-primary);
  --secondary: var(--bc-surface-dark-soft);
  --secondary-foreground: var(--bc-on-dark);
  --muted: var(--bc-surface-dark-soft);
  --muted-foreground: var(--bc-on-dark-soft);
  --accent: var(--bc-surface-dark-elevated);
  --accent-foreground: var(--bc-on-dark);
  --destructive: var(--bc-error);
  --destructive-foreground: var(--bc-on-primary);
  --border: color-mix(in srgb, var(--bc-on-dark) 18%, transparent);
  --input: color-mix(in srgb, var(--bc-on-dark) 24%, transparent);
  --ring: color-mix(in srgb, var(--bc-primary) 45%, transparent);
}