@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-background-primary: #070707;
  --color-background-secondary: #0f0f0f;
  --color-background-tertiary: #1a1a1a;
  --color-border: #363636;
  --color-text-primary: #ffffff;
  --color-text-secondary: #aaaaaa;
  --color-text-tertiary: #808080;
  --color-text-dim: #666666;
  --color-status-operational: #d0d0d0;
  --color-status-warning: #c08000;
  --color-status-error: #c06060;
  --color-status-unknown: #707070;

  --font-mono: "JetBrains Mono", Menlo, Monaco, "Courier New", monospace;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-2xl: 0px;
  --radius-3xl: 0px;
  --radius-4xl: 0px;
  --radius-full: 0px;
}

:root {
  --background: var(--color-background-primary);
  --foreground: var(--color-text-primary);
  --card: var(--color-background-secondary);
  --card-foreground: var(--color-text-primary);
  --popover: var(--color-background-secondary);
  --popover-foreground: var(--color-text-primary);
  --primary: var(--color-text-primary);
  --primary-foreground: var(--color-background-primary);
  --secondary: var(--color-background-tertiary);
  --secondary-foreground: var(--color-text-primary);
  --muted: var(--color-background-tertiary);
  --muted-foreground: var(--color-text-secondary);
  --accent: var(--color-background-tertiary);
  --accent-foreground: var(--color-text-primary);
  --destructive: var(--color-status-error);
  --border: var(--color-border);
  --input: var(--color-border);
  --ring: var(--color-text-dim);
  --radius: 0px;
}

.light {
  --color-background-primary: #ffffff;
  --color-background-secondary: #f8f8f8;
  --color-background-tertiary: #f0f0f0;
  --color-border: #d0d0d0;
  --color-text-primary: #000000;
  --color-text-secondary: #555555;
  --color-text-tertiary: #666666;
  --color-text-dim: #767676;
  --color-status-operational: #333333;
  --color-status-warning: #8a6200;
  --color-status-error: #c03030;
  --color-status-unknown: #767676;

  --background: var(--color-background-primary);
  --foreground: var(--color-text-primary);
  --card: var(--color-background-secondary);
  --card-foreground: var(--color-text-primary);
  --popover: var(--color-background-secondary);
  --popover-foreground: var(--color-text-primary);
  --primary: var(--color-text-primary);
  --primary-foreground: var(--color-background-primary);
  --secondary: var(--color-background-tertiary);
  --secondary-foreground: var(--color-text-primary);
  --muted: var(--color-background-tertiary);
  --muted-foreground: var(--color-text-secondary);
  --accent: var(--color-background-tertiary);
  --accent-foreground: var(--color-text-primary);
  --destructive: var(--color-status-error);
  --border: var(--color-border);
  --input: var(--color-border);
  --ring: var(--color-text-dim);
}

* {
  font-weight: 400 !important;
}

*,
*::before,
*::after {
  box-shadow: none !important;
}

body {
  font-family: var(--font-mono);
  font-size: var(--base-font-size, 1rem);
  line-height: 1.5;
  background: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.transition-colors {
  transition-property: color, background-color, border-color;
  transition-timing-function: ease;
  transition-duration: 100ms;
}

@keyframes pulse-status {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.prose-reader a {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-text-dim);
  text-underline-offset: 2px;
}

.prose-reader a:hover {
  text-decoration-color: var(--color-text-primary);
}

.prose-reader h1,
.prose-reader h2,
.prose-reader h3,
.prose-reader h4,
.prose-reader h5,
.prose-reader h6 {
  color: var(--color-text-primary);
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.prose-reader p {
  margin-bottom: 1em;
}

.prose-reader img {
  max-width: 100%;
  height: auto;
}

.prose-reader pre {
  background: var(--color-background-tertiary);
  border: 1px solid var(--color-border);
  padding: 1em;
  overflow-x: auto;
  margin-bottom: 1em;
}

.prose-reader code {
  background: var(--color-background-tertiary);
  padding: 0.15em 0.3em;
}

.prose-reader pre code {
  background: transparent;
  padding: 0;
}

.prose-reader blockquote {
  border-left: 2px solid var(--color-border);
  padding-left: 1em;
  color: var(--color-text-secondary);
  margin-bottom: 1em;
}

.prose-reader ul,
.prose-reader ol {
  padding-left: 1.5em;
  margin-bottom: 1em;
}

.prose-reader li {
  margin-bottom: 0.25em;
}

.prose-reader hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2em 0;
}

.prose-reader table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1em;
}

.prose-reader th,
.prose-reader td {
  border: 1px solid var(--color-border);
  padding: 0.5em;
  text-align: left;
}

.prose-reader mark[data-highlight-color] {
  background-color: rgba(234, 179, 8, 0.18);
  color: var(--color-text-primary);
  border-bottom: 1px solid rgba(234, 179, 8, 0.4);
  cursor: pointer;
}

.prose-reader mark[data-has-note] {
  border-bottom-style: dashed;
}

.light .prose-reader mark[data-highlight-color] {
  background-color: rgba(234, 179, 8, 0.15);
  border-bottom-color: rgba(234, 179, 8, 0.35);
}

.scrollbar-custom ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollbar-custom ::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-custom ::-webkit-scrollbar-thumb {
  background: var(--color-border);
}

.scrollbar-custom ::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-dim);
}

.scrollbar-custom ::-webkit-scrollbar-corner {
  background: transparent;
}

.scrollbar-custom {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.scrollbar-custom * {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.scrollbar-hidden ::-webkit-scrollbar {
  display: none;
}

.scrollbar-hidden {
  scrollbar-width: none;
}

.scrollbar-hidden * {
  scrollbar-width: none;
}