/* ==============================================
GOULDBOURNE.CO.UK | VERSION 1.0
Colour Palette & Design System
============================================== */

:root {
  /* Base Backgrounds — soft dark, not pure black */
  --bg-main:       #121417;   /* Primary background */
  --bg-surface:    #1A1D21;   /* Cards, panels, sections */
  --bg-elevated:   #24282D;   /* Hover, modals, highlights */

  /* Primary Brand — Gold tones */
  --gold-main:     #D4AF37;   /* Rich signature gold */
  --gold-bright:   #F2D06B;   /* Highlight / headings */
  --gold-muted:    #B8972F;   /* Subtle borders / accents */

  /* Accent — Emerald green */
  --emerald-main:  #1F7A54;   /* Buttons & focus elements */
  --emerald-bright:#2EA875;   /* Hover / active states */
  --emerald-muted: #185C40;   /* Dividers / subtle accents */

  /* Text & Contrast */
  --text-primary:  #F8F9FA;   /* Brightest text */
  --text-secondary:#C5C9CE;   /* Standard body text */
  --text-muted:    #8A8F96;   /* Secondary notes / metadata */
  --text-on-gold:  #121417;   /* Dark text on gold backgrounds */
  --text-on-emerald:#FFFFFF;  /* White text on emerald backgrounds */

  /* Borders & Dividers */
  --border-light:  #2E3238;
  --border-gold:   #423A20;
  --border-emerald:#203A30;
}

/* ==============================================
Global Reset & Base Styles
============================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--bg-main);
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 16px;
}

/* Typography */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1rem;
}

h1 { color: var(--gold-bright); font-size: 2.5rem; }
h2 { color: var(--gold-main); font-size: 2rem; }
h3 { color: var(--gold-main); font-size: 1.5rem; }
h4 { color: var(--emerald-bright); font-size: 1.2rem; }

p { margin-bottom: 1.2rem; }

a {
  color: var(--emerald-bright);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--gold-bright);
}

/* Layout Container */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Header & Navigation */
header {
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-gold);
  padding: 1.2rem 0;
  margin-bottom: 2rem;
}

nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.8rem;
}

nav a {
  color: var(--text-secondary);
  font-weight: 500;
}

nav a:hover {
  color: var(--gold-bright);
}

nav a.active {
  color: var(--gold-main);
  border-bottom: 2px solid var(--gold-main);
}

/* Sections & Cards */
section {
  margin-bottom: 3rem;
}

.card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.card:hover {
  border-color: var(--emerald-muted);
  background-color: var(--bg-elevated);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: 4px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  border: none;
  transition: background 0.2s ease;
}

.btn-gold {
  background-color: var(--gold-main);
  color: var(--text-on-gold);
}

.btn-gold:hover {
  background-color: var(--gold-bright);
  color: var(--text-on-gold);
}

.btn-emerald {
  background-color: var(--emerald-main);
  color: var(--text-on-emerald);
}

.btn-emerald:hover {
  background-color: var(--emerald-bright);
}

/* Footer */
footer {
  background-color: var(--bg-surface);
  border-top: 1px solid var(--border-gold);
  padding: 1.5rem 0;
  margin-top: 3rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Responsive */
@media (max-width: 768px) {
  nav ul { flex-direction: column; gap: 0.8rem; }
  h1 { font-size: 2rem; }
}