@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;500;600;700&display=swap');

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

/* FlowWink Design System
   Professional aesthetic with customizable palette
   All colors MUST be HSL.
*/

@layer base {
  :root {
    /* Primary Brand Color - Professional Blue #003087 */
    --primary: 220 100% 26%;
    --primary-foreground: 0 0% 100%;
    
    /* Clean White Background */
    --background: 210 20% 99%;
    --foreground: 220 25% 12%;

    /* Cards with subtle warmth */
    --card: 0 0% 100%;
    --card-foreground: 220 25% 12%;

    --popover: 0 0% 100%;
    --popover-foreground: 220 25% 12%;

    /* Secondary - Soft blue-gray */
    --secondary: 210 25% 95%;
    --secondary-foreground: 220 25% 20%;

    /* Muted elements */
    --muted: 210 15% 93%;
    --muted-foreground: 220 10% 45%;

    /* Accent - Teal for healthcare */
    --accent: 180 45% 92%;
    --accent-foreground: 180 60% 25%;

    /* Status colors */
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;
    
    --success: 142 72% 35%;
    --success-foreground: 0 0% 100%;
    
    --warning: 38 92% 50%;
    --warning-foreground: 38 92% 15%;
    
    --info: 200 85% 45%;
    --info-foreground: 0 0% 100%;

    /* Borders and inputs */
    --border: 214 20% 88%;
    --input: 214 20% 88%;
    --ring: 220 100% 26%;

    --radius: 0.5rem;

    /* Sidebar */
    --sidebar-background: 220 25% 12%;
    --sidebar-foreground: 210 15% 93%;
    --sidebar-primary: 0 0% 100%;
    --sidebar-primary-foreground: 220 25% 12%;
    --sidebar-accent: 220 25% 18%;
    --sidebar-accent-foreground: 210 15% 93%;
    --sidebar-border: 220 20% 20%;
    --sidebar-ring: 220 100% 50%;

    /* Typography */
    --font-serif: 'PT Serif', Georgia, serif;
    --font-sans: 'Inter', system-ui, sans-serif;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 hsl(220 25% 12% / 0.05);
    --shadow: 0 1px 3px 0 hsl(220 25% 12% / 0.1), 0 1px 2px -1px hsl(220 25% 12% / 0.1);
    --shadow-md: 0 4px 6px -1px hsl(220 25% 12% / 0.1), 0 2px 4px -2px hsl(220 25% 12% / 0.1);
    --shadow-lg: 0 10px 15px -3px hsl(220 25% 12% / 0.1), 0 4px 6px -4px hsl(220 25% 12% / 0.1);
    
    /* Design System 2026: Premium Shadows */
    --shadow-premium: 0 25px 50px -12px hsl(220 25% 12% / 0.15);
    --shadow-float: 0 10px 40px -10px hsl(var(--primary) / 0.3);
    --shadow-glow: 0 0 40px hsl(var(--primary) / 0.15);
  }

  .dark {
    --primary: 210 60% 60%;
    --primary-foreground: 220 25% 10%;
    
    --background: 220 25% 8%;
    --foreground: 210 20% 95%;

    --card: 220 25% 12%;
    --card-foreground: 210 20% 95%;

    --popover: 220 25% 12%;
    --popover-foreground: 210 20% 95%;

    --secondary: 220 20% 18%;
    --secondary-foreground: 210 20% 90%;

    --muted: 220 15% 20%;
    --muted-foreground: 210 10% 60%;

    --accent: 180 30% 20%;
    --accent-foreground: 180 50% 80%;

    --destructive: 0 62% 40%;
    --destructive-foreground: 0 0% 100%;
    
    --success: 142 60% 45%;
    --success-foreground: 142 80% 90%;
    
    --warning: 38 80% 55%;
    --warning-foreground: 38 90% 90%;
    
    --info: 200 70% 55%;
    --info-foreground: 200 90% 95%;

    --border: 220 15% 22%;
    --input: 220 15% 22%;
    --ring: 210 60% 60%;

    --sidebar-background: 220 25% 6%;
    --sidebar-foreground: 210 15% 90%;
    --sidebar-primary: 210 60% 60%;
    --sidebar-primary-foreground: 220 25% 8%;
    --sidebar-accent: 220 25% 12%;
    --sidebar-accent-foreground: 210 15% 90%;
    --sidebar-border: 220 20% 15%;
    --sidebar-ring: 210 60% 60%;
  }
}

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

  html {
    scroll-behavior: smooth;
    /* Mobile safety net: prevent rogue blocks (wide tables, marquees, full-bleed images)
       from creating horizontal page scroll. Internal overflow-x:auto containers still scroll. */
    overflow-x: hidden;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
    font-family: var(--font-sans);
    overflow-x: hidden;
    /* Avoid layout shift caused by horizontal scrollbar on desktop */
    max-width: 100vw;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    @apply font-bold tracking-tight;
  }
}

/* Tiptap Editor Styles */
.tiptap {
  @apply outline-none min-h-[300px] p-4 text-foreground;
}

.tiptap p {
  @apply my-3 leading-relaxed;
}

.tiptap h1 {
  @apply text-3xl font-bold mt-8 mb-4;
  font-family: var(--font-serif);
}

.tiptap h2 {
  @apply text-2xl font-bold mt-6 mb-3;
  font-family: var(--font-serif);
}

.tiptap h3 {
  @apply text-xl font-semibold mt-5 mb-2;
  font-family: var(--font-serif);
}

.tiptap ul {
  @apply list-disc ml-6 my-3;
}

.tiptap ol {
  @apply list-decimal ml-6 my-3;
}

.tiptap li {
  @apply my-1;
}

.tiptap blockquote {
  @apply border-l-4 border-primary pl-4 italic my-4 text-muted-foreground;
}

.tiptap a {
  @apply text-primary underline hover:no-underline;
}

.tiptap img {
  @apply rounded-lg max-w-full h-auto my-4;
}

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

/* Status Badge Styles */
.status-badge {
  @apply inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium;
}

.status-draft {
  @apply bg-muted text-muted-foreground;
}

.status-reviewing {
  @apply bg-warning/20 text-warning-foreground;
}

.status-published {
  @apply bg-success/20 text-success;
}

.status-archived {
  @apply bg-secondary text-secondary-foreground;
}

/* Smooth page transitions */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* Save bar - part of flex layout, not fixed */
.sticky-save-bar {
  @apply shrink-0 bg-card/95 backdrop-blur-sm border-t border-border;
  @apply shadow-[0_-4px_6px_-1px_hsl(var(--foreground)/0.05)];
}

/* ============================================
   DESIGN SYSTEM 2026: Premium Utilities
   ============================================ */

/* Gradient Text */
.text-gradient {
  @apply bg-clip-text text-transparent bg-gradient-to-r from-primary via-primary/80 to-primary/60;
}

.text-gradient-subtle {
  @apply bg-clip-text text-transparent bg-gradient-to-b from-foreground to-foreground/70;
}

.text-gradient-vibrant {
  @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent-foreground;
}

/* Glassmorphism */
.glass {
  @apply bg-background/80 backdrop-blur-md border border-border/50;
}

.glass-strong {
  @apply bg-background/90 backdrop-blur-xl border border-border/30;
  box-shadow: var(--shadow-lg);
}

.glass-primary {
  @apply bg-primary/10 backdrop-blur-md border border-primary/20;
}

.glass-card {
  @apply bg-card/80 backdrop-blur-md border border-border/50 rounded-xl;
  box-shadow: var(--shadow-md);
}

/* Premium Card Styles */
.card-hover-lift {
  @apply transition-all duration-300 ease-premium;
}
.card-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-premium);
}

.card-hover-glow {
  @apply transition-all duration-300 ease-premium;
}
.card-hover-glow:hover {
  box-shadow: var(--shadow-glow);
}

.card-hover-border {
  @apply transition-all duration-300 ease-premium border-2 border-transparent;
}
.card-hover-border:hover {
  @apply border-primary/50;
}

/* Gradient Border */
.gradient-border {
  position: relative;
  background: hsl(var(--card));
  border-radius: var(--radius);
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius) + 1px);
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent-foreground)));
  z-index: -1;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.gradient-border:hover::before {
  opacity: 1;
}

/* Button Glow Effect */
.btn-glow {
  @apply relative overflow-hidden;
}
.btn-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-float);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.btn-glow:hover::after {
  opacity: 1;
}

/* Premium Shadows as Classes */
.shadow-premium {
  box-shadow: var(--shadow-premium);
}

.shadow-float {
  box-shadow: var(--shadow-float);
}

.shadow-glow {
  box-shadow: var(--shadow-glow);
}
