/* ============================================================
   base.css — Reset, custom properties, typography
   Overberg Service Centre
   ============================================================ */

/* --- Custom Properties (Design Tokens) -------------------- */
:root {
  /* Colors — dark theme */
  --color-bg:           #0D0D12;
  --color-dark:         #0D0D12;
  --color-surface:      #16161E;
  --color-surface-2:    #1E1E28;
  --color-accent:       #3B82F6;
  --color-accent-dark:  #2563EB;
  --color-accent-dim:   rgba(59, 130, 246, 0.12);
  --color-white:        #FFFFFF;
  --color-text:         #E8EAF0;
  --color-text-muted:   #8892A4;
  --color-border:       rgba(255, 255, 255, 0.07);
  --color-border-mid:   rgba(255, 255, 255, 0.12);

  /* Typography */
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* Spacing scale */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  48px;
  --space-xl:  80px;

  /* Radius */
  --radius-sm: 3px;
  --radius-md: 8px;

  /* Transitions */
  --transition: 0.2s ease;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

ul,
ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* --- Typography ------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.1;
  color: var(--color-white);
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.2rem, 6vw, 4rem);   }
h2 { font-size: clamp(1.7rem, 4vw, 2.8rem); font-weight: 800; }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 700; letter-spacing: -0.01em; }
h4 { font-size: 1rem; font-weight: 700; }

p {
  color: var(--color-text-muted);
}

strong {
  color: var(--color-text);
  font-weight: 600;
}

/* ============================================================
   Scroll Reveal
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px);  }

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}