/* NextGen Tech Challenge Karachi — shared base styles (light theme)
   Brand colours
   --bg:        #F6F8FC   page background
   --surface:   #FFFFFF   cards
   --line:      #E3EAF5   borders
   --text:      #0A1F4D   main text
   --muted:     #4A5873   secondary text
   --blue:      #1E5FD8   primary buttons
   --cyan:      #2EC8F0   accent (links use #1E5FD8)
   Fonts: Space Grotesk (headings), Inter (body), JetBrains Mono (labels)
*/
:root {
  --bg: #F6F8FC;
  --surface: #FFFFFF;
  --line: #E3EAF5;
  --text: #0A1F4D;
  --muted: #4A5873;
  --blue: #1E5FD8;
  --cyan: #2EC8F0;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); color-scheme: light; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, system-ui, sans-serif; }
img { max-width: 100%; }
button { font: inherit; }
[hidden] { display: none !important; }
::selection { background: rgba(30, 95, 216, .18); color: #0A1F4D; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
input::placeholder { color: #5E6E8C; }

/* Tablet & phone */
@media (max-width: 900px) {
  h1 { font-size: 46px !important; letter-spacing: -1px !important; }
  h2 { font-size: 34px !important; }
}
@media (max-width: 640px) {
  h1 { font-size: 38px !important; }
  h2 { font-size: 28px !important; }
  input[type="search"] { width: 100% !important; }
  pre { font-size: 12px !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}