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

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

@layer base {
  :root {
    /* Notion-inspired color palette - cleaner, more minimal */
    --background: 0 0% 100%;
    --foreground: 0 0% 9%;  /* #171717 - darker, better contrast */

    --card: 0 0% 100%;
    --card-foreground: 0 0% 9%;
 
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 9%;
 
    --primary: 0 0% 9%;  /* #171717 - dark like Notion */
    --primary-foreground: 0 0% 98%;
 
    --secondary: 0 0% 96%;  /* #f7f7f7 - lighter, more minimal */
    --secondary-foreground: 0 0% 9%;
 
    --muted: 0 0% 96%;  /* #f7f7f7 - matches secondary */
    --muted-foreground: 0 0% 45%;  /* #737373 - softer gray */
 
    --accent: 0 0% 96%;
    --accent-foreground: 0 0% 9%;
 
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 90%;  /* #e6e6e6 - lighter, more subtle */
    --input: 0 0% 90%;
    --ring: 0 0% 9%;
 
    --radius: 0.375rem;  /* 6px - smaller, more Notion-like */
    
    /* Notion-style spacing system */
    --spacing-xs: 0.25rem;  /* 4px */
    --spacing-sm: 0.5rem;   /* 8px */
    --spacing-md: 0.75rem;  /* 12px */
    --spacing-lg: 1rem;     /* 16px */
    --spacing-xl: 1.5rem;   /* 24px */
    --spacing-2xl: 2rem;    /* 32px */
    
    /* Typography scale */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
  }
 
  .dark {
    /* Notion-inspired dark mode - sophisticated, not harsh */
    --background: 0 0% 7%;  /* #121212 - softer dark */
    --foreground: 0 0% 98%;
 
    --card: 0 0% 7%;
    --card-foreground: 0 0% 98%;
 
    --popover: 0 0% 7%;
    --popover-foreground: 0 0% 98%;
 
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 7%;
 
    --secondary: 0 0% 11%;  /* #1c1c1c - subtle elevation */
    --secondary-foreground: 0 0% 98%;
 
    --muted: 0 0% 11%;
    --muted-foreground: 0 0% 65%;  /* #a6a6a6 - good contrast */
 
    --accent: 0 0% 11%;
    --accent-foreground: 0 0% 98%;
 
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
 
    --border: 0 0% 15%;  /* #262626 - subtle borders */
    --input: 0 0% 15%;
    --ring: 0 0% 98%;
  }
}
 
@layer base {
  * {
    @apply border-border;
  }
  
  body {
    @apply bg-background text-foreground;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-feature-settings: 'rlig' 1, 'calt' 1;
    font-variation-settings: 'slnt' 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* Notion-style typography hierarchy */
  h1, h2, h3, h4, h5, h6 {
    @apply font-medium tracking-tight;
    line-height: 1.2;
  }
  
  h1 { @apply text-2xl; }
  h2 { @apply text-xl; }
  h3 { @apply text-lg; }
  h4 { @apply text-base; }
  h5 { @apply text-sm; }
  h6 { @apply text-xs; }
  
  p {
    @apply text-base leading-relaxed;
  }
  
  /* Better default focus styles */
  :focus {
    @apply outline-none ring-2 ring-ring ring-offset-2;
  }
  
  /* Remove default focus for mouse users */
  :focus:not(:focus-visible) {
    @apply outline-none ring-0 ring-offset-0;
  }
}

/* Notion-style scrollbar - minimal and unobtrusive */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

::-webkit-scrollbar-thumb {
  @apply bg-muted-foreground/20 rounded-full;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-muted-foreground/40;
}

/* Ensure Radix UI components fit well with Tailwind */
[data-radix-popper-content-wrapper] {
  z-index: 100 !important; /* Higher z-index for popovers, dialogs, etc. */
}

/* Notion-style utilities */
@layer utilities {
  /* Spacing utilities using CSS variables */
  .space-notion-xs { margin: var(--spacing-xs); }
  .space-notion-sm { margin: var(--spacing-sm); }
  .space-notion-md { margin: var(--spacing-md); }
  .space-notion-lg { margin: var(--spacing-lg); }
  .space-notion-xl { margin: var(--spacing-xl); }
  .space-notion-2xl { margin: var(--spacing-2xl); }
  
  /* Typography utilities */
  .text-notion-xs { font-size: var(--text-xs); }
  .text-notion-sm { font-size: var(--text-sm); }
  .text-notion-base { font-size: var(--text-base); }
  .text-notion-lg { font-size: var(--text-lg); }
  .text-notion-xl { font-size: var(--text-xl); }
  .text-notion-2xl { font-size: var(--text-2xl); }
  
  /* Notion-style buttons */
  .btn-notion {
    @apply px-3 py-1.5 text-sm font-medium rounded-md transition-colors duration-150;
    @apply border border-border/30 bg-background hover:bg-muted/50;
    @apply focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2;
  }
  
  .btn-notion-primary {
    @apply btn-notion bg-primary text-primary-foreground border-primary;
    @apply hover:bg-primary/90;
  }
  
  /* Notion-style cards */
  .card-notion {
    @apply bg-card border border-border/30 rounded-lg;
    @apply transition-all duration-150 ease-out;
  }
  
  .card-notion-hover {
    @apply card-notion hover:border-border/50 hover:bg-muted/20;
  }
  
  /* Notion-style inputs */
  .input-notion {
    @apply w-full px-3 py-2 text-sm bg-background border border-border/30 rounded-md;
    @apply placeholder:text-muted-foreground focus:border-ring focus:ring-1 focus:ring-ring;
    @apply transition-colors duration-150;
  }
  
  /* Notion-style tables */
  .table-notion {
    @apply w-full border-separate border-spacing-0;
  }
  
  .table-notion th {
    @apply px-3 py-3 text-left text-xs font-medium text-muted-foreground;
    @apply border-b border-border/30 bg-muted/30;
  }
  
  .table-notion td {
    @apply px-3 py-3 text-sm text-foreground;
    @apply border-b border-border/20;
  }
  
  .table-notion tr:hover {
    @apply bg-muted/20;
  }
  
  .table-notion tr {
    @apply transition-colors duration-150;
  }
  
  /* Enhanced category badges - keeping existing functionality but with Notion styling */
  .category-badge-tofu {
    @apply bg-tofu text-tofu-foreground hover:bg-tofu-dark transition-colors duration-150;
    @apply px-2 py-1 rounded-md text-xs font-medium;
  }
  
  .category-badge-mofu {
    @apply bg-mofu text-mofu-foreground hover:bg-mofu-dark transition-colors duration-150;
    @apply px-2 py-1 rounded-md text-xs font-medium;
  }
  
  .category-badge-bofu {
    @apply bg-bofu text-bofu-foreground hover:bg-bofu-dark transition-colors duration-150;
    @apply px-2 py-1 rounded-md text-xs font-medium;
  }
  
  /* Global interactive element enhancements */
  .notion-interactive {
    @apply transition-all duration-150 ease-out;
  }
  
  .notion-hover-lift {
    @apply hover:shadow-notion-hover transition-all duration-150;
  }
  
  .notion-hover-bg {
    @apply hover:bg-muted/20 transition-colors duration-150;
  }
  
  .notion-focus {
    @apply focus:ring-1 focus:ring-ring focus:border-ring transition-colors duration-150;
  }
}

/* Example of enhancing a ShadCN component specifically if needed */
/* .button-primary-glow {
  @apply shadow-[0_0_15px_theme('colors.primary/50')];
} */