/* ═══════════════════════════════════════════════════════════════
   KAHLA LABS — Design Tokens
   Per BRAND.md v1.0 — April 2026
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Surfaces ────────────────────────────────────────────── */
  --k-void:        #080705;   /* page bg */
  --k-charcoal:    #131110;   /* cards, panels */
  --k-surface:     #1C1A17;   /* layered surfaces */
  --k-raised:      #252118;   /* hover, active */

  /* ── Text ────────────────────────────────────────────────── */
  --k-cream:       #F0E6CC;   /* primary text */
  --k-cream-dim:   #C9BFA6;   /* secondary body — AA over busy backdrops */
  --k-muted:       #8A8070;   /* captions, meta */
  --k-faint:       #4A4438;   /* disabled, ultra-subtle */

  /* ── Accents ─────────────────────────────────────────────── */
  --k-gold:        #C9A34F;   /* primary accent */
  --k-gold-light:  #E2C27A;
  --k-gold-glow:   rgba(201, 163, 79, 0.22);
  --k-gold-subtle: rgba(201, 163, 79, 0.08);
  --k-terra:       #9B4E30;   /* secondary accent */
  --k-terra-light: #C4623D;

  /* ── Borders (0.5px signature) ────────────────────────────── */
  --k-line:        rgba(240, 230, 204, 0.08);
  --k-line-strong: rgba(240, 230, 204, 0.18);
  --k-line-gold:   rgba(201, 163, 79, 0.28);

  /* ── Typography ──────────────────────────────────────────── */
  --k-display: 'Cormorant Garamond', Georgia, serif;
  --k-body:    'DM Sans', -apple-system, system-ui, sans-serif;
  --k-mono:    'JetBrains Mono', ui-monospace, monospace;

  --k-w-light:    300;
  --k-w-regular:  400;
  --k-w-medium:   500;

  --k-track-label:  0.14em;
  --k-track-caption: 0.08em;
  --k-track-logo:    0.32em;

  /* ── Spacing scale ───────────────────────────────────────── */
  --k-1:  4px;
  --k-2:  8px;
  --k-3:  12px;
  --k-4:  16px;
  --k-5:  20px;
  --k-6:  24px;
  --k-8:  32px;
  --k-10: 40px;
  --k-12: 48px;
  --k-16: 64px;
  --k-20: 80px;
  --k-24: 96px;
  --k-32: 128px;
  --k-40: 160px;

  /* ── Radius (never > 4px) ─────────────────────────────────── */
  --k-r-sm: 2px;
  --k-r:    3px;
  --k-r-md: 4px;

  /* ── Motion ──────────────────────────────────────────────── */
  --k-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --k-ease-in: cubic-bezier(0.6, 0, 0.8, 0.3);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--k-void);
  color: var(--k-cream);
  font-family: var(--k-body);
  font-weight: var(--k-w-light);
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }

/* Film grain — applied site-wide */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* Type primitives */
.k-label {
  font-family: var(--k-body);
  font-weight: var(--k-w-medium);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--k-track-label);
  color: var(--k-muted);
}
.k-caption {
  font-family: var(--k-body);
  font-weight: var(--k-w-light);
  font-size: 11px;
  letter-spacing: var(--k-track-caption);
  color: var(--k-muted);
  text-transform: uppercase;
}
.k-hero {
  font-family: var(--k-display);
  font-weight: var(--k-w-light);
  font-size: clamp(48px, 7.5vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--k-cream);
}
.k-hero--italic {
  font-style: italic;
  font-weight: var(--k-w-regular);
  color: var(--k-gold);
}
.k-h1 {
  font-family: var(--k-display);
  font-weight: var(--k-w-light);
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.k-h2 {
  font-family: var(--k-display);
  font-weight: var(--k-w-regular);
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.k-body-lg {
  font-size: 17px;
  line-height: 1.7;
  color: var(--k-cream);
  font-weight: var(--k-w-light);
}
.k-body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--k-cream);
  font-weight: var(--k-w-light);
}
.k-body-muted {
  font-size: 15px;
  line-height: 1.75;
  color: var(--k-muted);
  font-weight: var(--k-w-light);
}
.k-pull-quote {
  font-family: var(--k-display);
  font-style: italic;
  font-weight: var(--k-w-regular);
  font-size: 20px;
  line-height: 1.5;
  color: var(--k-gold);
}

/* Buttons */
.k-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--k-3);
  padding: 14px 24px;
  font-family: var(--k-body);
  font-weight: var(--k-w-regular);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--k-r);
  transition: all 0.4s var(--k-ease);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.k-btn--primary {
  background: var(--k-gold);
  color: var(--k-void);
  border: 0.5px solid var(--k-gold);
}
.k-btn--primary:hover {
  background: var(--k-gold-light);
  border-color: var(--k-gold-light);
  box-shadow: 0 0 32px var(--k-gold-glow);
  transform: translateY(-1px);
}
.k-btn--ghost {
  background: transparent;
  color: var(--k-cream);
  border: 0.5px solid var(--k-line-strong);
}
.k-btn--ghost:hover {
  border-color: var(--k-gold);
  color: var(--k-gold);
}
.k-btn .arrow { transition: transform 0.4s var(--k-ease); }
.k-btn:hover .arrow { transform: translateX(4px); }

/* Utility */
.k-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--k-8);
}
.k-section {
  padding: var(--k-32) 0;
  position: relative;
}
.k-divider {
  height: 0.5px;
  background: var(--k-line);
  width: 100%;
}
.k-line-v {
  width: 0.5px;
  background: var(--k-line);
  align-self: stretch;
}

/* Reveal on scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1s var(--k-ease), transform 1s var(--k-ease);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-44px); }
[data-reveal="right"] { transform: translateX(44px); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="fade"]  { transform: none; }
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }
[data-reveal-delay="5"] { transition-delay: 0.40s; }

/* Respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-sky, .hero-sun, .hero-eyebrow-dot, .hero-scroll-cue svg { animation: none !important; }
  .hero-center { opacity: 1 !important; transform: none !important; }
  .systems-step, .systems-step::before, .sys-node { transition: none !important; }
  * { scroll-behavior: auto !important; }
}

/* Atmospheric gold orb */
.k-atmos {
  position: fixed;
  pointer-events: none;
  z-index: 0;
}
.k-atmos-gold {
  width: 900px;
  height: 900px;
  top: -20%;
  right: -20%;
  background: radial-gradient(circle, rgba(201, 163, 79, 0.12) 0%, transparent 60%);
  filter: blur(80px);
  animation: k-float 28s ease-in-out infinite;
}
.k-atmos-terra {
  width: 700px;
  height: 700px;
  bottom: -20%;
  left: -15%;
  background: radial-gradient(circle, rgba(155, 78, 48, 0.08) 0%, transparent 60%);
  filter: blur(90px);
  animation: k-float 34s ease-in-out infinite reverse;
}
@keyframes k-float {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(40px, -30px) scale(1.08); }
}

/* Grid backdrop */
.k-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--k-line) 0.5px, transparent 0.5px),
    linear-gradient(90deg, var(--k-line) 0.5px, transparent 0.5px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black 10%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}

/* Global nav */
.k-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: var(--k-5) var(--k-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(8, 7, 5, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 0.5px solid var(--k-line);
}
.k-nav-wordmark {
  font-family: var(--k-display);
  font-weight: var(--k-w-light);
  font-size: 18px;
  letter-spacing: var(--k-track-logo);
  color: var(--k-cream);
  display: flex;
  align-items: center;
  gap: var(--k-3);
}
.k-nav-links {
  display: flex;
  gap: var(--k-8);
  align-items: center;
}
.k-nav-links a {
  font-family: var(--k-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k-muted);
  transition: color 0.3s var(--k-ease);
  position: relative;
  padding: 4px 0;
}
.k-nav-links a:hover, .k-nav-links a.is-active {
  color: var(--k-cream);
}
.k-nav-links a.is-active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  height: 0.5px;
  background: var(--k-gold);
}

/* Footer */
.k-footer {
  border-top: 0.5px solid var(--k-line);
  padding: var(--k-20) 0 var(--k-8);
  margin-top: var(--k-32);
  position: relative;
}
.k-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--k-12);
}
.k-footer-col h4 {
  font-family: var(--k-body);
  font-weight: var(--k-w-medium);
  font-size: 11px;
  letter-spacing: var(--k-track-label);
  text-transform: uppercase;
  color: var(--k-muted);
  margin: 0 0 var(--k-5);
}
.k-footer-col a {
  display: block;
  font-size: 14px;
  color: var(--k-cream);
  margin-bottom: var(--k-2);
  transition: color 0.3s var(--k-ease);
}
.k-footer-col a:hover { color: var(--k-gold); }
.k-footer-base {
  margin-top: var(--k-12);
  padding-top: var(--k-6);
  border-top: 0.5px solid var(--k-line);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--k-faint);
}

/* Scroll position indicator (right edge) */
.k-scrollnav {
  position: fixed;
  right: var(--k-6);
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: var(--k-4);
}
.k-scrollnav-tick {
  width: 24px;
  height: 0.5px;
  background: var(--k-line-strong);
  transition: all 0.4s var(--k-ease);
  cursor: pointer;
  position: relative;
}
.k-scrollnav-tick.is-active {
  width: 40px;
  background: var(--k-gold);
}
.k-scrollnav-tick:hover::after {
  content: attr(data-label);
  position: absolute;
  right: 36px;
  top: -6px;
  font-family: var(--k-body);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--k-cream);
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 900px) {
  .k-nav-links { display: none; }
  .k-scrollnav { display: none; }
  .k-footer-grid { grid-template-columns: 1fr 1fr; }
  .k-section { padding: var(--k-20) 0; }
}