/* Custom CSS for Modern Sleek Flat Design - Smallpdf Inspired */

/* Color palette */
:root {
  /* Backgrounds */
  --bg-primary: #F8FAFC; /* Slate 50 - Main background */
  --bg-surface: #FFFFFF; /* White - Card/Surface background */
  --bg-secondary: #F1F5F9; /* Slate 100 - Secondary background */

  /* Text */
  --text-primary: #0F172A; /* Slate 900 - Headings, strong text */
  --text-secondary: #475569; /* Slate 600 - Body text */
  --text-tertiary: #94A3B8; /* Slate 400 - Muted text */

  /* Brand / Primary - Vibrant Indigo */
  --accent-primary: #7961F2; /* Indigo */
  --accent-primary-hover: #5D48D6; /* Darker Indigo */
  --accent-light: #EEECFD; /* Light Indigo Background */
  --accent-border: #C7BFF9; /* Indigo Border */

  /* Secondary Accent - Coral Red (for warnings/actions) */
  --accent-secondary: #FA5542; /* Coral Red */
  --accent-secondary-hover: #D93D2B;
  --accent-secondary-light: #FFF0EE;

  /* Tool Specific Colors */
  --color-compress: #FA5542; /* Coral Red */
  --color-compress-bg: #FFF0EE;
  
  --color-split: #00C3F3; /* Sky Blue */
  --color-split-bg: #E0F9FF;
  
  --color-merge: #7961F2; /* Indigo */
  --color-merge-bg: #EEECFD;
  
  --color-rotate: #00D084; /* Emerald */
  --color-rotate-bg: #E0FBF1;

  --color-watermark: #3B82F6; /* Blue */
  --color-watermark-bg: #EFF6FF;

  /* Borders */
  --border-color: #E2E8F0; /* Slate 200 */
  --border-hover: #CBD5E1; /* Slate 300 */

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
}

/* Global resets */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  letter-spacing: -0.025em;
}

/* Links and navigation */
.nav-link {
  color: var(--text-secondary);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.nav-link:hover {
  color: var(--accent-primary);
  background-color: var(--accent-light);
}

.nav-link.active {
  color: var(--accent-primary);
  background-color: var(--accent-light);
  font-weight: 600;
}


/* Buttons */
.btn-primary {
  background-color: var(--accent-primary);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
}

.btn-primary:hover {
  background-color: var(--accent-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background-color: white;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
}

.btn-secondary:hover {
  border-color: var(--accent-primary);
  background-color: var(--accent-light);
  color: var(--accent-primary);
}


/* Tool Card Specifics */
.tool-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tool-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

/* Tool Theme Classes */
.tool-compress { border-bottom: 4px solid var(--color-compress); }
.tool-compress .tool-icon-bg { background-color: var(--color-compress-bg); color: var(--color-compress); }
.tool-compress:hover { background-color: var(--color-compress-bg); }
.tool-compress:hover .tool-icon-bg { background-color: white; color: var(--color-compress); }

.tool-split { border-bottom: 4px solid var(--color-split); }
.tool-split .tool-icon-bg { background-color: var(--color-split-bg); color: var(--color-split); }
.tool-split:hover { background-color: var(--color-split-bg); }
.tool-split:hover .tool-icon-bg { background-color: white; color: var(--color-split); }

.tool-merge { border-bottom: 4px solid var(--color-merge); }
.tool-merge .tool-icon-bg { background-color: var(--color-merge-bg); color: var(--color-merge); }
.tool-merge:hover { background-color: var(--color-merge-bg); }
.tool-merge:hover .tool-icon-bg { background-color: white; color: var(--color-merge); }

.tool-rotate { border-bottom: 4px solid var(--color-rotate); }
.tool-rotate .tool-icon-bg { background-color: var(--color-rotate-bg); color: var(--color-rotate); }
.tool-rotate:hover { background-color: var(--color-rotate-bg); }
.tool-rotate:hover .tool-icon-bg { background-color: white; color: var(--color-rotate); }

.tool-watermark { border-bottom: 4px solid var(--color-watermark); }
.tool-watermark .tool-icon-bg { background-color: var(--color-watermark-bg); color: var(--color-watermark); }
.tool-watermark:hover { background-color: var(--color-watermark-bg); }
.tool-watermark:hover .tool-icon-bg { background-color: white; color: var(--color-watermark); }

.tool-icon-bg {
    transition: all 0.3s ease;
}

/* Feature Cards */
.feature-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 2rem;
    transition: all 0.3s ease;
    height: 100%;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.feature-fast { border-bottom: 4px solid var(--accent-primary); }
.feature-fast .feature-icon-bg { background-color: var(--accent-light); color: var(--accent-primary); }
.feature-fast:hover { background-color: var(--accent-light); }
.feature-fast:hover .feature-icon-bg { background-color: white; color: var(--accent-primary); }

.feature-privacy { border-bottom: 4px solid var(--accent-secondary); }
.feature-privacy .feature-icon-bg { background-color: var(--accent-secondary-light); color: var(--accent-secondary); }
.feature-privacy:hover { background-color: var(--accent-secondary-light); }
.feature-privacy:hover .feature-icon-bg { background-color: white; color: var(--accent-secondary); }

.feature-cloud { border-bottom: 4px solid var(--color-split); }
.feature-cloud .feature-icon-bg { background-color: var(--color-split-bg); color: var(--color-split); }
.feature-cloud:hover { background-color: var(--color-split-bg); }
.feature-cloud:hover .feature-icon-bg { background-color: white; color: var(--color-split); }

.feature-icon-bg {
    transition: all 0.3s ease;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* Utility classes overrides */
.bg-primary { background-color: var(--bg-primary) !important; }
.bg-surface { background-color: var(--bg-surface) !important; }
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }