@import "tailwindcss";

@import "@choiceform/design-tokens/tokens.css";
@import "@choiceform/design-tokens/preflight.css";
@import "@choiceform/design-tokens/tailwind.css";

@import "@choiceform/design-system/styles/components.css";
@import "@choiceform/design-system/styles/markdown.css";

@source "../node_modules/@choiceform/design-system";

/* @import "./styles/components.css"; */
@import "katex/dist/katex.css";

:root {
  --code-editor-bg: var(--background-default);
  --code-editor-fg: var(--foreground-default);
  --code-editor-border: var(--boundary-default);
  --code-editor-border-focus: var(--boundary-selected-strong);
  --code-editor-caret: var(--foreground-default);

  --code-syntax-keyword: #cb0b96;
  --code-syntax-string: #c53e0d;
  --code-syntax-number: #0768cf;
  --code-syntax-boolean: #c53e0d;
  --code-syntax-comment: #888;
  --code-syntax-function: #cb0b96;
  --code-syntax-property: #093077;
  --code-syntax-operator: #093077;
  --code-syntax-variable: #0768cf;

  --code-expression-delimiter: #0768cf;
  --code-expression-template-bg: #f6f8fa;
  --code-expression-node-ref: #cb0b96;
  --code-expression-workflow-var: #0768cf;
  --code-expression-workflow-fn: #c53e0d;

  --code-ui-selection: #00000033;
  --code-ui-active-line: transparent;
  --code-ui-matching-bracket: #328c8252;
  --code-ui-gutter: var(--background-default);
  --code-ui-gutter-text: #0000004d;

  --code-error-bg: var(--foreground-danger);
  --code-error-fg: var(--foreground-on-accent);
}

.dark,
[data-theme="dark"] {
  --code-syntax-keyword: #fc9ce0;
  --code-syntax-string: #fcb34a;
  --code-syntax-number: #d1a8ff;
  --code-syntax-boolean: #fcb34a;
  --code-syntax-comment: #888;
  --code-syntax-function: #fc9ce0;
  --code-syntax-property: #7cc4f8;
  --code-syntax-operator: #7cc4f8;
  --code-syntax-variable: #d1a8ff;

  --code-ui-selection: #ffffff33;
  --code-ui-active-line: transparent;
  --code-ui-matching-bracket: #328c8252;
  --code-ui-gutter: var(--background-default);
  --code-ui-gutter-text: #ffffff66;
}
