@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

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

@layer base {
  :root {
    /* Default OLED theme */
    --bg-primary: #000000;
    --bg-secondary: #050505;
    --bg-card: #0a0a0a;
    --bg-hover: #141414;
    --text-primary: #ffffff;
    --text-secondary: #999999;
    --text-tertiary: #666666;
    --border: rgba(255, 255, 255, 0.06);
    --accent: #3b82f6;
    --focus-ring: rgba(255, 255, 255, 0.25);

    /* Shadows for depth */
    --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.04);
    --shadow-elevated: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 8px rgba(0, 0, 0, 0.4);

    /* Shadcn-style tokens mapped to theme variables */
    --background: var(--bg-primary);
    --foreground: var(--text-primary);
    --card: var(--bg-card);
    --card-foreground: var(--text-primary);
    --popover: var(--bg-card);
    --popover-foreground: var(--text-primary);
    --primary: var(--text-primary);
    --primary-foreground: var(--bg-primary);
    --secondary: var(--bg-secondary);
    --secondary-foreground: var(--text-primary);
    --muted: var(--bg-secondary);
    --muted-foreground: var(--text-tertiary);
    --accent-foreground: var(--bg-primary);
    --destructive: #ef4444;
    --destructive-foreground: #fef2f2;
    --input: var(--border);
    --ring: var(--focus-ring);
    --radius: 0.5rem;
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.25rem;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  * {
    border-color: var(--border);
  }

  ::-webkit-scrollbar {
    @apply w-2 h-2;
  }

  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    @apply rounded;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
  }

  /* Light theme scrollbar adjustment */
  .light-theme ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
  }

  .light-theme ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.15);
  }
}
