/**
 * Rudlyn design tokens — visual consistency foundation.
 * Prefer these variables over one-off hex / font / radius values.
 */

:root {
  /* Color */
  --rudlyn-brand: #0a579e;
  --rudlyn-brand-hover: color-mix(in oklab, #0a579e 90%, transparent);
  --rudlyn-accent: #22d3ee;
  --rudlyn-accent-soft: #4fd1ff;
  --rudlyn-ink: #0f1729;
  --rudlyn-muted: #64748b;
  --rudlyn-muted-strong: #475569;
  --rudlyn-surface: #ffffff;
  --rudlyn-surface-muted: #f5f7fa;
  --rudlyn-border: #e1e7ef;
  --rudlyn-gradient-cta: linear-gradient(135deg, #0a579e 0%, #22d3ee 100%);

  /* Typography */
  --rudlyn-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rudlyn-type-display: 48px;
  --rudlyn-type-h1: 36px;
  --rudlyn-type-h2: 28px;
  --rudlyn-type-h3: 20px;
  --rudlyn-type-body: 16px;
  --rudlyn-type-blog: 18px;
  --rudlyn-type-blog-lh: 1.7;
  --rudlyn-type-btn: 15px;

  /* Radius */
  --rudlyn-radius-sm: 4px;
  --rudlyn-radius-md: 8px;
  --rudlyn-radius-lg: 16px;
  --rudlyn-radius-pill: 999px;

  /* Spacing (section vertical rhythm) */
  --rudlyn-section-y: 80px;
  --rudlyn-section-y-md: 56px;
  --rudlyn-section-y-sm: 40px;
}

/* Sitewide font lock */
html,
body,
button,
input,
select,
textarea {
  font-family: var(--rudlyn-font) !important;
}

/* Elementor + common UI inherit Inter */
.elementor-widget,
.elementor-heading-title,
.elementor-button,
.elementor-icon-box-title,
.elementor-icon-box-description,
.mega-menu,
.mega-menu a {
  font-family: var(--rudlyn-font) !important;
}

/* ——— Button system (Primary / Secondary / Ghost) ——— */
.rudlyn-btn-primary,
a.rudlyn-btn-primary,
.elementor-button.rudlyn-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 45px;
  padding: 0 24px;
  border-radius: var(--rudlyn-radius-md) !important;
  border: 1px solid transparent !important;
  background: var(--rudlyn-brand) !important;
  background-image: none !important;
  color: #fff !important;
  font-family: var(--rudlyn-font) !important;
  font-size: var(--rudlyn-type-btn) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  transition: background-color 0.25s ease, filter 0.25s ease !important;
}

.rudlyn-btn-primary:hover,
a.rudlyn-btn-primary:hover,
.elementor-button.rudlyn-btn-primary:hover {
  background: var(--rudlyn-brand-hover) !important;
  color: #fff !important;
}

.rudlyn-btn-secondary,
a.rudlyn-btn-secondary,
.elementor-button.rudlyn-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 45px;
  padding: 0 24px;
  border-radius: var(--rudlyn-radius-md) !important;
  border: 1px solid transparent !important;
  background: var(--rudlyn-gradient-cta) !important;
  background-image: var(--rudlyn-gradient-cta) !important;
  color: #fff !important;
  font-family: var(--rudlyn-font) !important;
  font-size: var(--rudlyn-type-btn) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  transition: filter 0.25s ease !important;
}

.rudlyn-btn-secondary:hover,
a.rudlyn-btn-secondary:hover,
.elementor-button.rudlyn-btn-secondary:hover {
  filter: brightness(1.06);
  color: #fff !important;
}

.rudlyn-btn-ghost,
a.rudlyn-btn-ghost,
.elementor-button.rudlyn-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 45px;
  padding: 0 24px;
  border-radius: var(--rudlyn-radius-md) !important;
  border: 1px solid var(--rudlyn-brand) !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--rudlyn-brand) !important;
  font-family: var(--rudlyn-font) !important;
  font-size: var(--rudlyn-type-btn) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  transition: background-color 0.25s ease, color 0.25s ease !important;
}

.rudlyn-btn-ghost:hover,
a.rudlyn-btn-ghost:hover,
.elementor-button.rudlyn-btn-ghost:hover {
  background: color-mix(in oklab, var(--rudlyn-brand) 8%, transparent) !important;
  color: var(--rudlyn-brand) !important;
}

/* Blog long-form readability (Inter is fine at 18px / 1.7) */
.single-blog-content,
.single-blog-content p,
.single-blog-content li,
.single-blog-content .accordion-button {
  font-family: var(--rudlyn-font) !important;
}

.single-blog-content p,
.single-blog-content ul li,
.single-blog-content ol li {
  font-size: var(--rudlyn-type-blog) !important;
  line-height: var(--rudlyn-type-blog-lh) !important;
  color: var(--rudlyn-muted-strong) !important;
}

.single-blog-content h2,
.single-blog-content h3,
.accordion-content .accordion-button {
  font-family: var(--rudlyn-font) !important;
}

/* ——— Map existing site CTAs onto Primary button tokens ——— */
.header .mega-menu-wrap .mega-menu .mega-work-with-rudlyn-btn .mega-menu-link,
.header.scrolled .mega-menu-wrap .mega-menu .mega-work-with-rudlyn-btn .mega-menu-link {
  border-radius: var(--rudlyn-radius-md) !important;
  background-color: var(--rudlyn-brand) !important;
  border: 1px solid var(--rudlyn-brand) !important;
  color: #fff !important;
  font-family: var(--rudlyn-font) !important;
  font-weight: 600 !important;
}

.header .mega-menu-wrap .mega-menu .mega-work-with-rudlyn-btn .mega-menu-link:hover,
.header.scrolled .mega-menu-wrap .mega-menu .mega-work-with-rudlyn-btn .mega-menu-link:hover {
  background-color: var(--rudlyn-brand-hover) !important;
  border-color: var(--rudlyn-brand) !important;
  color: #fff !important;
}

/* Hero / Elementor solid primary buttons that used off-brand blue gradient */
.hero-btn a.elementor-button,
.common-btn a.elementor-button {
  border-radius: var(--rudlyn-radius-md) !important;
  font-family: var(--rudlyn-font) !important;
  font-size: var(--rudlyn-type-btn) !important;
  font-weight: 700 !important;
}

/* Page top banners / theme PHP sections */
.page-top-banner,
.sp-page-top-banner-sec {
  font-family: var(--rudlyn-font);
}

/* Inputs / cards: prefer md radius over 0/5px scatter where theme sets radius */
.form-control,
input[type='email'],
input[type='text'],
input[type='tel'],
textarea {
  border-radius: var(--rudlyn-radius-md);
  font-family: var(--rudlyn-font);
}

@media (max-width: 1024px) {
  :root {
    --rudlyn-section-y: var(--rudlyn-section-y-md);
  }
}

@media (max-width: 767px) {
  :root {
    --rudlyn-section-y: var(--rudlyn-section-y-sm);
  }
}