/**
 * baby-compare Design System — base (Phase 4)
 */

:root {
  /* Brand — warm premium (baby niche) */
  --bc-accent: #ff6b00;
  --bc-accent-hover: #e55f00;
  --bc-accent-dark: #ff4d00;
  --bc-accent-light: #fff7f0;

  --bc-compare: #1e6bb8;
  --bc-compare-hover: #155a9e;
  --bc-compare-light: #e8f2fb;

  --bc-text: #1a1a2e;
  --bc-text-secondary: #3d4660;
  --bc-muted: #64748b;
  --bc-price: #e60023;

  --bc-bg: #f4f6f9;
  --bc-bg-warm: #faf8f5;
  --bc-surface: #ffffff;
  --bc-border: #e8ecf1;
  --bc-border-strong: #d1dae6;

  /* Spacing — 8px grid */
  --bc-space-1: 4px;
  --bc-space-2: 8px;
  --bc-space-3: 12px;
  --bc-space-4: 16px;
  --bc-space-5: 24px;
  --bc-space-6: 32px;
  --bc-space-7: 40px;
  --bc-space-8: 48px;
  --bc-space-9: 64px;

  /* Radius */
  --bc-radius-sm: 8px;
  --bc-radius: 14px;
  --bc-radius-lg: 20px;
  --bc-radius-pill: 999px;

  /* Elevation */
  --bc-shadow-sm: 0 2px 8px rgba(26, 26, 46, 0.06);
  --bc-shadow: 0 4px 14px rgba(26, 26, 46, 0.08);
  --bc-shadow-hover: 0 10px 28px rgba(26, 26, 46, 0.12);

  /* Layout */
  --bc-container: 1100px;
  --bc-header-h: 72px;

  /* Typography scale */
  --bc-font: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bc-text-xs: 0.75rem;
  --bc-text-sm: 0.875rem;
  --bc-text-base: 1rem;
  --bc-text-lg: 1.125rem;
  --bc-text-xl: 1.25rem;
  --bc-text-2xl: 1.5rem;
  --bc-text-3xl: clamp(1.5rem, 4vw, 2rem);
  --bc-leading: 1.7;
  --bc-leading-tight: 1.35;

  /* Motion */
  --bc-ease: 0.2s ease;
}

/* Reset / base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

.bc-theme {
  font-family: var(--bc-font);
  color: var(--bc-text);
  -webkit-font-smoothing: antialiased;
}

.bc-theme body {
  background: var(--bc-bg);
  color: var(--bc-text);
  font-size: var(--bc-text-base);
  line-height: var(--bc-leading);
}

.bc-theme p {
  color: var(--bc-text-secondary);
  line-height: var(--bc-leading);
}

/* Layout */
.bc-theme .ct-container {
  max-width: var(--bc-container);
  margin: 0 auto;
  padding: var(--bc-space-5) var(--bc-space-4);
}

.bc-section {
  margin-bottom: var(--bc-space-7);
}

.bc-section__head {
  margin-bottom: var(--bc-space-5);
}

.bc-section__title {
  font-size: var(--bc-text-2xl);
  font-weight: 700;
  color: var(--bc-text);
  letter-spacing: -0.02em;
  line-height: var(--bc-leading-tight);
  margin: 0 0 var(--bc-space-2);
  padding-left: var(--bc-space-3);
  border-left: 4px solid var(--bc-accent);
}

.bc-section__desc {
  margin: 0;
  font-size: var(--bc-text-sm);
  color: var(--bc-muted);
}

/* Typography */
.bc-theme h1,
.bc-theme h2,
.bc-theme h3,
.bc-theme h4 {
  font-weight: 700;
  color: var(--bc-text);
  letter-spacing: -0.02em;
  line-height: var(--bc-leading-tight);
}

.bc-theme h1 {
  font-size: var(--bc-text-3xl);
}

.bc-theme h2 {
  font-size: var(--bc-text-2xl);
}

.bc-theme h3 {
  font-size: var(--bc-text-xl);
}

.bc-theme h4 {
  font-size: var(--bc-text-lg);
}

.bc-label {
  display: block;
  font-size: var(--bc-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bc-muted);
}

.bc-score-num {
  font-size: var(--bc-text-2xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--bc-accent);
  line-height: 1;
}

/* Links */
.bc-theme a {
  transition: color var(--bc-ease), border-color var(--bc-ease), background var(--bc-ease);
}

/* Header brand (Blocksy) */
.bc-theme .site-title a,
.bc-theme .ct-logo-text,
.bc-theme [class*="site-title"] a {
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--bc-text) !important;
  text-decoration: none !important;
}

.bc-theme .site-description,
.bc-tagline {
  display: block;
  font-size: var(--bc-text-xs);
  font-weight: 500;
  color: var(--bc-muted);
  letter-spacing: 0.02em;
  margin-top: 2px;
}

.bc-header-brand__name {
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--bc-text);
}

.bc-header-brand__name span {
  color: var(--bc-accent);
}

/* Main nav density */
.bc-theme header .menu > li > a {
  font-size: var(--bc-text-sm);
  font-weight: 600;
}

@media (max-width: 768px) {
  .bc-theme .ct-container {
    padding: var(--bc-space-4) var(--bc-space-3);
  }
}