/* ============================================================
   Invest Prime — tokens.css
   Концепт: «Архітектура, а не азарт». Dark-premium editorial.
   ============================================================ */

:root {
  /* ---- Color (OKLCH, Committed strategy) ---- */
  --ink-950: oklch(0.13 0.012 250);
  --ink-900: oklch(0.17 0.012 250);
  --ink-850: oklch(0.20 0.013 250);
  --ink-800: oklch(0.235 0.014 250);
  --ink-700: oklch(0.31 0.012 250);
  --ink-600: oklch(0.40 0.011 250);

  --bone-50:  oklch(0.95 0.008 80);
  --bone-200: oklch(0.82 0.010 80);
  --bone-300: oklch(0.74 0.010 80);
  --bone-500: oklch(0.58 0.010 80);

  --amber:     oklch(0.80 0.115 70);
  --amber-dim: oklch(0.68 0.10 70);
  --amber-deep:oklch(0.55 0.09 60);

  --canvas: var(--ink-900);
  --line:   color-mix(in oklch, var(--ink-700) 70%, transparent);

  /* ---- Type ---- */
  --f-display: "Unbounded", system-ui, sans-serif;
  --f-body: "Onest", system-ui, -apple-system, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  --t-13: 0.8125rem;
  --t-15: 0.9375rem;
  --t-18: 1.125rem;
  --t-22: 1.375rem;
  --t-30: clamp(1.45rem, 1.1rem + 1.6vw, 1.875rem);
  --t-44: clamp(2rem, 1.3rem + 3.1vw, 2.75rem);
  --t-64: clamp(2.6rem, 1.4rem + 5.3vw, 4rem);
  --t-92: clamp(3.1rem, 1.2rem + 8.4vw, 5.75rem);

  /* ---- Space ---- */
  --gut: clamp(1.25rem, 0.6rem + 3vw, 3rem);
  --wrap: 1240px;
  --sec-y: clamp(4.5rem, 2.5rem + 7vw, 9rem);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint-ish */
}

* { box-sizing: border-box; }
html { width: 100vw; overflow-x: hidden; scroll-behavior: smooth; }
body {
  margin: 0;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--canvas);
  color: var(--bone-50);
  font-family: var(--f-body);
  font-size: var(--t-18);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--f-display); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
::selection { background: var(--amber); color: var(--ink-950); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

/* mono micro-label */
.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-13);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-500);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: "";
  width: 1.6em; height: 1px;
  background: var(--amber);
  display: inline-block;
}

.accent { color: var(--amber); }
.mono { font-family: var(--f-mono); }

/* reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.show { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}