/* ═══════════════════════════════════════════════
   GearLink — CSS Variables & Reset
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');

:root {
  /* Brand */
  --blue:         #0c4d8b;
  --blue-dark:    #0a3f74;
  --blue-deeper:  #071828;
  --teal:         #02b1b5;
  --teal-dark:    #01999d;
  --teal-light:   #e0fafa;

  /* Neutrals */
  --dark:         #071828;
  --mid:          #1a3a52;
  --text:         #0d2233;
  --muted:        #5a7a8e;
  --border:       #d0e8ee;
  --white:        #ffffff;
  --cream:        #f5fbfc;

  /* Semantic */
  --warn:         #ff6b35;
  --success:      #00c47a;
  --error:        #e53e3e;

  /* Typography */
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* Spacing */
  --section-pad:  5rem 5vw;
  --radius-sm:    10px;
  --radius-md:    16px;
  --radius-lg:    20px;
  --radius-xl:    24px;
  --radius-pill:  50px;

  /* Shadows */
  --shadow-sm:    0 4px 18px rgba(12,77,139,.12);
  --shadow-md:    0 8px 32px rgba(12,77,139,.15);
  --shadow-lg:    0 16px 48px rgba(12,77,139,.18);
  --shadow-teal:  0 4px 18px rgba(2,177,181,.35);
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

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

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  line-height: 1.15;
}

a { text-decoration: none; color: inherit; }

ul { list-style: none; }

img, svg { display: block; }

input, select, textarea, button {
  font-family: var(--font-body);
}

button { cursor: pointer; }