/* ============================================================
   CGT Calculator · landing-page tokens
   Mirrors apps/cgt-calculator/src/app/globals.css exactly.
   Monochrome graphite + liquid glass. No warm colors. No saturation.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --radius: 0.875rem;

  /* ---------- Ink scale (cool graphite, calculator-identical) ---------- */
  --ink:    #14181f;
  --ink-2:  #2c3340;
  --ink-3:  #525968;
  --ink-4:  #828999;
  --ink-5:  #a8adb8;
  --ink-6:  #c8ccd4;

  /* ---------- Hairlines ---------- */
  --hairline:        rgba(20, 24, 31, 0.08);
  --hairline-strong: rgba(20, 24, 31, 0.14);
  --hairline-soft:   rgba(20, 24, 31, 0.05);

  /* ---------- Glass tints ---------- */
  --glass-tint:        rgba(255, 255, 255, 0.60);
  --glass-tint-strong: rgba(255, 255, 255, 0.78);
  --glass-tint-quiet:  rgba(255, 255, 255, 0.40);
  --glass-border:      rgba(255, 255, 255, 0.68);

  /* ---------- Type families ---------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  0.32s;
}

/* ============ BASE ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { color: var(--ink); }
body {
  font-family: var(--font-sans);
  background-color: #e4e7ec;
  background-image: linear-gradient(180deg, #dfe3e9 0%, #e6e9ee 55%, #e3e6eb 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}
a { color: inherit; text-decoration: none; }

/* ============ GLASS UTILITIES ============ */
.glass-panel {
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  background-color: var(--glass-tint);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 1px 0 0 rgba(255, 255, 255, 0.45),
    inset -1px 0 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(20, 24, 31, 0.04),
    0 1px 2px rgba(20, 24, 31, 0.04),
    0 8px 24px -8px rgba(20, 24, 31, 0.08),
    0 24px 48px -24px rgba(20, 24, 31, 0.10);
  border-radius: 16px;
}
.glass-panel-strong {
  backdrop-filter: blur(40px) saturate(170%);
  -webkit-backdrop-filter: blur(40px) saturate(170%);
  background-color: var(--glass-tint-strong);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 1px 0 0 rgba(255, 255, 255, 0.55),
    inset -1px 0 0 rgba(255, 255, 255, 0.40),
    inset 0 -1px 0 rgba(20, 24, 31, 0.05),
    0 2px 4px rgba(20, 24, 31, 0.05),
    0 16px 40px -12px rgba(20, 24, 31, 0.12),
    0 32px 64px -24px rgba(20, 24, 31, 0.14);
  border-radius: 18px;
}
.glass-chip {
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  background-color: var(--glass-tint-quiet);
  border: 1px solid rgba(255, 255, 255, 0.50);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(20, 24, 31, 0.04);
  border-radius: 8px;
}

/* ============ INK BUTTON (matches calculator's .ink-btn) ============ */
.ink-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-radius: 10px;
  font: 500 14px var(--font-sans); letter-spacing: -0.005em;
  background: linear-gradient(180deg, #232936 0%, #14181f 100%);
  color: #ffffff;
  border: 1px solid rgba(20, 24, 31, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 1px 2px rgba(20, 24, 31, 0.20),
    0 6px 16px -6px rgba(20, 24, 31, 0.30);
  transition: transform 80ms ease, box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  cursor: pointer;
}
.ink-btn:hover {
  background: linear-gradient(180deg, #2c3340 0%, #1a1f29 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 2px 4px rgba(20, 24, 31, 0.24),
    0 10px 24px -8px rgba(20, 24, 31, 0.40);
}
.ink-btn:active { transform: translateY(0.5px); }
.ink-btn .arr { transition: transform var(--dur) var(--ease); }
.ink-btn:hover .arr { transform: translateX(4px); }

.ghost-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 10px;
  font: 500 14px var(--font-sans);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  background-color: rgba(255, 255, 255, 0.45);
  color: var(--ink-2);
  border: 1px solid var(--hairline-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(20, 24, 31, 0.04);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  cursor: pointer;
}
.ghost-btn:hover { background-color: rgba(255, 255, 255, 0.7); color: var(--ink); }

/* ============ INK PILL (outline tag) ============ */
.ink-pill {
  display: inline-flex; align-items: center;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 4px;
  font: 500 11px var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  background-color: rgba(255, 255, 255, 0.35);
}
.ink-pill-strong { color: var(--ink); border-color: var(--ink); font-weight: 600; }

/* ============ STEP TAG ============ */
.step-tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.30rem 0.7rem 0.30rem 0.45rem;
  font: 600 11px var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.step-tag::before {
  content: ""; width: 0.4rem; height: 0.4rem; border-radius: 999px;
  background-color: var(--ink);
}

/* ============ NUMBERS ============ */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.num-display {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.neg::before { content: "("; }
.neg::after { content: ")"; }

/* ============ MARQUEE (monochrome, no per-item style overrides) ============ */
@keyframes halo-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.halo-marquee { overflow: hidden; width: 100%; max-width: 100%;
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.halo-marquee-track { display: flex; width: max-content; animation: halo-marquee var(--marquee-dur, 32s) linear infinite; align-items: center; }
.halo-marquee-track > * { flex-shrink: 0; }
.halo-marquee:hover .halo-marquee-track { animation-play-state: paused; }