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

:root {
  /* 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);
}