/* Outland Identity Portal Theme
 * Based on shadcn/ui CSS variables for Basecoat compatibility
 * Dark-first theme with blue/slate palette inspired by tweakcn "Cosmic Night"
 */

:root {
  /* Base radius */
  --radius: 0.5rem;
  
  /* Light mode (not primary, but available) */
  --background: oklch(0.985 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(0.985 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.488 0.243 264.376);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.488 0.243 264.376);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.488 0.243 264.376);
}

/* Dark mode - Primary theme for Outland */
.dark {
  --background: oklch(0.13 0.01 260);
  --foreground: oklch(0.95 0.01 260);
  --card: oklch(0.17 0.01 260);
  --card-foreground: oklch(0.95 0.01 260);
  --popover: oklch(0.20 0.01 260);
  --popover-foreground: oklch(0.95 0.01 260);
  --primary: oklch(0.60 0.20 264);
  --primary-foreground: oklch(0.98 0 0);
  --secondary: oklch(0.22 0.01 260);
  --secondary-foreground: oklch(0.95 0.01 260);
  --muted: oklch(0.22 0.01 260);
  --muted-foreground: oklch(0.65 0.02 260);
  --accent: oklch(0.28 0.02 260);
  --accent-foreground: oklch(0.95 0.01 260);
  --destructive: oklch(0.60 0.20 25);
  --destructive-foreground: oklch(0.98 0 0);
  --border: oklch(0.28 0.02 260);
  --input: oklch(0.25 0.02 260);
  --ring: oklch(0.60 0.20 264);
  --chart-1: oklch(0.60 0.20 264);
  --chart-2: oklch(0.70 0.17 162);
  --chart-3: oklch(0.77 0.19 70);
  --chart-4: oklch(0.63 0.27 304);
  --chart-5: oklch(0.65 0.25 16);
  --sidebar: oklch(0.15 0.01 260);
  --sidebar-foreground: oklch(0.95 0.01 260);
  --sidebar-primary: oklch(0.60 0.20 264);
  --sidebar-primary-foreground: oklch(0.98 0 0);
  --sidebar-accent: oklch(0.22 0.01 260);
  --sidebar-accent-foreground: oklch(0.95 0.01 260);
  --sidebar-border: oklch(0.28 0.02 260);
  --sidebar-ring: oklch(0.60 0.20 264);
  color-scheme: dark;
}

/* Plex brand color for OAuth buttons */
.btn-plex {
  --btn-bg: oklch(0.72 0.16 85);
  --btn-hover-bg: oklch(0.65 0.16 85);
  background-color: var(--btn-bg) !important;
  color: oklch(0.15 0 0) !important;
}
.btn-plex:hover {
  background-color: var(--btn-hover-bg) !important;
}

/* Custom scrollbar for dark mode */
.dark {
  --scrollbar-track: transparent;
  --scrollbar-thumb: oklch(0.35 0.02 260);
  --scrollbar-width: 8px;
  --scrollbar-radius: 4px;
}

/* Smooth transitions for theme switching */
* {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Focus visible improvements */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}