@import "tailwindcss";

/* Tell Tailwind where to scan for classes */
@source "../../javascript/components/**/*.jsx";
@source "../../javascript/components/**/*.js";
@source "../../javascript/*.jsx";
@source "../../../views/**/*.html.erb";
@source "../../../views/**/*.html.haml";

/* Sentinel Dark Theme */
:root {
  --color-bg: #0a0a12;
  --color-surface: #12121a;
  --color-surface-elevated: #1a1a24;
  --color-border: #1e1e2e;
  --color-border-light: #2a2a3e;
  --color-text: #e8e6e3;
  --color-text-secondary: #a5a3a0;
  --color-text-muted: #5a585e;
  --color-primary: #3B82F6;
  --color-primary-hover: #2563EB;
  --color-nav-bg: #0e0e16;
}

html {
  background-color: var(--color-bg);
  color: var(--color-text);
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-light);
  border-radius: 4px;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-light) var(--color-bg);
}

button, [role="button"], a, summary {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

::selection {
  background-color: var(--color-primary);
  color: white;
}