/*
  Ponk Ventures design tokens.

  These are the Ponk Exchange tokens (apps/web/app/tokens.css), carried over
  verbatim so Ventures reads as the same ecosystem: the same black, the same
  pink, the same Satoshi. Only the presentation changes (editorial, not a
  trading terminal). Do not add a colour that is not here. Do not add a
  gradient, a glow or a shadow. Pink is for action, selection and rules.
*/

@font-face {
  font-family: "Satoshi";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/satoshi-medium.woff2") format("woff2");
}

@font-face {
  font-family: "Satoshi";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/satoshi-bold.woff2") format("woff2");
}

:root {
  /* Surfaces: the only elevation lever. Borders over shadows, always. */
  --pv-page: #0a090d;
  --pv-surface: #18151d;
  --pv-raised: #201c26;

  /* Lines */
  --pv-line: #3a3245;
  --pv-line-soft: #241f2b;

  /* Text */
  --pv-fg: #f3f0f4;
  --pv-fg-2: #b1aab5;
  --pv-fg-3: #948c9b;
  --pv-fg-on-accent: #0a090d;

  /* The accent. Ponk pink. */
  --pv-accent: #ffc9d7;
  --pv-accent-strong: #ffaec0;
  --pv-accent-soft: rgba(255, 201, 215, 0.18);

  /* Semantic */
  --pv-positive: #7fd1a6;
  --pv-negative: #ff8a8a;
  --pv-warning: #ffd166;

  /* Type */
  --pv-font: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pv-text-meta: 12px;
  --pv-text-small: 13px;
  --pv-text-body: 15px;
  --pv-text-lead: 18px;
  --pv-text-h3: 20px;
  --pv-text-h2: 28px;
  --pv-text-h1: 40px;
  --pv-text-display: 56px;
  --pv-leading-tight: 1.1;
  --pv-leading-snug: 1.25;
  --pv-leading-body: 1.55;
  --pv-tracking-caps: 0.08em;

  /* Spacing: strict 4px scale. */
  --pv-s1: 4px;
  --pv-s2: 8px;
  --pv-s3: 12px;
  --pv-s4: 16px;
  --pv-s6: 24px;
  --pv-s8: 32px;
  --pv-s12: 48px;
  --pv-s16: 64px;
  --pv-s24: 96px;

  /* Radius: small. */
  --pv-radius-chip: 4px;
  --pv-radius-control: 6px;
  --pv-radius-surface: 8px;
  --pv-radius-overlay: 10px;

  /* Controls */
  --pv-control: 40px;
  --pv-control-lg: 44px;

  /* Layout */
  --pv-measure: 64ch;
  --pv-content: 1200px;
  --pv-gutter: 16px;

  /* Motion. State change 120ms, travel 250ms, ease-out. transform and opacity only. */
  --pv-fast: 120ms;
  --pv-travel: 250ms;
  --pv-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 720px) {
  :root {
    --pv-gutter: 32px;
    --pv-text-h1: 48px;
    --pv-text-display: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pv-fast: 0.01ms;
    --pv-travel: 0.01ms;
  }
}

html {
  background: var(--pv-page);
  color: var(--pv-fg);
  font-family: var(--pv-font);
  font-weight: 500;
  font-size: var(--pv-text-body);
  line-height: var(--pv-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "ss02";
}

::selection {
  background: var(--pv-accent-soft);
  color: var(--pv-accent);
}

:focus-visible {
  outline: 2px solid var(--pv-accent);
  outline-offset: 2px;
}