@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=JetBrains+Mono:wght@400;500;600&family=Outfit:wght@300;400;500;600;700&display=swap');

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

@layer base {
  :root {
    /* Nordic Clinical Editorial - Light Mode */
    /* Warm ivory backgrounds for that paper-like feel */
    --background: 45 30% 98%;
    --foreground: 20 14% 10%;

    /* Cards slightly warmer than background */
    --card: 40 25% 97%;
    --card-foreground: 20 14% 10%;

    /* Popovers crisp white for contrast */
    --popover: 0 0% 100%;
    --popover-foreground: 20 14% 10%;

    /* Deep teal primary - professional medical feel */
    --primary: 184 77% 22%;
    --primary-foreground: 45 30% 98%;

    /* Warm muted tones */
    --secondary: 40 20% 94%;
    --secondary-foreground: 20 14% 20%;

    /* Soft warm grays */
    --muted: 40 15% 92%;
    --muted-foreground: 20 8% 46%;

    /* Coral accent for energy */
    --accent: 14 80% 60%;
    --accent-foreground: 0 0% 100%;

    /* Rusty red for destructive actions */
    --destructive: 21 90% 40%;
    --destructive-foreground: 0 0% 98%;

    /* Warm borders */
    --border: 35 15% 88%;
    --input: 35 15% 88%;
    --ring: 184 77% 22%;

    /* Generous radius for softer feel */
    --radius: 0.75rem;

    /* Sidebar - warm parchment feel */
    --sidebar-background: 38 25% 95%;
    --sidebar-foreground: 20 14% 20%;
    --sidebar-primary: 184 77% 22%;
    --sidebar-primary-foreground: 45 30% 98%;
    --sidebar-accent: 38 20% 90%;
    --sidebar-accent-foreground: 20 14% 15%;
    --sidebar-border: 35 18% 85%;
    --sidebar-ring: 184 77% 30%;
  }

  .dark {
    /* Nordic Clinical Editorial - Dark Mode */
    /* Rich, warm dark backgrounds */
    --background: 20 15% 8%;
    --foreground: 40 15% 94%;

    --card: 20 12% 10%;
    --card-foreground: 40 15% 94%;

    --popover: 20 12% 12%;
    --popover-foreground: 40 15% 94%;

    /* Brighter teal for dark mode */
    --primary: 174 60% 50%;
    --primary-foreground: 20 15% 8%;

    --secondary: 20 10% 15%;
    --secondary-foreground: 40 15% 90%;

    --muted: 20 10% 18%;
    --muted-foreground: 35 10% 55%;

    /* Soft coral for dark mode */
    --accent: 14 70% 65%;
    --accent-foreground: 20 15% 8%;

    --destructive: 0 62% 50%;
    --destructive-foreground: 0 0% 98%;

    --border: 20 10% 18%;
    --input: 20 10% 18%;
    --ring: 174 60% 50%;

    /* Sidebar - dark */
    --sidebar-background: 20 12% 6%;
    --sidebar-foreground: 40 15% 90%;
    --sidebar-primary: 174 60% 50%;
    --sidebar-primary-foreground: 20 15% 8%;
    --sidebar-accent: 20 10% 12%;
    --sidebar-accent-foreground: 40 15% 90%;
    --sidebar-border: 20 10% 15%;
    --sidebar-ring: 174 60% 50%;
  }

  * {
    @apply border-border;
  }

  html {
    /* Subtle warm tint to the background */
    @apply antialiased;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    @apply bg-background text-foreground font-sans;
    font-feature-settings: "cv11", "ss01";
  }

  /* Editorial typography defaults */
  h1, h2, h3, h4, h5, h6 {
    @apply font-serif tracking-tight;
  }

  /* Smooth focus states */
  *:focus-visible {
    @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
  }

  /* Custom scrollbar styling */
  ::-webkit-scrollbar {
    @apply w-2 h-2;
  }

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

  ::-webkit-scrollbar-thumb {
    @apply bg-border rounded-full;
  }

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

  /* Selection styling */
  ::selection {
    @apply bg-primary/20 text-foreground;
  }
}

@layer components {
  /* Editorial button styles */
  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 h-11 px-6 py-2.5
           rounded-xl text-sm font-medium
           bg-primary text-primary-foreground
           shadow-soft hover:shadow-soft-md
           hover:bg-primary/90
           transition-all duration-200 ease-smooth
           focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2 h-11 px-6 py-2.5
           rounded-xl text-sm font-medium
           bg-secondary text-secondary-foreground
           border border-border
           shadow-soft-sm hover:shadow-soft
           hover:bg-secondary/80
           transition-all duration-200 ease-smooth;
  }

  .btn-ghost {
    @apply inline-flex items-center justify-center gap-2 h-10 px-4 py-2
           rounded-lg text-sm font-medium
           text-foreground hover:bg-muted
           transition-colors duration-150;
  }

  .btn-coral {
    @apply inline-flex items-center justify-center gap-2 h-11 px-6 py-2.5
           rounded-xl text-sm font-medium
           bg-coral-500 text-white
           shadow-soft hover:shadow-soft-md
           hover:bg-coral-600
           transition-all duration-200 ease-smooth;
  }

  .btn-sage {
    @apply inline-flex items-center justify-center gap-2 h-11 px-6 py-2.5
           rounded-xl text-sm font-medium
           bg-sage-400 text-white
           shadow-soft hover:shadow-soft-md
           hover:bg-sage-500
           transition-all duration-200 ease-smooth;
  }

  .btn-warning {
    @apply inline-flex items-center justify-center gap-2 h-11 px-6 py-2.5
           rounded-xl text-sm font-medium
           bg-amber-500 text-white
           shadow-soft hover:shadow-soft-md
           hover:bg-amber-600
           transition-all duration-200 ease-smooth;
  }

  /* Editorial card styles */
  .card-editorial {
    @apply bg-card rounded-2xl border border-border shadow-soft-md
           transition-shadow duration-300 hover:shadow-soft-lg;
  }

  .card-elevated {
    @apply bg-card rounded-2xl shadow-soft-lg border-0;
  }

  /* Input styles with warm aesthetic */
  .input-editorial {
    @apply flex h-11 w-full rounded-xl border border-input bg-background px-4 py-2.5
           text-sm text-foreground placeholder:text-muted-foreground
           shadow-inner-soft
           focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring
           disabled:cursor-not-allowed disabled:opacity-50
           transition-all duration-200;
  }

  /* Badge styles */
  .badge-coral {
    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium
           bg-coral-100 text-coral-700 dark:bg-coral-900/30 dark:text-coral-400;
  }

  .badge-teal {
    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium
           bg-teal-100 text-teal-700 dark:bg-teal-900/30 dark:text-teal-400;
  }

  .badge-sage {
    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium
           bg-sage-100 text-sage-700 dark:bg-sage-900/30 dark:text-sage-400;
  }

  /* Status indicator dot */
  .status-dot {
    @apply w-2 h-2 rounded-full;
  }

  .status-dot-recording {
    @apply bg-coral-500 animate-pulse-soft;
  }

  .status-dot-processing {
    @apply bg-amber-500 animate-pulse-soft;
  }

  .status-dot-completed {
    @apply bg-sage-400;
  }

  .status-dot-error {
    @apply bg-destructive;
  }

  /* Dropdown menu styling */
  .dropdown-menu {
    @apply absolute z-50 min-w-[180px] overflow-hidden rounded-xl
           border border-border bg-popover p-1.5 shadow-soft-lg
           animate-fade-in-down;
  }

  .dropdown-item {
    @apply flex items-center gap-2.5 w-full rounded-lg px-3 py-2 text-sm
           text-popover-foreground cursor-pointer whitespace-nowrap
           hover:bg-muted transition-colors duration-150;
  }

  /* Sidebar styles */
  .sidebar-item {
    @apply flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm
           text-sidebar-foreground/80 hover:text-sidebar-foreground
           hover:bg-sidebar-accent transition-all duration-150;
  }

  .sidebar-item-active {
    @apply bg-sidebar-accent text-sidebar-accent-foreground shadow-soft-sm;
  }

  /* Paper texture overlay (optional, subtle) */
  .paper-texture {
    @apply relative;
  }

  .paper-texture::before {
    content: '';
    @apply absolute inset-0 pointer-events-none opacity-[0.015] dark:opacity-[0.03];
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  }

  /* Section divider with editorial flair */
  .section-divider {
    @apply flex items-center gap-4 my-8;
  }

  .section-divider::before,
  .section-divider::after {
    content: '';
    @apply flex-1 h-px bg-gradient-to-r from-transparent via-border to-transparent;
  }

  /* Floating label effect */
  .floating-label-group {
    @apply relative;
  }

  .floating-label {
    @apply absolute left-4 top-1/2 -translate-y-1/2 text-muted-foreground text-sm
           pointer-events-none transition-all duration-200
           peer-focus:-translate-y-[1.75rem] peer-focus:text-xs peer-focus:text-primary
           peer-[:not(:placeholder-shown)]:-translate-y-[1.75rem] peer-[:not(:placeholder-shown)]:text-xs;
  }
}

@layer utilities {
  /* Text gradient utility */
  .text-gradient-primary {
    @apply bg-gradient-to-r from-primary to-teal-400 bg-clip-text text-transparent;
  }

  .text-gradient-coral {
    @apply bg-gradient-to-r from-coral-500 to-coral-400 bg-clip-text text-transparent;
  }

  /* Glow utilities */
  .glow-primary {
    box-shadow: 0 0 20px -5px hsl(var(--primary) / 0.4);
  }

  .glow-coral {
    box-shadow: 0 0 20px -5px theme('colors.coral.500' / 0.4);
  }

  /* Animation delays for staggered effects */
  .animation-delay-100 { animation-delay: 100ms; }
  .animation-delay-200 { animation-delay: 200ms; }
  .animation-delay-300 { animation-delay: 300ms; }
  .animation-delay-400 { animation-delay: 400ms; }
  .animation-delay-500 { animation-delay: 500ms; }

  /* Hover lift effect */
  .hover-lift {
    @apply transition-transform duration-200 hover:-translate-y-0.5;
  }

  /* Interactive scale */
  .interactive-scale {
    @apply transition-transform duration-150 active:scale-[0.98];
  }

  /* Gradient border effect */
  .gradient-border {
    @apply relative;
  }

  .gradient-border::before {
    content: '';
    @apply absolute inset-0 rounded-[inherit] p-px;
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  /* Hide scrollbar but keep functionality */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* Line clamp utilities */
  .line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  /* AI refinement highlight animation - subtle fade from highlight to normal */
  .animate-highlight-fade {
    animation: highlight-fade 2s ease-out;
  }

  @keyframes highlight-fade {
    0% {
      background-color: hsl(var(--primary) / 0.15);
      border-color: hsl(var(--primary) / 0.4);
    }
    100% {
      background-color: transparent;
      border-color: hsl(var(--border));
    }
  }

  /* Tiptap unified editor styles - Google Docs-like minimal padding */
  .ProseMirror,
  .tiptap {
    @apply text-sm leading-relaxed text-foreground outline-none min-h-[280px];
    padding: 0.75rem 0.75rem 0.75rem 0.75rem !important;
  }

  .ProseMirror:focus,
  .tiptap:focus {
    @apply outline-none;
  }

  /* Ensure editor container doesn't override padding */
  [data-tiptap-editor-target="editor"] .ProseMirror,
  [data-tiptap-editor-target="editor"] .tiptap,
  [data-tiptap-editor-target="editor"] > div {
    padding: 0.75rem !important;
  }

  /* Custom text selection - subtle primary tint */
  .ProseMirror ::selection,
  .tiptap ::selection {
    background-color: hsl(var(--primary) / 0.15);
  }

  .ProseMirror p,
  .tiptap p {
    @apply mb-3 last:mb-0;
  }

  .ProseMirror ul,
  .ProseMirror ol,
  .tiptap ul,
  .tiptap ol {
    @apply pl-5 mb-3;
  }

  .ProseMirror li,
  .tiptap li {
    @apply mb-1;
  }

  .ProseMirror ul,
  .tiptap ul {
    @apply list-disc;
  }

  .ProseMirror ol,
  .tiptap ol {
    @apply list-decimal;
  }

  .ProseMirror strong,
  .tiptap strong {
    @apply font-semibold;
  }

  .ProseMirror em,
  .tiptap em {
    @apply italic;
  }

  /* SOAP section headings - distinct labels */
  .ProseMirror h3,
  .tiptap h3 {
    @apply text-[11px] font-semibold uppercase tracking-wider text-muted-foreground mt-6 mb-2;
    font-family: inherit;
  }

  .ProseMirror h3:first-child,
  .tiptap h3:first-child {
    @apply mt-0;
  }

  /* Placeholder styling */
  .ProseMirror p.is-editor-empty:first-child::before,
  .tiptap p.is-editor-empty:first-child::before {
    @apply text-muted-foreground/40 float-left h-0 pointer-events-none;
    content: attr(data-placeholder);
  }

  /* Editor card focus state */
  .note-editor-card {
    @apply transition-shadow duration-200;
  }

  .note-editor-card:focus-within {
    @apply ring-2 ring-primary/20 border-primary/40;
  }

  /* Active toolbar button state */
  .tiptap-btn-active {
    @apply text-foreground bg-muted/70;
  }

  /* Toolbar button base */
  .tiptap-toolbar-btn {
    @apply p-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors;
  }
}