// @eol/graphiql chrome theme variables.
//
// Override any variable under a scoped selector (e.g. `.graphiql`) or on :root
// to re-skin the chrome. The editor theme is a separate prop (`theme?: Extension`).
//
// Supported variables:
//   --graphiql-accent        primary action color (Run button, selected state)
//   --graphiql-bg            base background (editor + result)
//   --graphiql-border        divider lines between panes
//   --graphiql-fg            primary foreground
//   --graphiql-font          font-family for the chrome
//   --graphiql-link          clickable links in docs / breadcrumbs
//   --graphiql-muted         muted foreground (hints, timestamps)
//   --graphiql-panel         panel background (toolbar, tabbar, headers)

:root {
  --graphiql-accent: #0e639c;
  --graphiql-bg: #1e1e1e;
  --graphiql-border: #333;
  --graphiql-fg: #d4d4d4;
  --graphiql-font: ui-monospace, SFMono-Regular, monospace;
  --graphiql-link: #79b8ff;
  --graphiql-muted: #858585;
  --graphiql-panel: #252526;
}

@media (prefers-color-scheme: light) {
  :root:not(.graphiql-dark) {
    --graphiql-accent: #0366d6;
    --graphiql-bg: #ffffff;
    --graphiql-border: #e1e4e8;
    --graphiql-fg: #24292e;
    --graphiql-link: #0366d6;
    --graphiql-muted: #6a737d;
    --graphiql-panel: #f6f8fa;
  }
}

:root.graphiql-light {
  --graphiql-accent: #0366d6;
  --graphiql-bg: #ffffff;
  --graphiql-border: #e1e4e8;
  --graphiql-fg: #24292e;
  --graphiql-link: #0366d6;
  --graphiql-muted: #6a737d;
  --graphiql-panel: #f6f8fa;
}