@import 'tailwindcss';
@import 'tw-animate-css';

@utility scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

@utility scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  &::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: var(--color-muted);
  }
}

@theme {
  --color-panel: #2a2a2a;
  --color-canvas: #1e1e1e;
  --color-border: #3a3a3a;
  --color-hover: #353535;
  --color-accent: #3b82f6;
  --color-surface: #e0e0e0;
  --color-muted: #888888;
  --color-input: #1e1e1e;
  --color-component: #9747ff;
  --color-warning-bg: rgb(245 158 11 / 0.1);
  --color-warning-border: rgb(245 158 11 / 0.3);
  --color-warning-text: #fde68a;
  --color-warning-action: #fcd34d;
  --color-success: #4ade80;
  --color-success-bg: #16a34a;
  --color-success-bg-hover: #15803d;
  --color-code-tag: #7dd3fc;
  --color-code-attribute: #c4b5fd;
  --color-code-string: #86efac;
  --color-code-number: #fca5a5;
  --color-code-punctuation: #888888;
  --color-checkerboard: #3a3a3a;
  --color-checkerboard-muted: #4a4a4a;
  --color-ruler-bg: rgb(36, 36, 36);
  --color-ruler-tick: rgb(102, 102, 102);
  --color-ruler-text: rgb(140, 140, 140);
  --color-ruler-label: rgb(255, 255, 255);
}

html[data-theme='light'] {
  --color-panel: #ffffff;
  --color-canvas: #f3f4f6;
  --color-border: #d8dce3;
  --color-hover: #eef1f5;
  --color-accent: #2563eb;
  --color-surface: #202124;
  --color-muted: #6b7280;
  --color-input: #ffffff;
  --color-component: #7c3aed;
  --color-warning-bg: rgb(245 158 11 / 0.14);
  --color-warning-border: rgb(245 158 11 / 0.32);
  --color-warning-text: #92400e;
  --color-warning-action: #78350f;
  --color-success: #15803d;
  --color-success-bg: #16a34a;
  --color-success-bg-hover: #15803d;
  --color-code-tag: #0369a1;
  --color-code-attribute: #6d28d9;
  --color-code-string: #15803d;
  --color-code-number: #b91c1c;
  --color-code-punctuation: #64748b;
  --color-checkerboard: #d1d5db;
  --color-checkerboard-muted: #e5e7eb;
  --color-ruler-bg: rgb(229, 231, 235);
  --color-ruler-tick: rgb(148, 163, 184);
  --color-ruler-text: rgb(100, 116, 139);
  --color-ruler-label: rgb(255, 255, 255);
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family:
    Inter,
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 13px;
  color: var(--color-surface);
  background: var(--color-canvas);
  user-select: none;
  -webkit-user-select: none;
}

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

.code-highlight .token.attr-name {
  color: var(--color-code-attribute);
}

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

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

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

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

input[type='number'] {
  appearance: textfield;
  -moz-appearance: textfield;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  display: none;
}