@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 9%;
    --primary: 11 79% 51%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 96%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96%;
    --muted-foreground: 0 0% 45%;
    --accent: 0 0% 96%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 0 0% 90%;
    --input: 0 0% 90%;
    --ring: 11 79% 51%;
    --radius: 0.5rem;
    --shadow-sm: 0 1px 2px rgba(13, 11, 9, 0.06);
    --shadow-md: 0 4px 12px rgba(13, 11, 9, 0.08), 0 0 0 1px rgba(13, 11, 9, 0.04);
    --shadow-lg: 0 12px 32px rgba(13, 11, 9, 0.12), 0 0 0 1px rgba(13, 11, 9, 0.06);
    --shadow-glow-brand: 0 0 24px rgba(229, 70, 31, 0.25);
    --glass-bg-light: rgba(255, 255, 255, 0.72);
    --glass-bg-dark: rgba(13, 11, 9, 0.72);
    --glass-border-light: rgba(255, 255, 255, 0.4);
    --glass-border-dark: rgba(255, 255, 255, 0.08);
  }

  .dark {
    --background: 30 14% 4%;
    --foreground: 0 0% 98%;
    --card: 30 14% 6%;
    --card-foreground: 0 0% 98%;
    --popover: 30 14% 6%;
    --popover-foreground: 0 0% 98%;
    --primary: 11 79% 51%;
    --primary-foreground: 0 0% 100%;
    --secondary: 30 6% 15%;
    --secondary-foreground: 0 0% 98%;
    --muted: 30 6% 15%;
    --muted-foreground: 0 0% 63%;
    --accent: 30 6% 15%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62% 30%;
    --destructive-foreground: 0 0% 100%;
    --border: 30 6% 15%;
    --input: 30 6% 15%;
    --ring: 11 79% 51%;
    --shadow-sm: 0 1px 2px rgba(13, 11, 9, 0.06);
    --shadow-md: 0 4px 12px rgba(13, 11, 9, 0.08), 0 0 0 1px rgba(13, 11, 9, 0.04);
    --shadow-lg: 0 12px 32px rgba(13, 11, 9, 0.12), 0 0 0 1px rgba(13, 11, 9, 0.06);
    --shadow-glow-brand: 0 0 24px rgba(229, 70, 31, 0.25);
    --glass-bg-light: rgba(255, 255, 255, 0.72);
    --glass-bg-dark: rgba(13, 11, 9, 0.72);
    --glass-border-light: rgba(255, 255, 255, 0.4);
    --glass-border-dark: rgba(255, 255, 255, 0.08);
  }

  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.3);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

/* CodeMirror integration */
.cm-editor {
  @apply h-full;
}
.cm-editor .cm-scroller {
  @apply font-mono text-sm;
}

/* Monospace font + ligature tokens — driven by body.mono-* classes */
:root {
  --font-mono-active: 'JetBrains Mono', 'SF Mono', Monaco, 'Courier New', monospace;
  --font-mono-feature: 'liga' 0, 'calt' 0;
}
body.mono-fira-code {
  --font-mono-active: 'Fira Code', 'JetBrains Mono', 'SF Mono', monospace;
}
body.mono-ligatures-on {
  --font-mono-feature: 'liga' 1, 'calt' 1;
}
code,
pre,
kbd,
samp {
  font-family: var(--font-mono-active);
  font-feature-settings: var(--font-mono-feature);
}