/* ============================================
   DARK & LIGHT MODE THEME STYLES
   ============================================ */

/* ============================================
   DEFAULT (DARK) THEME
   ============================================ */
:root {
  --color-bg: var(--color-neutral-900);
  --color-text: var(--color-neutral-100);
  --color-text-muted: var(--color-neutral-400);
  --color-card-bg: rgba(255, 255, 255, 0.05);
  --color-header-bg: rgba(18, 18, 28, 0.8);
  --color-border: rgba(255, 255, 255, 0.1);
}

/* ============================================
   LIGHT THEME
   ============================================ */
[data-theme="light"] {
  --color-bg: var(--color-neutral-100);
  --color-text: var(--color-neutral-800);
  --color-text-muted: var(--color-neutral-500);
  --color-card-bg: white;
  --color-header-bg: rgba(255, 255, 255, 0.8);
  --color-border: rgba(0, 0, 0, 0.1);

  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.07), 0 10px 10px -5px rgba(0, 0, 0, 0.03);

  .tool-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: var(--shadow-sm);
  }

  .tool-card:hover {
    background: #ffffff;
    border-color: #d1d5db;
    box-shadow: var(--shadow-md);
  }

  .tool-category,
  .tool-pricing {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.08);
    color: var(--color-neutral-400);
  }
}