/* ============================================
   FOUNDATION
   ============================================ */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

:root {
  --color-black: #0A0A0A;
  --color-surface: #1A1A1A;
  --color-elev-1: #111111;
  --color-gold: #E8C547;
  --color-white: #FFFFFF;
  --color-muted: #888888;
  --color-muted-light: #9A9A9A;
  --color-body: #B8B8B8;
  --border-light: rgba(255,255,255,0.06);
  --border-gold-subtle: rgba(232,197,71,0.12);
  --font-display: 'Montserrat', sans-serif;
  --font-accent: 'Playfair Display', serif;
  --font-body: 'Source Sans 3', sans-serif;
  --nav-height: 72px;
  --nav-padding-x: clamp(28px, 6vw, 180px);
  --section-px: clamp(48px, 6vw, 180px);

  /* Semantic application tokens (portal + admin) */
  --sidebar-bg:      var(--color-elev-1);
  --status-set:      #888888;
  --status-progress: #E8C547;
  --status-complete: #6aaa64;
  --status-missed:   #c0504d;
  --status-pivoted:  #8a8a5a;
}

html {
  overflow-x: clip;
}

body {
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-body);
  overflow-x: hidden;
}

/* GPU compositing for animated layers */
.intro-overlay,
.mask-hole,
.hero__content {
  will-change: transform, opacity;
}

/* Keyboard focus: a clear gold ring for keyboard users only (not on mouse
   click), site-wide. An accessibility + craft detail every surface inherits. */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}