/* Skillmore brand tokens and baseline typography.
 * Values chosen to match the reference site exactly (Tailwind slate / blue).
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* Core palette — Tailwind slate + blue-500 (matches reference --foreground / --primary) */
  --foreground: #0f172a;        /* slate-900  (body text / nav text / dark footer) */
  --muted-foreground: #64748b;  /* slate-500  (secondary copy) */
  --border: #e2e8f0;            /* slate-200 */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-400: #94a3b8;

  --primary: #3b82f6;           /* blue-500 */
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-600: #2563eb;
  --indigo-50: #eef2ff;
  --indigo-700: #4338ca;

  --red-50: #fef2f2;
  --red-100: #fee2e2;
  --red-500: #ef4444;

  --white: #ffffff;

  /* Shape */
  --radius-xl: 12px;
  --radius-2xl: 16px;

  /* Typography */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--foreground);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  line-height: 1.2;
}

a { color: var(--primary); }
a:hover { color: var(--blue-600); }

img { max-width: 100%; height: auto; display: block; }