/* Auto-generated by theme_engine.py — do not edit directly, use /admin/theme */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
  --theme-primary: #36517E;
  --theme-primary-rgb: 54, 81, 126;
  --theme-primary-dark: #2c4267;
  --theme-primary-light: #e0e4eb;
  --theme-secondary: #47B3E4;
  --theme-secondary-rgb: 71, 179, 228;
  --theme-secondary-dark: #3a92ba;
  --theme-secondary-light: #e3f3fa;
  --theme-heading-font: 'Poppins', sans-serif;
  --theme-body-font: 'Inter', sans-serif;
  --theme-radius: 14px;
  --theme-radius-sm: calc(14px * 0.5);
  --theme-radius-lg: calc(14px * 1.6);
  --theme-btn-radius: 999px;
  --theme-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  --theme-section-py: 88px;
  --theme-bg: #FFFFFF;
  --theme-surface: #FFFFFF;
  --theme-text: #111827;
  --theme-text-muted: #6B7280;
  --theme-border: #E5E7EB;
  --theme-success: #22C55E;
  --theme-warning: #F59E0B;
  --theme-error: #EF4444;
  --theme-info: #0EA5E9;
}

/* Color-role system — background/surface/text/border + semantic colors.
   Scoped to opt-in ".tx-*" utility classes and the page background, not
   forced onto every legacy selector, so existing bespoke sections (hero,
   navbar, footer, paperless/jobwork pages) keep their own look. */
body { background-color: var(--theme-bg) !important; color: var(--theme-text) !important; }
.tx-surface, .tx-card {
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
}
.tx-muted { color: var(--theme-text-muted) !important; }
.tx-border { border-color: var(--theme-border) !important; }
.tx-success { color: var(--theme-success) !important; }
.tx-success-bg { background-color: var(--theme-success) !important; }
.tx-warning { color: var(--theme-warning) !important; }
.tx-warning-bg { background-color: var(--theme-warning) !important; }
.tx-error { color: var(--theme-error) !important; }
.tx-error-bg { background-color: var(--theme-error) !important; }
.tx-info { color: var(--theme-info) !important; }
.tx-info-bg { background-color: var(--theme-info) !important; }

body { font-family: var(--theme-body-font) !important; }
h1, h2, h3, h4, h5, h6,
.section-title, .hero-content h1, .hero-content h2 {
  font-family: var(--theme-heading-font) !important;
}

a:hover { color: var(--theme-primary) !important; }

/* Primary marketing button (.main-btn used across hero/CTA/navbar) */
.main-btn {
  background-color: var(--theme-primary) !important;
  border: 2px solid var(--theme-primary) !important;
  color: #ffffff !important;
  border-radius: var(--theme-btn-radius) !important;
}
.main-btn::after { background-color: var(--theme-primary-dark) !important; }
.main-btn:hover {
  background-color: var(--theme-primary-dark) !important;
  border-color: var(--theme-primary) !important;
  color: #ffffff !important;
}
.main-btn.border-btn {
  background-color: transparent !important;
  color: var(--theme-primary) !important;
}
.main-btn.border-btn:hover { color: #ffffff !important; }

/* Paperless-family buttons */
.paperless-btn-primary {
  background-color: var(--theme-primary) !important;
  border: 2px solid var(--theme-primary) !important;
  color: #ffffff !important;
  border-radius: var(--theme-btn-radius) !important;
}
.paperless-btn-primary:hover {
  background-color: var(--theme-primary-dark) !important;
  color: #ffffff !important;
}
.paperless-btn-outline {
  border-color: var(--theme-primary) !important;
  color: var(--theme-primary) !important;
  border-radius: var(--theme-btn-radius) !important;
}
.paperless-btn-outline:hover {
  background-color: var(--theme-primary) !important;
  color: #ffffff !important;
}

/* Extra components (testimonials, pricing, etc.) — all theme-aware by default */
.tx-accent { color: var(--theme-primary) !important; }
.tx-accent-bg { background-color: var(--theme-primary) !important; }
.tx-accent-secondary { color: var(--theme-secondary) !important; }
.tx-accent-secondary-bg { background-color: var(--theme-secondary) !important; }
.tx-card, .tx-badge, .tx-icon-wrap { border-radius: var(--theme-radius) !important; }
.tx-btn-primary {
  background-color: var(--theme-primary);
  border: 2px solid var(--theme-primary);
  color: #ffffff;
  border-radius: var(--theme-btn-radius);
}
.tx-btn-primary:hover { background-color: var(--theme-primary-dark); color: #fff; }
.tx-btn-secondary {
  background-color: var(--theme-secondary);
  border: 2px solid var(--theme-secondary);
  color: #ffffff;
  border-radius: var(--theme-btn-radius);
}
.tx-btn-secondary:hover { background-color: var(--theme-secondary-dark); }

/* Shadow style (none/subtle/soft/bold) — applied to cards and icon wraps only,
   not buttons/badges, so it stays a "surface depth" control rather than
   changing button affordance. */
.tx-card, .tx-icon-wrap { box-shadow: var(--theme-shadow) !important; }

/* Section density (compact/comfortable/spacious) — vertical rhythm for every
   component built on the shared .tx-section wrapper. Older/bespoke sections
   (hero, navbar, footer) predate this convention and are unaffected. */
section.tx-section {
  padding-top: var(--theme-section-py) !important;
  padding-bottom: var(--theme-section-py) !important;
}

/* Per-component-type color overrides (Theme editor > Component Colors) */