/* -------------------------------------------
 * Portal-local design tokens
 * Aliases to Popcorn semantic tokens for concepts
 * Popcorn does not cover (GraphQL badges, syntax,
 * monospace font family, docs-reading typography).
 * Light/dark switching is handled upstream in
 * popcorn-color.css via :root.dark / :root.visualrefresh.*.
 * ------------------------------------------- */

:root {
  /* Monospace font family (Popcorn provides body + heading only) */
  --font-family-mono: 'IBM Plex Mono', 'SF Mono', 'Fira Code', 'Monaco', 'Consolas', monospace;

  /* Documentation reading: portal-only divergence from product chrome.
     Same 16px as Popcorn's body-lg, but exposed under a reading-intent
     name so call sites read semantically. Paired with a looser
     line-height than Popcorn ceilings at (150% -> golden-ratio 162%). */
  --font-size-body-reading: var(--font-size-body-lg);
  --line-height-body-reading: 162%;

  /* GraphQL kind badges */
  --color-bg-query: var(--color-bg-info-subtle);
  --color-text-query: var(--color-text-info);
  --color-bg-mutation: var(--color-bg-critical-subtle);
  --color-text-mutation: var(--color-text-critical);
  --color-bg-output: var(--color-bg-success-subtle);
  --color-text-output: var(--color-text-success);
  --color-bg-type: var(--color-bg-upgrade);
  --color-text-type: var(--color-text-upgrade);
  --color-bg-enum: var(--color-bg-new);
  --color-text-enum: var(--color-text-new);
  --color-bg-scalar: var(--color-bg-warning-subtle);
  --color-text-scalar: var(--color-text-warning);
  --color-bg-input: var(--color-bg-info-subtle);
  --color-text-input: var(--color-text-info);
  --color-bg-interface: var(--color-bg-info-subtle);
  --color-text-interface: var(--color-text-info);
  --color-bg-union: var(--color-bg-success-subtle);
  --color-text-union: var(--color-text-success);
  --color-bg-directive: var(--color-bg-a-subtle);
  --color-text-directive: var(--color-text-subtle);

  /* GraphQL syntax colors used in inline code */
  --color-text-syntax-type: var(--color-text-upgrade);
  --color-text-syntax-field: var(--color-text-neutral);
  --color-text-syntax-arg: var(--color-text-subtle);
  --color-text-syntax-string: var(--color-text-success);
  --color-text-syntax-keyword: var(--color-text-info);
  --color-text-syntax-deprecated: var(--color-text-critical);

  /* Inline code text color — mirrors the .hljs-keyword color used by
     the highlight stylesheets so inline references read the same as a
     keyword inside a code block. */
  --color-text-code-inline: #d73a49;
}

:root.dark {
  --color-text-code-inline: #ff7b72;
}