/* ==========================================================================
   Design system — shared with app/src/theme.css (keep the token blocks in sync)
   Ink & ivory surfaces, champagne-gold brand, jade/coral for P&L.
   ========================================================================== */

:root {
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-ui: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  --ink-0: #080807;
  --ink-1: #0c0c0b;
  --ink-2: #121210;
  --ink-3: #181815;
  --ink-4: #1f1e1b;
  --ink-5: #2a2924;

  --gold-50: #fbf6ea;
  --gold-100: #f5ebd0;
  --gold-200: #ecd8a8;
  --gold-300: #e4c584;
  --gold-400: #d9b163;
  --gold-500: #c79a48;
  --gold-600: #a67d34;
  --gold-700: #85622a;
  --gold-800: #634925;
  --gold-900: #45331c;
  --gold-950: #2a1f12;

  --vt-bg: #f6f3ec;
  --vt-bg-2: #efebe1;
  --vt-surface: #fffdf8;
  --vt-surface-2: #f9f6ef;
  --vt-surface-3: #f1ece1;
  --vt-line: rgba(30, 26, 16, 0.09);
  --vt-line-strong: rgba(30, 26, 16, 0.16);
  --vt-ink: #16150f;
  --vt-ink-2: #55524a;
  --vt-ink-3: #85817a;
  --vt-brand: #a67d34;
  --vt-brand-strong: #85622a;
  --vt-brand-soft: #d9b163;
  --vt-brand-fill: #d2ab5e;
  --vt-brand-tint: #f5ebd0;
  --vt-on-brand: #16150f;
  --vt-up: #138a56;
  --vt-down: #d2453a;
  --vt-glow: rgba(199, 154, 72, 0.18);
  --vt-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 18px 40px -24px rgba(40, 30, 10, 0.25);
  --vt-radius: 20px;
  --vt-grain-opacity: 0.05;

  --primary: var(--vt-brand-fill);
  --primary-hover: var(--gold-300);
  --primary-dark: var(--gold-700);

  --color-gray-50: #f4f1ea;
  --color-gray-100: #ece8de;
  --color-gray-200: #e0dbcf;
  --color-gray-300: #c9c3b6;
  --color-gray-400: #a19b8e;
  --color-gray-500: #7c776b;
  --color-gray-600: #5d5a50;
  --color-gray-700: #45423a;
  --color-gray-800: #2b2a25;
  --color-gray-900: #1a1915;
  --color-gray-950: #0e0e0c;
  --color-slate-300: #c9c3b6;
  --color-slate-400: #a19b8e;
  --color-slate-500: #7c776b;
  --color-slate-600: #5d5a50;
  --color-slate-700: #45423a;
  --color-slate-800: #2b2a25;
  --color-slate-900: #1a1915;
  --color-slate-950: #0e0e0c;
  --color-zinc-400: #a19b8e;
  --color-zinc-500: #7c776b;
  --color-zinc-800: #2b2a25;
  --color-zinc-900: #1a1915;
  --color-neutral-400: #a19b8e;
  --color-neutral-500: #7c776b;
  --color-neutral-800: #2b2a25;
  --color-neutral-900: #1a1915;

  --color-lime-50: var(--gold-50);
  --color-lime-100: var(--gold-100);
  --color-lime-200: var(--gold-200);
  --color-lime-300: var(--gold-300);
  --color-lime-400: var(--gold-400);
  --color-lime-500: var(--gold-500);
  --color-lime-600: var(--gold-600);
  --color-lime-700: var(--gold-700);
  --color-green-50: var(--gold-50);
  --color-green-100: var(--gold-100);
  --color-green-200: var(--gold-200);
  --color-green-300: var(--gold-300);
  --color-green-400: var(--gold-400);
  --color-green-500: var(--gold-500);
  --color-green-600: var(--gold-600);
  --color-green-700: var(--gold-700);
  --color-green-800: var(--gold-800);
  --color-green-900: var(--gold-900);
  --color-green-950: var(--gold-950);
  --color-teal-50: var(--gold-50);
  --color-teal-100: var(--gold-100);
  --color-teal-200: var(--gold-200);
  --color-teal-300: var(--gold-300);
  --color-teal-400: var(--gold-400);
  --color-teal-500: var(--gold-500);
  --color-teal-600: var(--gold-600);
  --color-teal-700: var(--gold-700);

  --color-emerald-50: #e9f6ef;
  --color-emerald-100: #cdeedc;
  --color-emerald-200: #a3e0c0;
  --color-emerald-300: #74d3a3;
  --color-emerald-400: #4cc78b;
  --color-emerald-500: #22a96d;
  --color-emerald-600: #138a56;
  --color-emerald-700: #0f6c44;

  --font-sans: var(--font-ui);
  --font-mono: var(--font-num);
}

html.dark {
  --vt-bg: #0b0b0a;
  --vt-bg-2: #10100e;
  --vt-surface: #141412;
  --vt-surface-2: #1a1a17;
  --vt-surface-3: #22211d;
  --vt-line: rgba(255, 246, 225, 0.08);
  --vt-line-strong: rgba(255, 246, 225, 0.15);
  --vt-ink: #f3eee2;
  --vt-ink-2: rgba(243, 238, 226, 0.66);
  --vt-ink-3: rgba(243, 238, 226, 0.44);
  --vt-brand: #e2bf7b;
  --vt-brand-strong: #d1a85d;
  --vt-brand-soft: #edd4a1;
  --vt-brand-fill: #e2bf7b;
  --vt-brand-tint: rgba(226, 191, 123, 0.1);
  --vt-on-brand: #14120c;
  --vt-up: #4fd39a;
  --vt-down: #ff6f61;
  --vt-glow: rgba(226, 191, 123, 0.14);
  --vt-shadow: 0 1px 0 rgba(255, 246, 225, 0.05) inset, 0 24px 60px -30px rgba(0, 0, 0, 0.8);
  --vt-grain-opacity: 0.07;
}

/* ---------- Base ---------- */

html { background: var(--vt-bg); }

body {
  font-family: var(--font-ui) !important;
  background: var(--vt-bg);
  color: var(--vt-ink);
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.005em;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: var(--vt-grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.45 0 0 0 0 0.35 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
html.dark body::after { mix-blend-mode: screen; }

::selection { background: var(--vt-brand-fill); color: var(--vt-on-brand); }

h1, h2 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.02 !important;
}
h3, h4 { font-family: var(--font-ui); letter-spacing: -0.015em; }

.font-mono, [class*="tabular-nums"] { font-family: var(--font-num) !important; }

/* Main wrappers use bg-white / bg-gray-50 for the page canvas. */
body > div.overflow-x-hidden,
body > div.bg-white { background-color: var(--vt-bg) !important; }
main section.bg-white, section.bg-white { background-color: var(--vt-bg); }
html.dark section[class*="bg-[#070809]"],
html.dark section[class*="dark:bg-[#070809]"] { background-color: var(--ink-1); }

.text-gradient-animate {
  font-style: italic;
  background: linear-gradient(100deg, var(--gold-600) 0%, var(--gold-300) 35%, #f6e7c4 50%, var(--gold-300) 65%, var(--gold-600) 100%) 0 0 / 250% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent;
  animation: vt-sheen 7s ease-in-out infinite !important;
  padding-right: 0.06em;
}
html:not(.dark) .text-gradient-animate {
  background-image: linear-gradient(100deg, var(--gold-800) 0%, var(--gold-600) 35%, var(--gold-400) 50%, var(--gold-600) 65%, var(--gold-800) 100%) !important;
}
@keyframes vt-sheen { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

[class*="bg-clip-text"][class*="text-transparent"] {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-style: italic;
  padding-right: 0.08em;
}

/* Gold CTA: dark ink text reads better than white on champagne. */
a[class*="bg-[var(--primary)]"],
button[class*="bg-[var(--primary)]"],
a[class*="bg-[#5edc1f]"]:not([class*="/"]),
button[class*="bg-[#5edc1f]"]:not([class*="/"]) {
  color: var(--vt-on-brand) !important;
  background: linear-gradient(180deg, var(--gold-200) 0%, var(--vt-brand-fill) 55%, var(--gold-500) 100%) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 10px 30px -12px var(--vt-glow) !important;
  font-weight: 600 !important;
}
a[class*="bg-[var(--primary)]"]:hover,
button[class*="bg-[var(--primary)]"]:hover { filter: brightness(1.06); }

/* Unify rounded panels into hairline cards. */
main [class*="rounded-2xl"][class*="border"],
main [class*="rounded-3xl"][class*="border"],
section [class*="rounded-2xl"][class*="border"],
section [class*="rounded-3xl"][class*="border"] {
  border-color: var(--vt-line) !important;
}
html:not(.dark) section [class*="rounded-2xl"][class*="bg-white"],
html:not(.dark) section [class*="rounded-3xl"][class*="bg-white"] {
  background-color: var(--vt-surface) !important;
  box-shadow: var(--vt-shadow);
}

/* Dark sections keep a fixed ink tone in both modes. */
.bg-gray-950 { background-color: var(--ink-1) !important; }

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--vt-line-strong) transparent; }

/* Shared ledger grid used by the hero and new section backgrounds. */
.vt-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--vt-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--vt-line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 75%);
}