/* ============================================================
   QIAN CAPITAL — COLOR TOKENS
   Institutional quant hedge fund. Deep green + gold + sand.
   Base scales first, then semantic aliases.
   ============================================================ */
:root {
  /* — Greens (brand core) — */
  --green-950: #161d14;
  /* deepest ink-green */
  --green-900: #1f271b;
  /* PRIMARY brand dark green */
  --green-850: #253929;
  /* deck deep green (presentation surfaces) */
  --green-700: #344e41;
  /* mid green — secondary brand green */
  --green-600: #45614f;
  --green-500: #5b7867;

  /* — Gold (accent / metallic) — */
  --gold-800: #806b48;
  /* darkest gold */
  --gold-700: #9a8460;
  /* deep gold — strong accent, gold text on light */
  --gold-600: #ae966f;
  --gold-500: #c0aa81;
  /* PRIMARY brand gold */
  --gold-400: #cdba96;
  --gold-300: #d8c8a8;
  --gold-100: #ece3d0;

  /* — Sand / neutral warm — */
  --sand-400: #cfc4b0;
  --sand-300: #ddd4c4;
  --sand-200: #eae3d7;
  /* mid-tone — warm surface / dividers on dark */
  --paper: #f8f6f2;
  /* light tone — default page background */
  --white: #ffffff;

  /* — Cool greys for data / borders — */
  --grey-700: #4a5750;
  --grey-500: #7c857e;
  --grey-300: #b3b8b2;

  /* — Market / status (muted, institutional, never neon) — */
  --positive: #3f7d5a;
  /* gains / up */
  --negative: #a6492f;
  /* losses / down (muted rust) */
  --neutral: #7c857e;
  --info: #344e41;

  /* ============================================================
     SEMANTIC ALIASES — reference these in product code
     ============================================================ */
  /* Surfaces */
  --surface-page: var(--paper);
  --surface-card: var(--white);
  --surface-sunken: var(--sand-200);
  --surface-raised: var(--white);
  --surface-dark: var(--green-900);
  --surface-dark-alt: var(--green-850);
  --surface-dark-deep: var(--green-950);

  /* Text */
  --text-primary: var(--green-900);
  --text-secondary: var(--grey-700);
  --text-muted: var(--grey-500);
  --text-on-dark: var(--paper);
  --text-on-dark-muted: rgba(248, 246, 242, 0.66);
  --text-gold: var(--gold-700);
  --text-link: var(--green-700);

  /* Accent */
  --accent: var(--gold-500);
  --accent-strong: var(--gold-700);
  --accent-soft: var(--gold-100);
  --accent-on-dark: var(--gold-400);

  /* Borders & dividers */
  --border: rgba(31, 39, 27, 0.12);
  --border-strong: rgba(31, 39, 27, 0.22);
  --border-gold: rgba(192, 170, 129, 0.55);
  --border-on-dark: rgba(192, 170, 129, 0.28);
  --divider-on-dark: rgba(234, 227, 215, 0.16);

  /* Focus ring */
  --focus-ring: rgba(192, 170, 129, 0.55);
}

:root {
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Open Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace
}

* {
  box-sizing: border-box
}

html, body {
  margin: 0
}

a {
  color: var(--gold-400)
}

a:hover {
  color: var(--gold-300)
}

.page {
  min-height: 100vh;
  position: relative;
  background: var(--green-950);
  font-family: var(--font-sans);
  color: var(--text-on-dark);
  overflow: hidden
}

.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .5
}

.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, var(--green-950) 85%);
  pointer-events: none
}

.frame1 {
  position: absolute;
  inset: 24px;
  border: 1px solid var(--border-on-dark);
  pointer-events: none
}

.frame2 {
  position: absolute;
  inset: 29px;
  border: 1px solid rgba(192, 170, 129, 0.12);
  pointer-events: none
}

.content {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 72px 48px
}

.spacer {
  flex: 1
}

.logo {
  display: block;
  height: 96px;
  margin-bottom: 36px
}

.logo-link {
  display: inline-block;
  line-height: 0
}

.kicker-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px
}

.rule {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--border-on-dark)
}

.kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-400)
}

.head {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(38px, 4.8vw, 62px);
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0;
  max-width: none;
  white-space: nowrap
}

.sub {
  margin: 24px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-on-dark-muted);
  max-width: 52ch
}

.cta {
  margin-top: 40px;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-950);
  background: linear-gradient(135deg, var(--gold-700) 0%, var(--gold-300) 38%, var(--gold-500) 62%, var(--gold-100) 100%);
  padding: 15px 34px;
  text-decoration: none
}

.cta:hover {
  background: linear-gradient(135deg, var(--gold-600) 0%, var(--gold-100) 38%, var(--gold-400) 62%, #f5efe2 100%);
  color: var(--green-950)
}

.footer {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--text-on-dark-muted)
}

.dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--border-on-dark)
}

.logo {
  height: 110px;
  margin-bottom: 28px
}

.bg {
  opacity: .45
}

.head {
  font-size: clamp(14px, 4vw, 54px)
}

.sub {
  font-size: 15px;
  margin: 16px 0 0
}

.cta {
  margin-top: 36px
}

.kicker-row {
  margin-bottom: 20px
}

.logo-light {
  display: none
}

body.light .logo-dark {
  display: none
}

body.light .logo-light {
  display: block
}

body.light .page {
  background: var(--paper);
  color: var(--text-primary)
}

body.light .vignette {
  background: radial-gradient(ellipse at center, transparent 30%, var(--paper) 85%)
}

body.light .frame1 {
  border-color: var(--border-gold)
}

body.light .kicker {
  color: var(--text-gold)
}

body.light .sub {
  color: var(--text-secondary)
}

body.light .footer {
  color: var(--text-muted)
}

body.light .rule, body.light .dot {
  background: var(--border-gold)
}

body.light a {
  color: var(--text-gold)
}

body.light a.cta {
  color: var(--green-950)
}

.mode {
  position: absolute;
  top: 40px;
  right: 40px;
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-on-dark);
  background: transparent;
  color: var(--gold-400);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0
}

.mode:hover {
  border-color: var(--gold-400)
}

body.light .mode {
  border-color: var(--border-gold);
  color: var(--text-gold)
}