:root {
  --background: oklch(0.13 0.005 80);
  --foreground: oklch(0.96 0.01 90);
  --card: oklch(0.17 0.008 80);
  --primary: oklch(0.82 0.14 85);
  --primary-foreground: oklch(0.13 0.005 80);
  --muted: oklch(0.22 0.01 80);
  --muted-foreground: oklch(0.7 0.02 85);
  --gold: oklch(0.82 0.14 85);
  --gold-soft: oklch(0.9 0.1 90);
  --gold-deep: oklch(0.62 0.13 75);
  --border: oklch(0.82 0.14 85 / 18%);
  --gradient-gold: linear-gradient(135deg, oklch(0.9 0.1 90) 0%, oklch(0.82 0.14 85) 50%, oklch(0.62 0.13 75) 100%);
  --shadow-gold: 0 10px 40px -10px oklch(0.82 0.14 85 / 0.35);
}

html { scroll-behavior: smooth; }
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: 'Manrope', 'Inter', sans-serif;
  letter-spacing: -0.02em;
}

/* ===== Utilities ===== */
.text-gradient-gold {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bg-gradient-gold { background: var(--gradient-gold); }
.glass {
  background: linear-gradient(180deg, oklch(1 0 0 / 0.04), oklch(1 0 0 / 0.01));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid oklch(0.82 0.14 85 / 0.18);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.glass:hover { border-color: oklch(0.82 0.14 85 / 0.45); }
.shadow-gold { box-shadow: var(--shadow-gold); }
.marquee { animation: marquee 30s linear infinite; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.animate-fade-up { animation: fade-up 0.8s ease-out both; }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.grid-bg {
  background-image:
    linear-gradient(oklch(0.82 0.14 85 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.82 0.14 85 / 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ===== Colour helpers (Tailwind CDN compatibility) ===== */
.bg-background { background-color: var(--background); }
.bg-card { background-color: var(--card); }
.bg-card\/20 { background-color: color-mix(in oklab, var(--card) 20%, transparent); }
.bg-card\/30 { background-color: color-mix(in oklab, var(--card) 30%, transparent); }
.bg-card\/40 { background-color: color-mix(in oklab, var(--card) 40%, transparent); }
.bg-background\/40 { background-color: color-mix(in oklab, var(--background) 40%, transparent); }
.bg-background\/70 { background-color: color-mix(in oklab, var(--background) 70%, transparent); }
.bg-background\/80 { background-color: color-mix(in oklab, var(--background) 80%, transparent); }
.bg-primary\/5 { background-color: oklch(0.82 0.14 85 / 0.05); }
.bg-primary\/10 { background-color: oklch(0.82 0.14 85 / 0.10); }
.bg-primary\/15 { background-color: oklch(0.82 0.14 85 / 0.15); }

.text-foreground { color: var(--foreground); }
.text-foreground\/40 { color: color-mix(in oklab, var(--foreground) 40%, transparent); }
.text-foreground\/80 { color: color-mix(in oklab, var(--foreground) 80%, transparent); }
.text-foreground\/90 { color: color-mix(in oklab, var(--foreground) 90%, transparent); }
.text-primary { color: var(--primary); }
.text-primary-foreground { color: var(--primary-foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-muted-foreground\/80 { color: color-mix(in oklab, var(--muted-foreground) 80%, transparent); }

.border-border\/40 { border-color: oklch(0.82 0.14 85 / 0.12); }
.border-border\/50 { border-color: oklch(0.82 0.14 85 / 0.15); }
.border-primary\/30 { border-color: oklch(0.82 0.14 85 / 0.30); }
.border-primary\/40 { border-color: oklch(0.82 0.14 85 / 0.40); }
.border-primary\/60 { border-color: oklch(0.82 0.14 85 / 0.60); }

.font-display { font-family: 'Manrope', 'Inter', sans-serif; letter-spacing: -0.02em; }

/* ============================================================
   Personal brand mark — "MD" in gold with "MPHO DAGADA" wordmark.
   Echoes the company-site treatment but distinct for Mpho's
   personal brand identity.
   ============================================================ */
.brand-mark {
  font-family: 'Playfair Display', 'Manrope', serif;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-mark__r {
  color: var(--foreground);
  background: none;
  -webkit-text-fill-color: var(--foreground);
}
.brand-word {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted-foreground);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.brand-mark--footer { font-size: 1.8rem; }

header nav a { font-weight: 600; }

/* ===== Page-specific accents ===== */
.book-cover {
  aspect-ratio: 3/4;
  background: linear-gradient(160deg, oklch(0.22 0.05 80), oklch(0.13 0.01 80));
  border: 1px solid oklch(0.82 0.14 85 / 0.25);
  display: grid;
  place-items: center;
  font-family: 'Playfair Display', serif;
  text-align: center;
  padding: 1.5rem;
}