/* ---- Font: Manrope (Google Fonts substitute for DNS:NET's production font) */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  --dnsnet-orange:        #EC6608;
  --dnsnet-orange-hover:  #D35807;

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---------- SPACING (4px base) ---------- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: #1A1A1A;
  background: #FFFFFF;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--dnsnet-orange); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--dnsnet-orange); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}