client/src/index.css

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Space+Grotesk:wght@400;500;700&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  color: #0f172a;
  background:
    radial-gradient(circle at top left, rgba(191, 162, 113, 0.12), transparent 26%),
    radial-gradient(circle at top right, rgba(74, 97, 86, 0.08), transparent 24%),
    linear-gradient(180deg, #faf7f1 0%, #f5f2eb 48%, #eef1f3 100%);
  font-family: "Space Grotesk", sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 1280px;
  min-height: 100vh;
  overflow-x: auto;
  background:
    radial-gradient(circle at 12% 10%, rgba(190, 140, 80, 0.12), transparent 22%),
    radial-gradient(circle at 88% 4%, rgba(73, 96, 85, 0.09), transparent 18%),
    linear-gradient(180deg, #faf7f1 0%, #f5f2eb 48%, #eef1f3 100%);
}

#root {
  min-height: 100vh;
}

body.has-premium-cursor,
body.has-premium-cursor a,
body.has-premium-cursor button,
body.has-premium-cursor input,
body.has-premium-cursor textarea,
body.has-premium-cursor select,
body.has-premium-cursor label,
body.has-premium-cursor summary {
  cursor: none;
}

.panel {
  @apply rounded-[1.6rem] border border-ink/10 bg-white/80 shadow-[0_20px_50px_rgba(15,23,42,0.045)] backdrop-blur;
}

.section-title {
  @apply font-display text-[2rem] leading-tight text-ink;
}

.text-readable {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.headline-balance {
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.premium-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 140ms ease;
}

.premium-cursor.is-visible {
  opacity: 1;
}

.premium-cursor__aura,
.premium-cursor__ring,
.premium-cursor__core {
  position: fixed;
  left: 0;
  top: 0;
  border-radius: 9999px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  transition:
    opacity 180ms ease,
    box-shadow 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease;
}

.premium-cursor__aura {
  height: 88px;
  width: 88px;
  background:
    radial-gradient(circle, rgba(184, 154, 102, 0.26) 0%, rgba(184, 154, 102, 0.12) 36%, rgba(184, 154, 102, 0) 72%);
  opacity: 0.72;
  filter: blur(14px);
}

.premium-cursor__ring {
  height: 30px;
  width: 30px;
  border: 1.5px solid rgba(22, 30, 43, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.22) 100%);
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(6px);
}

.premium-cursor__core {
  height: 7px;
  width: 7px;
  background: linear-gradient(135deg, #101827 0%, #3a2f1f 100%);
  box-shadow:
    0 0 0 8px rgba(255, 255, 255, 0.38),
    0 10px 22px rgba(15, 23, 42, 0.2);
}

img {
  display: block;
  max-width: 100%;
}

.recharts-wrapper:focus,
.recharts-surface:focus {
  outline: none;
}