/* Site Doc Design System — shared theme layer, August 2026 */
:root {
  --sd-navy: #0f172a;
  --sd-navy-light: #1e293b;
  --sd-navy-dark: #020617;
  --sd-red: #ef4444;
  --sd-red-dark: #dc2626;
  --sd-blue: #3b82f6;
  --sd-blue-dark: #2563eb;
  --sd-green: #22c55e;
  --sd-white: #ffffff;
  --sd-slate-light: #f8fafc;
  --sd-slate-mid: #f1f5f9;
  --sd-slate-border: #e2e8f0;
  --sd-text: #334155;
  --sd-text-body: #475569;
  --sd-text-muted: #64748b;
  --sd-radius: 10px;
  --sd-button-radius: 4px;
  --sd-shadow: 0 2px 10px rgba(15, 23, 42, .06);
  --sd-shadow-hover: 0 14px 32px rgba(15, 23, 42, .12);
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif !important; color: var(--sd-text-body); background: var(--sd-white); }

/* Shared chrome */
nav { background: var(--sd-navy) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }
.nav-logo, .footer-logo { font-family: 'Bebas Neue', sans-serif !important; letter-spacing: 1px !important; }
.nav-links { gap: 24px !important; align-items: center !important; }
.nav-links a { color: rgba(255,255,255,.82) !important; font-weight: 500 !important; }
.nav-links a:hover { color: var(--sd-white) !important; }
.nav-cta, a.nav-cta { background: var(--sd-red) !important; color: var(--sd-white) !important; border-radius: var(--sd-button-radius) !important; font-weight: 700 !important; }
.nav-cta:hover, a.nav-cta:hover { background: var(--sd-red-dark) !important; transform: translateY(-1px); }

/* Headings and links */
h1, h2, h3, h4, .section-title, .hero h1, .hero h2 { font-family: 'Bebas Neue', sans-serif; letter-spacing: .5px; }
a { color: var(--sd-blue-dark); }
a:hover { color: var(--sd-red-dark); }

/* Buttons */
.btn, button, input[type="submit"], input[type="button"], .btn-red, .btn-blue, .btn-submit {
  border-radius: var(--sd-button-radius) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
}
.btn-red, .btn-submit { background: var(--sd-red) !important; color: var(--sd-white) !important; }
.btn-red:hover, .btn-submit:hover { background: var(--sd-red-dark) !important; box-shadow: 0 8px 24px rgba(239,68,68,.28); }
.btn-blue { background: var(--sd-blue) !important; color: var(--sd-white) !important; }
.btn-blue:hover { background: var(--sd-blue-dark) !important; }
.btn-outline { border-radius: var(--sd-button-radius) !important; }

/* Cards and sections */
[class*="card"], .pricing-card, .service-card, .info-card, .callout-box, .form-card {
  border-radius: var(--sd-radius);
}
.pillar-card, .portfolio-card, .why-card, .pricing-card, .service-card, .info-card, .callout-box {
  box-shadow: var(--sd-shadow);
}
.pillar-card:hover, .portfolio-card:hover, .pricing-card:hover, .service-card:hover { box-shadow: var(--sd-shadow-hover); }

/* Forms: accessible, consistent, never white text on light surfaces */
input:not([type="submit"]):not([type="button"]), select, textarea {
  font-family: 'Inter', sans-serif !important;
  color: var(--sd-text) !important;
  background: var(--sd-white) !important;
  border: 1px solid var(--sd-slate-border) !important;
  border-radius: var(--sd-button-radius) !important;
}
input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(59,130,246,.22) !important;
  border-color: var(--sd-blue) !important;
}

/* Dark surfaces keep white text; light surfaces keep readable slate text */
.hero, .cta-strip, .why-sitedoc, .stats-strip, footer { color: var(--sd-white); }
footer { background: var(--sd-navy-dark) !important; }
footer a { color: rgba(255,255,255,.78) !important; }
footer a:hover { color: var(--sd-white) !important; }

@media (max-width: 760px) {
  .container, .nav-inner { padding-left: 18px !important; padding-right: 18px !important; }
  nav { padding: 12px 0 !important; }
  .nav-links { gap: 12px !important; }
  .nav-links a { font-size: 12px !important; }
  .nav-cta { padding: 8px 12px !important; }
  .hero { padding: 64px 0 52px !important; }
  .hero h1, .services-header h1, .contact-info h1 { font-size: clamp(42px, 13vw, 64px) !important; }
  .section-title { font-size: clamp(36px, 10vw, 46px) !important; }
  .btn { width: 100%; justify-content: center; }
}