/* ============================================================
   Filip Lazic — base.css
   Shared by every page on the site (index.html + all /pages/*.html)
   Contains: design tokens, reset, base typography, motion preference
   ============================================================ */

:root {
  --white: #ffffff;
  --off-white: #f7f6f4;
  --light: #eeece9;
  --border: #e0ddd8;
  --mid: #b0ada8;
  --dark-mid: #6b6762;
  --ink: #1a1917;
  --black: #0d0c0b;
  --accent: #ff3d2e;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--white);
  color: var(--ink);
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
}

a { color: inherit; }

/* Visually hide an element while keeping it readable to screen readers
   (used for form <label>s that are redundant on-screen once a placeholder
   is present, but still required for accessible form structure). */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Respect people who've asked their OS for reduced motion.
   The custom cursor is also disabled via JS (see index.html) —
   this covers every CSS-driven animation/transition on the site.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  /* These elements are only visible *because* an animation runs
     (opacity starts at 0 and is animated to 1) — with animation
     switched off above, they need to be forced visible instead
     of silently disappearing. */
  .hero-tag, .hero-h1, .hero-desc, .hero-actions,
  .hero-img, .hero-img-badge {
    opacity: 1 !important;
    transform: none !important;
  }
}