/* =========================================================================
   THEME.CSS
   Central design tokens for the whole site — colors, type, spacing, shadows.
   Every other stylesheet (nav.css, home.css, about.css, etc.) should pull
   its values from here instead of hard-coding hex codes. Keeps everything
   we build later consistent with this page.
   ========================================================================= */

:root {
  --on-lime:         #0C2117;  /* dark text used on lime fills */
  --lime:            #93DF13;
  --card-light:      #F3F6F3;
  --card-ink:        #14211B;


  /* ---- brand blues (deep, "vault at midnight" navy through electric blue) ---- */
  --midnight:        #000000;
  --navy-950:        #0C2017;
  --navy-900:        #0E1B14;
  --navy-800:        #123125;
  --navy-700:        #1A4231;
  --navy-600:        #235A42;
  --blue-600:        #7FC40E;
  --blue-500:        #93DF13;
  --blue-400:        #A9EE34;
  --blue-300:        #B4F04E;
  --sky-200:         #DDF8A8;

  /* ---- wealth accent (metals: gold / silver) ---- */
  --gold-600:        #A9873F;
  --gold-500:        #C6A052;
  --gold-400:        #E3C57E;
  --silver-400:      #C9D3CC;

  /* ---- signal colors ---- */
  --success:         #2FD07A;
  --success-dim:     #1F9D55;
  --danger:          #f2495c;
  --danger-dim:      #c73246;

  /* ---- neutrals ---- */
  --ivory:           #F3F6F3;
  --white:           #ffffff;
  --muted-100:       #CBDACF;
  --muted-300:       #9DB1A4;
  --muted-500:       #6F8578;
  --border-subtle:   rgba(255, 255, 255, 0.08);
  --border-strong:   rgba(255, 255, 255, 0.16);

  /* ---- surfaces ---- */
  --surface-0:       var(--navy-950);
  --surface-1:       var(--navy-900);
  --surface-2:       var(--navy-800);
  --surface-3:       var(--navy-700);
  --glass-fill:      rgba(18, 49, 37, 0.6);

  /* ---- gradients (used sparingly, on purpose) ---- */
  --gradient-hero:   radial-gradient(circle at 50% 25%, #0E1B14 48%, #000000 100%);
  --gradient-gold:   linear-gradient(120deg, #C6A052 0%, #E3C57E 50%, #A9873F 100%);
  --gradient-blue:   linear-gradient(180deg, #A9EE34 0%, #93DF13 100%);  /* lime CTA gradient */
  --gradient-card:   linear-gradient(160deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 60%);

  /* ---- type ---- */
  --font-display: "Poppins", "Segoe UI", sans-serif;
  --font-body:    "Poppins", "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "Consolas", monospace;

  --fs-xs:   0.72rem;
  --fs-sm:   0.83rem;
  --fs-base: 0.95rem;
  --fs-md:   1.05rem;
  --fs-lg:   1.2rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  1.9rem;
  --fs-3xl:  2.5rem;
  --fs-4xl:  3.1rem;

  /* ---- spacing scale ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---- shape / elevation ---- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(2, 8, 20, 0.35);
  --shadow-md: 0 12px 32px rgba(2, 8, 20, 0.45);
  --shadow-lg: 0 24px 64px rgba(2, 8, 20, 0.55);
  --shadow-gold-glow: 0 0 0 1px rgba(198,160,82,.3), 0 8px 30px rgba(198,160,82,.15);
  --shadow-blue-glow: 0 14px 30px -16px rgba(147,223,19,.55), 0 0 16px rgba(147,223,19,.2);

  --transition-fast: 160ms ease;
  --transition-base: 280ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 560ms cubic-bezier(0.22, 1, 0.36, 1);

  --max-width: 1200px;
}

/* Small reset that every page sharing this theme can rely on */
* , *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0;
  color: var(--white);
  letter-spacing: -0.02em;
}

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

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

.eyebrow {
  font-family: var(--font-body); font-weight: 800;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--blue-300);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.text-gold { color: var(--gold-400); }
.text-blue { color: var(--blue-300); }
.text-muted { color: var(--muted-300); }
.mono { font-family: var(--font-mono); }

.up   { color: var(--success); }
.down { color: var(--danger); }

/* buttons shared across the whole site */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 14px 28px;
  border-radius: 14px;
  font-weight: 700;
  font-size: var(--fs-sm);
  border: 1px solid transparent;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn-primary {
  background: var(--gradient-blue);
  color: var(--on-lime);
  text-transform: uppercase;
  letter-spacing: .01em;
  box-shadow: var(--shadow-blue-glow), inset 0 1px 0 rgba(255,255,255,.4);
}
@property --beam { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes beam-spin { to { --beam: 360deg; } }
.btn-primary::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--beam), transparent 0 290deg, rgba(255,255,255,.15) 318deg, #fff 344deg, #E3C57E 356deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: beam-spin 2.8s linear infinite;
}
.btn-primary:hover { box-shadow: 0 20px 40px -16px rgba(147,223,19,.72), 0 0 22px rgba(147,223,19,.3); transform: translateY(-2px); }

.btn-gold {
  background: var(--gradient-gold);
  color: var(--on-lime);
  box-shadow: var(--shadow-gold-glow);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(198,160,82,0.5), 0 12px 34px rgba(198,160,82,0.3); }

.btn-ghost {
  background: transparent;
  color: var(--ivory);
  border-color: var(--border-strong);
}
.btn-ghost:hover { background: rgba(255,255,255,0.06); border-color: var(--blue-300); }

.btn-block { width: 100%; }
.btn-sm { padding: 9px 18px; font-size: var(--fs-xs); }

/* scroll-reveal utility, toggled by JS via IntersectionObserver */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 90ms; }
.reveal-delay-2 { transition-delay: 180ms; }
.reveal-delay-3 { transition-delay: 270ms; }
.reveal-delay-4 { transition-delay: 360ms; }