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

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

@layer base {
  :root {
    --background: 350 30% 98%;
    --foreground: 345 30% 15%;

    --card: 0 0% 100%;
    --card-foreground: 345 30% 15%;

    --popover: 0 0% 100%;
    --popover-foreground: 345 30% 15%;

    --primary: 350 85% 80%;
    --primary-foreground: 350 30% 20%;

    --secondary: 350 30% 96.1%;
    --secondary-foreground: 345 30% 15%;

    --muted: 350 30% 96.1%;
    --muted-foreground: 350 10% 50%;

    --accent: 350 30% 96.1%;
    --accent-foreground: 345 30% 15%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 350 30% 98%;

    --border: 350 30% 91.4%;
    --input: 350 30% 91.4%;
    --ring: 350 85% 80%;

    --radius: 0.5rem;

    --sidebar-background: 0 0% 100%;
    --sidebar-foreground: 345 30% 15%;
    --sidebar-primary: 350 85% 80%;
    --sidebar-primary-foreground: 350 30% 20%;
    --sidebar-accent: 350 30% 96.1%;
    --sidebar-accent-foreground: 345 30% 15%;
    --sidebar-border: 350 30% 91.4%;
    --sidebar-ring: 350 85% 80%;
  }

  .dark {
    --background: 345 30% 10%;
    --foreground: 350 30% 98%;

    --card: 345 30% 10%;
    --card-foreground: 350 30% 98%;

    --popover: 345 30% 10%;
    --popover-foreground: 350 30% 98%;

    --primary: 350 85% 80%;
    --primary-foreground: 345 30% 15%;

    --secondary: 342 20% 17.5%;
    --secondary-foreground: 350 30% 98%;

    --muted: 342 20% 17.5%;
    --muted-foreground: 350 10% 70%;

    --accent: 342 20% 17.5%;
    --accent-foreground: 350 30% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 350 30% 98%;

    --border: 342 20% 17.5%;
    --input: 342 20% 17.5%;
    --ring: 350 70% 85%;
    
    --sidebar-background: 345 30% 10%;
    --sidebar-foreground: 350 30% 98%;
    --sidebar-primary: 350 85% 80%;
    --sidebar-primary-foreground: 350 30% 98%;
    --sidebar-accent: 342 20% 17.5%;
    --sidebar-accent-foreground: 350 30% 98%;
    --sidebar-border: 342 20% 17.5%;
    --sidebar-ring: 350 70% 85%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-sans;
    font-feature-settings: "rlig" 1, "calt" 1;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

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

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

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

  /* Add system font */
  @font-face {
    font-family: 'SF Pro Display';
    src: local('SF Pro Display'), local('SFProDisplay'),
         url(https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff) format('woff');
    font-weight: 400;
    font-style: normal;
  }

  @font-face {
    font-family: 'SF Pro Display';
    src: local('SF Pro Display Medium'), local('SFProDisplay-Medium'),
         url(https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-medium-webfont.woff) format('woff');
    font-weight: 500;
    font-style: normal;
  }

  @font-face {
    font-family: 'SF Pro Display';
    src: local('SF Pro Display Semibold'), local('SFProDisplay-Semibold'),
         url(https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-semibold-webfont.woff) format('woff');
    font-weight: 600;
    font-style: normal;
  }

  @font-face {
    font-family: 'SF Pro Display';
    src: local('SF Pro Display Bold'), local('SFProDisplay-Bold'),
         url(https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-bold-webfont.woff) format('woff');
    font-weight: 700;
    font-style: normal;
  }
}

@layer components {
  .glass-card {
    @apply bg-white/80 backdrop-blur-md border border-white/20 shadow-sm;
  }
  
  .glass-panel {
    @apply bg-white/90 backdrop-blur-sm border border-white/40 shadow-sm;
  }
  
  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-pink-300;
  }
  
  .hover-transition {
    @apply transition-all duration-300 ease-in-out;
  }
  
  .button-transition {
    @apply transition-all duration-200 ease-out;
  }
  
  /* Sidebar icon styles */
  .sidebar-icon {
    @apply h-4 w-4 text-slate-500 mr-3 mt-0.5 flex-shrink-0;
  }
  
  .sidebar-section {
    @apply flex items-start;
  }
  
  .sidebar-sub-item {
    @apply ml-7 text-sm text-muted-foreground;
  }

  /* Persona card overlay styles */
  .persona-card {
    @apply relative overflow-hidden;
    min-height: 360px;
  }
  
  .persona-card-overlay {
    @apply absolute inset-0 transition-all duration-200 ease-out pointer-events-none;
  }
  
  .persona-card:hover .persona-card-overlay {
    @apply bg-[rgba(236,209,222,0.3)];
  }
  
  .persona-card.selected .persona-card-overlay {
    @apply bg-[rgba(236,209,222,0.3)];
  }
  
  .persona-card-checkmark {
    @apply absolute top-3 left-3 z-20 opacity-0 transition-all duration-200 ease-out;
    @apply bg-white/90 rounded-full p-1 shadow-sm border border-white/40;
  }
  
  .persona-card.selected .persona-card-checkmark {
    @apply opacity-100;
  }
}