/* ============================================
   TOOLRACCOON COLOR PALETTES
   Uncomment ONE palette at a time
   ============================================ */

/* ============================================
   PALETTE 1: TRUSTWORTHY UTILITY (DEFAULT)
   Classic & Safe - Industry Standard
   ============================================ */
:root {
 /* Primary Colors */
 --color-primary: #0066FF;
 --color-primary-light: #3385FF;
 --color-primary-dark: #0052CC;
 /* Secondary/Background */
 --color-secondary: #F0F5FF;
 --color-secondary-dark: #E0EBFF;
 /* Accent/CTA */
 --color-accent: #00C853;
 --color-accent-hover: #00A843;
 --color-accent-light: #E8F5E9;
 /* Neutrals */
 --color-text-primary: #2D3436;
 --color-text-secondary: #636E72;
 --color-text-tertiary: #95A5A6;
 /* Surfaces */
 --color-surface: #FFFFFF;
 --color-background: #F8FAFB;
 --color-border: #DFE6E9;
 /* Status Colors */
 --color-success: #00C853;
 --color-error: #FF3B30;
 --color-warning: #FF9500;
 --color-info: #0066FF;
 /* Shadows */
 --shadow-sm: 0 2px 4px rgba(0, 102, 255, 0.08);
 --shadow-md: 0 4px 12px rgba(0, 102, 255, 0.12);
 --shadow-lg: 0 12px 24px rgba(0, 102, 255, 0.16);
}

/* ============================================
   PALETTE 2: MODERN PRODUCTIVITY
   Sleek & High Contrast
   ============================================ */
/*
:root {
  --color-primary: #264653;
  --color-primary-light: #3D5A6B;
  --color-primary-dark: #1A3340;
  
  --color-secondary: #F4F4F9;
  --color-secondary-dark: #E5E5EF;
  
  --color-accent: #2A9D8F;
  --color-accent-hover: #238276;
  --color-accent-light: #D4F1ED;
  
  --color-text-primary: #264653;
  --color-text-secondary: #4A6572;
  --color-text-tertiary: #6B7F8C;
  
  --color-surface: #FFFFFF;
  --color-background: #F4F4F9;
  --color-border: #D6D6E0;
  
  --color-success: #2A9D8F;
  --color-error: #E76F51;
  --color-warning: #E9C46A;
  --color-info: #2A9D8F;
  
  --shadow-sm: 0 2px 4px rgba(38, 70, 83, 0.08);
  --shadow-md: 0 4px 12px rgba(38, 70, 83, 0.12);
  --shadow-lg: 0 12px 24px rgba(38, 70, 83, 0.16);
}
*/

/* ============================================
   PALETTE 3: CLEAN MINIMALIST
   Swiss Style with Electric Pop
   ============================================ */
/*
:root {
  --color-primary: #4D4DFF;
  --color-primary-light: #7070FF;
  --color-primary-dark: #3333CC;
  
  --color-secondary: #FAFAFA;
  --color-secondary-dark: #F0F0F0;
  
  --color-accent: #4D4DFF;
  --color-accent-hover: #3333CC;
  --color-accent-light: #E8E8FF;
  
  --color-text-primary: #111111;
  --color-text-secondary: #767676;
  --color-text-tertiary: #AAAAAA;
  
  --color-surface: #FFFFFF;
  --color-background: #FFFFFF;
  --color-border: #E5E5E5;
  
  --color-success: #4D4DFF;
  --color-error: #FF4757;
  --color-warning: #FFA502;
  --color-info: #4D4DFF;
  
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.12);
}
*/

/* ============================================
   PALETTE 4: CREATIVE TECH
   Friendly & Approachable
   ============================================ */
/*
:root {
  --color-primary: #6C5CE7;
  --color-primary-light: #8B7FF0;
  --color-primary-dark: #5444C7;
  
  --color-secondary: #F9F8FF;
  --color-secondary-dark: #EBE9FF;
  
  --color-accent: #00B894;
  --color-accent-hover: #00A180;
  --color-accent-light: #D5F5EE;
  
  --color-text-primary: #2D3436;
  --color-text-secondary: #636E72;
  --color-text-tertiary: #95A5A6;
  
  --color-surface: #FFFFFF;
  --color-background: #F9F8FF;
  --color-border: #DFE6E9;
  
  --color-success: #00B894;
  --color-error: #FD79A8;
  --color-warning: #FDCB6E;
  --color-info: #6C5CE7;
  
  --shadow-sm: 0 2px 4px rgba(108, 92, 231, 0.08);
  --shadow-md: 0 4px 12px rgba(108, 92, 231, 0.12);
  --shadow-lg: 0 12px 24px rgba(108, 92, 231, 0.16);
}
*/

/* ============================================
   PALETTE 5: DARK MODE
   Developer/Power User Focus
   ============================================ */
/*
:root {
  --color-primary: #BB86FC;
  --color-primary-light: #D0A8FF;
  --color-primary-dark: #9965E0;
  
  --color-secondary: #1E1E1E;
  --color-secondary-dark: #2A2A2A;
  
  --color-accent: #03DAC6;
  --color-accent-hover: #02C4B3;
  --color-accent-light: #18342F;
  
  --color-text-primary: #F2F2F2;
  --color-text-secondary: #B0B0B0;
  --color-text-tertiary: #707070;
  
  --color-surface: #1E1E1E;
  --color-background: #121212;
  --color-border: #2A2A2A;
  
  --color-success: #03DAC6;
  --color-error: #CF6679;
  --color-warning: #FFB74D;
  --color-info: #BB86FC;
  
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.5);
}
*/

/* ============================================
   BASE STYLES USING CSS VARIABLES
   These apply regardless of palette
   ============================================ */

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 background: var(--color-background);
 color: var(--color-text-primary);
 min-height: 100vh;
}

/* Container */
.container {
 max-width: 1200px;
 margin: 0 auto;
 padding: 40px 20px;
}

/* Navbar - 60% Neutral */
.navbar {
 background: var(--color-surface);
 border-bottom: 1px solid var(--color-border);
 padding: 16px 24px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 box-shadow: var(--shadow-sm);
}

 .navbar a {
  color: var(--color-primary);
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: bold;
 }

/* Language Switcher - 10% Primary */
.language-switcher {
 display: flex;
 gap: 12px;
}

 .language-switcher a {
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  transition: all 0.2s;
 }

  .language-switcher a:hover {
   background: var(--color-secondary);
   color: var(--color-primary);
  }

  .language-switcher a.active {
   background: var(--color-primary);
   color: white;
  }

/* Typography */
h1 {
 color: var(--color-text-primary);
 text-align: center;
 font-size: 2.5rem;
 margin-bottom: 16px;
}

.subtitle, .description {
 color: var(--color-text-secondary);
 text-align: center;
 font-size: 1.1rem;
 margin-bottom: 40px;
}

.category-title {
 color: var(--color-text-primary);
 font-size: 1.6rem;
 margin: 40px 0 20px 0;
 padding-bottom: 10px;
 border-bottom: 2px solid var(--color-border);
}

/* Tools Grid - 60% Neutral */
.tools-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 20px;
}

/* Tool Cards - 30% Secondary */
.tool-card {
 background: var(--color-surface);
 border: 1px solid var(--color-border);
 border-radius: 12px;
 padding: 24px;
 text-decoration: none;
 color: inherit;
 transition: all 0.2s;
 box-shadow: var(--shadow-sm);
}

 .tool-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
 }

 .tool-card h3 {
  color: var(--color-text-primary);
  margin-bottom: 8px;
  font-size: 1.2rem;
 }

 .tool-card p {
  color: var(--color-text-secondary);
  line-height: 1.5;
  font-size: 0.95rem;
 }

/* Buttons - 10% Accent/Primary */
.btn-primary,
.btn-success,
.btn-secondary {
 padding: 14px 32px;
 font-size: 16px;
 border: none;
 border-radius: 8px;
 cursor: pointer;
 font-weight: 600;
 transition: all 0.2s;
 font-family: inherit;
}

.btn-primary {
 background: var(--color-surface);
 color: var(--color-primary);
 border: 2px solid var(--color-primary);
}

 .btn-primary:hover {
  background: var(--color-primary);
  color: white;
 }

.btn-success {
 background: var(--color-accent);
 color: white;
 width: 100%;
 margin-top: 20px;
 box-shadow: var(--shadow-sm);
}

 .btn-success:hover:not(:disabled) {
  background: var(--color-accent-hover);
  box-shadow: var(--shadow-md);
 }

 .btn-success:disabled {
  opacity: 0.6;
  cursor: not-allowed;
 }

.btn-secondary {
 padding: 8px 16px;
 font-size: 14px;
 border: 2px solid var(--color-primary);
 background: transparent;
 color: var(--color-primary);
}

 .btn-secondary:hover {
  background: var(--color-primary);
  color: white;
 }

/* Upload Zone - 30% Secondary */
.upload-zone {
 border: 3px dashed var(--color-border);
 border-radius: 12px;
 padding: 60px 20px;
 text-align: center;
 background: var(--color-secondary);
 transition: all 0.3s;
}

 .upload-zone.drag-over {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
 }

.upload-icon {
 font-size: 3.5rem;
 margin-bottom: 20px;
}

.upload-zone p {
 color: var(--color-text-secondary);
 margin: 12px 0;
}

.file-hint {
 font-size: 0.9rem;
 color: var(--color-text-tertiary);
}

/* Tool Options */
.tool-options {
 background: var(--color-surface);
 border: 1px solid var(--color-border);
 padding: 20px;
 border-radius: 8px;
 margin: 20px 0;
}

 .tool-options label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--color-text-primary);
 }

 .tool-options select,
 .tool-options input[type="number"],
 .tool-options input[type="text"],
 .tool-options input[type="range"] {
  width: 100%;
  padding: 10px;
  border: 2px solid var(--color-border);
  border-radius: 6px;
  font-size: 14px;
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-family: inherit;
 }

 .tool-options input[type="color"] {
  padding: 4px;
  border: 2px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
 }

/* File List */
.file-list {
 background: var(--color-surface);
 border: 1px solid var(--color-border);
 padding: 20px;
 border-radius: 12px;
 margin: 20px 0;
}

 .file-list h3 {
  margin-bottom: 12px;
  color: var(--color-text-primary);
 }

.file-item {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 12px;
 border-bottom: 1px solid var(--color-border);
 color: var(--color-text-primary);
}

 .file-item:last-child {
  border-bottom: none;
 }

 .file-item button {
  background: var(--color-error);
  color: white;
  border: none;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.2s;
 }

  .file-item button:hover {
   opacity: 0.8;
  }

/* Result Messages */
.result {
 margin-top: 20px;
 padding: 16px;
 border-radius: 8px;
 text-align: center;
 font-weight: 600;
}

.success {
 background: var(--color-success);
 color: white;
}

.error {
 background: var(--color-error);
 color: white;
}

/* Image Preview */
#imagePreview {
 background: var(--color-secondary);
 padding: 20px;
 border-radius: 12px;
 border: 1px solid var(--color-border);
}

#cropInfo {
 font-size: 14px;
 font-weight: 600;
 color: var(--color-text-primary);
}

/* SEO Content Sections */
.tool-content {
 max-width: 800px;
 margin: 60px auto 0;
 color: var(--color-text-primary);
 line-height: 1.8;
}

 .tool-content p.intro {
  font-size: 1.1rem;
  margin-bottom: 40px;
  color: var(--color-text-secondary);
 }

 .tool-content section {
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 30px;
 }

 .tool-content h2 {
  color: var(--color-text-primary);
  font-size: 1.8rem;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 10px;
 }

 .tool-content h3 {
  color: var(--color-text-primary);
  font-size: 1.3rem;
  margin-bottom: 10px;
 }

/* How To Section */
.how-to ol {
 counter-reset: step-counter;
 list-style: none;
 padding-left: 0;
}

.how-to li {
 counter-increment: step-counter;
 padding-left: 50px;
 position: relative;
 margin-bottom: 20px;
}

 .how-to li::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: 0;
  background: var(--color-primary);
  color: white;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.1rem;
 }

/* Features */
.features .feature {
 margin-bottom: 25px;
}

 .features .feature:last-child {
  margin-bottom: 0;
 }

/* FAQ */
.faq .faq-item {
 margin-bottom: 25px;
}

 .faq .faq-item:last-child {
  margin-bottom: 0;
 }

.faq h3 {
 color: var(--color-primary);
}

/* Use Cases */
.use-cases ul {
 list-style: none;
 padding-left: 0;
}

.use-cases li {
 padding-left: 30px;
 position: relative;
 margin-bottom: 12px;
}

 .use-cases li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: bold;
  font-size: 1.2rem;
 }

/* Related Tools */
.related-tools-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 gap: 15px;
 margin-top: 20px;
}

.related-tool {
 background: var(--color-secondary);
 border: 1px solid var(--color-border);
 border-radius: 8px;
 padding: 20px;
 text-decoration: none;
 color: var(--color-text-primary);
 transition: all 0.2s;
}

 .related-tool:hover {
  background: var(--color-surface);
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
 }

 .related-tool h3 {
  font-size: 1rem;
  margin-bottom: 8px;
 }

 .related-tool p {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  margin: 0;
 }

/* Responsive */
@media (max-width: 768px) {
 h1 {
  font-size: 2rem;
 }

 .tool-content {
  padding: 0 20px;
 }

  .tool-content section {
   padding: 20px;
  }

 .how-to li {
  padding-left: 45px;
 }

 .related-tools-grid {
  grid-template-columns: 1fr;
 }
}