/* ============================================================
   style.css — GLOBAL VARIABLES & BASE RESET
   This is the foundation. Every other CSS file builds on this.
   ============================================================ */

/* ── COLOUR & FONT VARIABLES ──────────────────────────────── */
:root {
  /* Brand colours */
  --gold:         #C8A84B;   /* main gold accent */
  --gold-dark:    #A8892E;   /* darker gold for hover */
  --gold-bg:      rgba(200, 168, 75, 0.15);  /* transparent gold for icon boxes */

  /* Background colours */
  --bg-primary:   #0D0D0D;   /* main dark background */
  --bg-secondary: #1A1A1A;   /* slightly lighter dark (cards, footer) */
  --bg-card:      #1C1C1C;   /* card background */

  /* Text colours */
  --text-white:   #FFFFFF;
  --text-gray:    #9CA3AF;   /* body text */
  --text-muted:   #6B7280;   /* very light text */

  /* Borders */
  --border:       rgba(255, 255, 255, 0.08);
  --border-gold:  rgba(200, 168, 75, 0.3);

  /* Fonts */
  --font-heading: 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Spacing */
  --nav-height:   70px;
  --max-width:    1200px;
  --section-pad:  90px;
  --container-px: 40px;

  /* Radius */
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;

  /* Transition */
  --transition:   0.25s ease;
}

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

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg-primary);
  color: var(--text-white);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── GLOBAL ENHANCEMENTS ─────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

img[loading="lazy"] {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal,
  .reveal.is-visible {
    transition: none;
    transform: none;
    opacity: 1;
  }
}