/* ============================================================
   Upperbound — shared styles
   See DESIGN.md for the design system this implements.
   ============================================================ */

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Tokens */
:root {
  /* Brand inks and accents */
  --midnight-ink:       #1A2F52;
  --twilight-navy:      #2E5299;
  --constellation-blue: #4A6FCC;
  --wash-blue:          #6B8FD4;
  --halo:               #B8C8E8;

  /* Light-ground surfaces (Bone -> Pewter ladder) */
  --bone:   #F9FAFB;
  --mist:   #F4F5F7;
  --frost:  #E8ECF2;
  --pewter: #D0D8E8;

  /* Light-ground text (AA-passing on Bone) */
  --slate:  #4E6E91;  /* ~4.9:1 vs Bone, AA pass */
  --cloud:  #6F87A6;  /* ~3.3:1 vs Bone, AA Large; small label use only */

  /* Dark-ground text (AA-passing on Midnight Ink) */
  --paper:        #FFFFFF;  /* primary, ~13:1 */
  --paper-body:   #A0B4D0;  /* body, ~6.1:1 */
  --paper-muted:  #8FA5C2;  /* secondary / labels, ~5.2:1 */

  /* Borders */
  --rule:              rgba(26, 47, 82, 0.10);
  --rule-on-dark:      rgba(255, 255, 255, 0.12);
  --rule-on-dark-soft: rgba(255, 255, 255, 0.08);

  /* Type */
  --fn: 'DM Sans', system-ui, sans-serif;
  --fd: 'DM Serif Display', Georgia, serif;

  /* States */
  --focus-ring: 0 0 0 3px rgba(74, 111, 204, 0.30);
  --hover-lift: 0 4px 16px rgba(26, 47, 82, 0.08);
}

/* Base */
html { scroll-behavior: smooth; }
body {
  font-family: var(--fn);
  -webkit-font-smoothing: antialiased;
}

/* Focus */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 64px; padding: 0;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
}
.nav-inner {
  max-width: 1136px; margin: 0 auto; padding: 0 48px;
  display: flex; align-items: center; justify-content: space-between; height: 100%;
}
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a {
  font-size: 0.8125rem; font-weight: 500;
  color: var(--slate); text-decoration: none;
  transition: color 0.15s;
}
.nav-links a:hover { color: var(--midnight-ink); }

/* Dark-page nav (advisory) */
body.dark-page .nav-links a { color: var(--paper-body); }
body.dark-page .nav-links a.active,
body.dark-page .nav-links a:hover { color: var(--paper); }

/* ── BUTTONS ── */
.btn-nav {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em;
  color: var(--paper); background: var(--twilight-navy);
  border: none; border-radius: 8px;
  padding: 9px 18px; cursor: pointer; text-decoration: none;
  transition: background 0.15s, box-shadow 0.2s;
  font-family: var(--fn);
}
.btn-nav:hover { background: var(--midnight-ink); box-shadow: var(--hover-lift); }

.btn-primary {
  display: inline-flex; align-items: center;
  font-size: 0.8125rem; font-weight: 600;
  color: var(--paper); background: var(--twilight-navy);
  border: none; border-radius: 8px;
  padding: 13px 24px; cursor: pointer; text-decoration: none;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
  font-family: var(--fn);
}
.btn-primary:hover {
  background: var(--midnight-ink);
  box-shadow: var(--hover-lift);
  transform: translateY(-1px);
}

.btn-ghost {
  display: inline-flex; align-items: center;
  font-size: 0.8125rem; font-weight: 500;
  color: var(--paper-body); background: transparent;
  border: 0.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 12px 22px; cursor: pointer; text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
  font-family: var(--fn);
}
.btn-ghost:hover { color: var(--paper); border-color: var(--paper-muted); }

/* ── FOOTER (index + fund-managers) ── */
footer {
  background: var(--mist); padding: 40px 48px;
  border-top: 0.5px solid var(--rule);
}
.footer-inner { max-width: 1040px; margin: 0 auto; }
.footer-top {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 28px; border-bottom: 0.5px solid var(--rule);
  margin-bottom: 20px;
}
.footer-logo { display: flex; align-items: center; gap: 10px; }
.footer-links { display: flex; gap: 28px; align-items: center; }
.footer-links a {
  font-size: 0.75rem; color: var(--cloud);
  text-decoration: none; transition: color 0.15s;
}
.footer-links a:hover { color: var(--midnight-ink); }
.footer-legal {
  font-size: 0.6875rem; color: var(--cloud);
  line-height: 1.7; max-width: 760px;
}

/* ── UNIVERSAL MOBILE ── */
@media (max-width: 768px) {
  .nav-inner { padding: 0 20px; }
  .nav-links { display: none; }
  .btn-primary, .btn-ghost { min-height: 44px; }
  .btn-nav { min-height: 44px; padding: 12px 18px; }
  .nav-logo { min-height: 44px; display: inline-flex; align-items: center; }
  footer { padding: 36px 20px; }
  .footer-top { flex-direction: column; gap: 20px; align-items: flex-start; }
  .footer-links { flex-direction: column; gap: 4px; align-items: flex-start; }
  .footer-links a { padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center; }
}