/* Design tokens. Colours are taken from the hero video: its edges are pure black and its
   terminal text is a muted sage (#95ba97). Contrast ratios are against --color-bg. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/jetbrains-mono-latin-wght400-700.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --color-bg: #000;
  --color-surface: #070707;
  --color-text: #deded8;           /* 15.5:1 */
  --color-text-muted: #9a9a94;     /* 7.4:1 */
  --color-text-disabled: #6a6a66;  /* 3.9:1, disabled controls only */
  --color-border: #262624;         /* 1.4:1, decorative outlines only */
  --color-control: #5f5f5b;        /* 3.3:1, control outlines */
  --color-control-hover: #9a9a94;
  --color-press: rgb(255 255 255 / 0.06);
  --color-accent: #95ba97;         /* 9.7:1, success */
  --color-danger: #e0a296;         /* 9.8:1, errors */
  --color-focus: #f2f2ec;          /* 18.7:1 */
  --color-scrim: rgb(0 0 0 / 0.72);
  --color-primary-press: #c4c4be;  /* Buy while pressed; black on it 12.0:1 */
  --color-logo-bg: #1a1a1a;        /* the logo image's own background */

  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", "DejaVu Sans Mono", monospace;

  --text-xs: 0.75rem;                                        /* 12px: controls, labels */
  --text-sm: 0.8125rem;                                      /* 13px: address, messages */
  --text-md: 0.9375rem;                                      /* 15px: ticker */
  --text-lg: clamp(0.9375rem, 0.82rem + 0.55vw, 1.25rem);    /* 15-20px: token name */
  --leading-tight: 1.3;
  --leading-normal: 1.55;
  --tracking-label: 0.14em;
  --tracking-name: 0.1em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius: 2px;
  --border: 1px solid var(--color-border);
  --logo-size: 56px;
  --content-width: 46rem;          /* room for the full contract box and Buy on one row */
  --video-width: 1920px;           /* the video's native width: never upscaled */
  --below-stage: 17rem;            /* page padding + controls + identity + contract/Buy */
  --control-height: 36px;

  --duration-fast: 120ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 48rem) {
  :root {
    --logo-size: 64px;
  }
}

/* Touch screens get 40px controls; the space reserved below the video grows with them. */
@media (pointer: coarse) {
  :root {
    --control-height: 40px;
    --below-stage: calc(17rem + 8px);
  }
}

/* Landscape phones: the video takes the screen height except for its control row; the
   details scroll below. After the touch rule so it wins on phones. */
@media (orientation: landscape) and (max-height: 30rem) {
  :root {
    --below-stage: 5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
  }
}