@import 'slender-ui/app.css' layer(components);
@import './themes.pcss' layer(components);

@tailwind base;
@tailwind components;

:root {
  /*  --slender-border-radius: 0px;*/
}

html {
  scroll-behavior: smooth;
}

html,
body {
  @apply h-full;
}

body {
  @apply transition-colors duration-300;

  color: var(--color-text);
  background-color: rgba(var(--slender-color-background));

  --component-color-gradient: linear-gradient(
    to bottom right,
    var(--component-color-gradient-stops)
  );
  --color-gradient: linear-gradient(
    to bottom right,
    theme('colors.pink.400'),
    theme('colors.pink.500')
  );
  --slender-color-text: rgb_triple(var(--color-text));
}

.prose {
  --tw-prose-headings: var(--color-text) !important;
  --tw-prose-code: var(--color-text) !important;
  --tw-prose-body: var(--color-text) !important;
  --tw-prose-links: var(--color-text) !important;
}

pre {
  @apply overflow-auto p-4 transition-colors duration-300;

  --tw-prose-pre-code: var(--pre-color-text);
  --tw-prose-pre-bg: var(--pre-color-background);

  background-color: var(--tw-prose-pre-bg);
  color: var(--tw-prose-pre-code);
}

.slender-ui-gradient {
  @apply bg-clip-text text-transparent;
  background-image: var(--color-gradient);
}

.border-divide {
  border-color: var(--color-divide);
}

* {
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Code highlighting */
.token.punctuation,
.token.operator,
.token.comment {
  color: var(--code-color-punctuation);
}

.token.property {
  color: var(--code-color-property);
}

.token.string,
.token.attr-value,
.language-css {
  color: var(--code-color-string);
}

.token.number {
  color: var(--code-color-number);
}

.token.boolean {
  color: var(--code-color-boolean);
}

.token.null.keyword {
  color: var(--code-color-null);
}

.token.keyword,
.token.attr-name {
  color: var(--code-color-keyword);
}

.token.constant {
  color: var(--code-color-constant);
}

.token.parameter {
  color: var(--code-color-parameter);
}

.token.function {
  color: var(--code-color-function);
}

.token.tag {
  color: var(--code-color-tag);
}

@tailwind utilities;