/* SynergySE marketing site — design tokens.
   Edit colors and fonts here; the .jsx files reference these CSS variables. */

:root {
  /* Type stacks */
  --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Brand colors */
  --slate-950: #020617;
  --slate-900: #0F172A;
  --slate-800: #1E293B;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --slate-50:  #F8FAFC;

  --sky-500:   #0EA5E9;
  --sky-400:   #38BDF8;
  --teal-400:  #2DD4BF;
  --teal-600:  #0D9488;
  --lime-400:  #A3E635;
  --green-700: #15803D;
  --green-600: #16A34A;
  --green-50:  #F0FDF4;
}

/* Required-field feedback. :user-invalid only matches after the user has
   attempted to submit (or blurred an empty required field) — unlike :invalid,
   which fires on initial render and would paint every empty required field
   red before any interaction. !important is needed because Contact.jsx sets
   the input border-color inline on focus; the invalid state must win. */
input:user-invalid,
textarea:user-invalid {
  border-color: #DC2626 !important;
}

html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* Anchor jumps from the nav land below the condensed sticky nav (60px) plus
   a touch of breathing room, so section headlines don't crowd the bar. */
section[id] { scroll-margin-top: 76px; }
body {
  font-family: var(--font-sans);
  background: var(--slate-900);
  color: var(--slate-100);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* { box-sizing: border-box; }