/* Dark + Yellow CTA Theme - dark radial surfaces with yellow actions. */
:root {
  --primary: #facc15;
  --secondary: #fde047;
  --accent: #facc15;
  --text-primary: #f8fafc;
  --text-secondary: #a7b0c0;
  --bg-color: #0b0d12;
  --bg-secondary: #151922;
  --border-color: rgba(250, 204, 21, 0.24);
  --font-heading: "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
  --border-radius: 14px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
  --focus-ring: #facc15;
  --transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.dark_yellow_cta-theme {
  --theme-primary: var(--primary);
  --theme-secondary: var(--secondary);
  --theme-accent: var(--accent);
}

:root {
  --bulma-primary: var(--primary);
  --bulma-link: var(--accent);
  --bulma-info: var(--accent);
}

body.dark_yellow_cta-theme {
  color: var(--text-primary);
  background-color: var(--bg-color);
  background-image: radial-gradient(
    circle at top right,
    #202838 0%,
    var(--bg-color) 58%
  );
  font-family: var(--font-body);
}

/* Reference Kit consumes the semantic token namespace. Keep the theme source
   compatible with those block-owned CSS bundles instead of targeting each
   kit_* block with duplicated selectors. */
body.dark_yellow_cta-theme,
#blocks-canvas.dark_yellow_cta-theme {
  --semantic-accent-primary: var(--primary);
  --semantic-accent-primary-hover: var(--secondary);
  --semantic-accent-soft: rgba(250, 204, 21, 0.14);
  --semantic-accent-contrast: #111827;
  --semantic-a11y-focus-ring-color: var(--focus-ring);
  --semantic-border-subtle: rgba(167, 176, 192, 0.35);
  --semantic-border-strong: rgba(250, 204, 21, 0.52);
  --semantic-surface-bg-base: radial-gradient(circle at top right, #202838 0%, #0b0d12 58%);
  --semantic-surface-bg-section: radial-gradient(circle at top left, #171d2a 0%, #0b0d12 64%);
  --semantic-surface-bg-elevated: radial-gradient(circle at top left, #202838 0%, #151922 64%);
  --semantic-surface-bg-muted: #11151e;
  --semantic-surface-finish-warm_sand: radial-gradient(circle at top left, #202838 0%, #151922 64%);
  --semantic-surface-inverse: #07090d;
  --semantic-surface-on-inverse: #f8fafc;
  --semantic-text-primary: var(--text-primary);
  --semantic-text-secondary: var(--text-secondary);
  /* Inverse = text on light/inverse surfaces (dark on this theme); not duplicate of primary. */
  --semantic-text-inverse: var(--semantic-accent-contrast);
  --semantic-typography-font-base: var(--font-body);
  --semantic-radius-s: 8px;
  --semantic-radius-m: var(--border-radius);
  --semantic-radius-l: 24px;
  --semantic-shadow-s: 0 10px 30px rgba(0, 0, 0, 0.22);
  --semantic-shadow-m: 0 18px 50px rgba(0, 0, 0, 0.32);
  --semantic-shadow-l: 0 24px 70px rgba(0, 0, 0, 0.42);
}

.dark_yellow_cta-button,
body.dark_yellow_cta-theme .button.is-primary,
body.dark_yellow_cta-theme .btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  border: 1px solid var(--primary);
  border-radius: 999px;
  color: #111827;
  font-weight: 750;
  box-shadow: 0 10px 30px rgba(250, 204, 21, 0.24);
  transition: var(--transition);
}

.dark_yellow_cta-button:hover,
body.dark_yellow_cta-theme .button.is-primary:hover,
body.dark_yellow_cta-theme .btn-primary:hover {
  background: var(--secondary);
  border-color: var(--secondary);
  color: #111827;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(250, 204, 21, 0.34);
}

.dark_yellow_cta-button:focus-visible,
body.dark_yellow_cta-theme :where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.dark_yellow_cta-card,
body.dark_yellow_cta-theme .card {
  background: radial-gradient(circle at top left, #202838 0%, var(--bg-secondary) 64%);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  color: var(--text-primary);
  transition: var(--transition);
}

.dark_yellow_cta-card:hover,
body.dark_yellow_cta-theme .card:hover {
  border-color: rgba(250, 204, 21, 0.52);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
  transform: translateY(-3px);
}

body.dark_yellow_cta-theme input,
body.dark_yellow_cta-theme textarea,
body.dark_yellow_cta-theme select {
  background: #10141d;
  border-color: rgba(167, 176, 192, 0.35);
  color: var(--text-primary);
}

@media (prefers-reduced-motion: reduce) {
  .dark_yellow_cta-theme *,
  body.dark_yellow_cta-theme * {
    transition-duration: 0.05ms !important;
    animation-duration: 0.05ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}