/* ==================================================================
   base.css — Reset, custom properties, typography
   Loaded FIRST before any other stylesheet.
   ================================================================== */

/* Box model reset */
*, *::before, *::after { box-sizing: border-box; }

/* Remove default margins */
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }

/* Smooth scroll for anchor links */
html { scroll-behavior: smooth; }

/* Core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Images */
img, picture, video, canvas, svg { display: block; max-width: 100%; }

/* Form elements inherit fonts */
input, button, textarea, select { font: inherit; }

/* Remove animations for users who prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==================================================================
   Design Tokens (CSS Custom Properties)
   ================================================================== */
:root {
  /* Widths */
  --site-width: 1350px;
  --site-padding: 24px;

  /* Colors — brand */
  --c-brand:       #ff8f13;
  --c-brand-hover: #e67e00;
  --c-brand-light: #fff7ed;

  /* Colors — navy (legacy invadeIT blue, used for menu/links) */
  --c-navy:        #203189;
  --c-navy-dark:   #1a1a2e;
  --c-navy-light:  #2a3fa0;

  /* Colors — neutral */
  --c-text:        #1a1a1a;
  --c-text-muted:  #6b7280;
  --c-text-faint:  #9ca3af;
  --c-border:      #c9ced6;
  --c-border-light:#e5e7eb;
  --c-bg:          #f5f6f8;
  --c-bg-soft:     #f8f9fb;
  --c-white:       #ffffff;

  /* Colors — semantic */
  --c-success:     #047857;
  --c-warning:     #c2410c;
  --c-danger:      #b91c1c;
  --c-link:        #1a4db3;
  --c-link-hover:  #153d8a;

  /* Typography */
  --font-body: "Open Sans", "Segoe UI", Helvetica, Roboto, Arial, sans-serif;
  --font-mono: "Fira Code", "JetBrains Mono", Consolas, monospace;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* Z-index layers */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-mega-menu: 300;
  --z-overlay: 500;
  --z-modal: 1000;

  /* Transitions */
  --ease-default: 0.15s ease;
}

/* ==================================================================
   Typography defaults
   ================================================================== */
body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-text);
  background: var(--c-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.25;
}

a {
  color: var(--c-link);
  text-decoration: none;
}
a:hover {
  color: var(--c-link-hover);
  text-decoration: underline;
}

/* Utility: visually hidden but accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}