:root {
  --font-title: "Playfair Display", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --title-size: 40px;
  --title-line-height: 1.15;
  --subtitle-size: 15px;
  --subtitle-line-height: 1.45;
  --body-size: 14px;
  --body-line-height: 1.6;
  --card-title-size: 14px;
  --card-title-line-height: 1.15;
  --card-subline-size: 12px;
  --card-subline-line-height: 1.35;
  --hero-card-title-size: 36px;
  --hero-card-subtitle-size: 13px;

  --section-padding-top: 28px;
  --section-padding-bottom: 32px;
  --section-gap: 22px;
  --card-padding: 16px;
  --card-radius: 16px;
  --card-gap: 12px;
  --icon-gap: 14px;
  --icon-size: 24px;
  --icon-shell-size: 36px;

  --page-bg: #0b0b0d;
  --page-text: #f4f1ea;
  --muted-text: #a8a29a;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-hover: rgba(255, 255, 255, 0.12);
  --surface-border: rgba(255, 255, 255, 0.12);
  --elevated-bg: #111114;
  --proof-bg: rgba(255, 255, 255, 0.04);

  --shell-max-width: 1120px;
  --content-max-width: 560px;
  --gutter: 16px;

  --spotlight-1: rgba(198, 162, 90, 0.18);
  --spotlight-2: rgba(198, 162, 90, 0.1);
  --spotlight-3: rgba(255, 255, 255, 0.05);

  --glow-color: rgba(198, 162, 90, 0.2);
  --focus-ring: rgba(198, 162, 90, 0.55);

  --card-shadow: 0 14px 40px rgba(0, 0, 0, 0.32);
  --card-hover-shadow: 0 16px 45px rgba(0, 0, 0, 0.38);
  --hero-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);

  --badge-border: rgba(255, 255, 255, 0.16);
  --icon-shell-bg: rgba(0, 0, 0, 0.18);
  --icon-shell-border: rgba(255, 255, 255, 0.14);

  --hero-card-inset: 18px;
  --hero-card-radius: 18px;
  --hero-card-bg: rgba(255, 255, 255, 0.06);
  --hero-card-border: rgba(255, 255, 255, 0.12);

  --button-default-bg: var(--surface);
  --button-default-hover: var(--surface-hover);
  --button-default-text: var(--page-text);
  --button-default-border: var(--surface-border);
  --button-default-badge-bg: rgba(255, 255, 255, 0.12);
  --button-default-badge-text: var(--page-text);

  --button-dark-bg: #111215;
  --button-dark-hover: #1a1c22;
  --button-dark-text: #f4f1ea;
  --button-dark-border: rgba(255, 255, 255, 0.12);
  --button-dark-badge-bg: rgba(255, 255, 255, 0.1);
  --button-dark-badge-text: #f4f1ea;

  --button-primary-bg: linear-gradient(180deg, #e8d7a8, #c6a25a);
  --button-primary-hover: linear-gradient(180deg, #efdcae, #caa966);
  --button-primary-text: #0b0b0d;
  --button-primary-border: rgba(0, 0, 0, 0.18);
  --button-primary-badge-bg: rgba(0, 0, 0, 0.72);
  --button-primary-badge-text: #f4f1ea;

  --button-accent-bg: linear-gradient(180deg, #43e08d, #28c06d);
  --button-accent-hover: linear-gradient(180deg, #4be897, #2dcc77);
  --button-accent-text: #08140c;
  --button-accent-border: rgba(0, 0, 0, 0.16);
  --button-accent-badge-bg: rgba(8, 20, 12, 0.9);
  --button-accent-badge-text: #eafbf2;
}

@media (min-width: 640px) {
  :root {
    --gutter: 24px;
    --title-size: 48px;
    --section-padding-top: 34px;
    --section-padding-bottom: 34px;
    --hero-card-title-size: 42px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 32px;
    --title-size: 56px;
    --hero-card-title-size: 48px;
  }
}

.bv-btn[data-variant="default"] {
  --button-bg: var(--button-default-bg);
  --button-hover-bg: var(--button-default-hover);
  --button-text: var(--button-default-text);
  --button-border: var(--button-default-border);
  --button-badge-bg: var(--button-default-badge-bg);
  --button-badge-text: var(--button-default-badge-text);
}

.bv-btn[data-variant="dark"] {
  --button-bg: var(--button-dark-bg);
  --button-hover-bg: var(--button-dark-hover);
  --button-text: var(--button-dark-text);
  --button-border: var(--button-dark-border);
  --button-badge-bg: var(--button-dark-badge-bg);
  --button-badge-text: var(--button-dark-badge-text);
}

.bv-btn[data-variant="primary"] {
  --button-bg: var(--button-primary-bg);
  --button-hover-bg: var(--button-primary-hover);
  --button-text: var(--button-primary-text);
  --button-border: var(--button-primary-border);
  --button-badge-bg: var(--button-primary-badge-bg);
  --button-badge-text: var(--button-primary-badge-text);
}

.bv-btn[data-variant="accent"] {
  --button-bg: var(--button-accent-bg);
  --button-hover-bg: var(--button-accent-hover);
  --button-text: var(--button-accent-text);
  --button-border: var(--button-accent-border);
  --button-badge-bg: var(--button-accent-badge-bg);
  --button-badge-text: var(--button-accent-badge-text);
}