/* Global CSS Variables and Font Imports */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display+SC:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

:root {
  /* Color Palette */
  /* Primary Colors */
  --accent-color: #0078d4;
  --accent-hover: #106ebe;
  --primary: #0078d4;

  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-color: #ffffff;
  --card-bg: #ffffff;
  --card-bg-alt: #fafbfc;

  /* Text Colors */
  --text-primary: #333333;
  --text-secondary: #666666;
  --text-color: #333333;

  /* Border Colors */
  --border-color: #e1e4e8;
  --border-light: #f0f0f0;

  /* Interactive States */
  --tab-hover: #f5f5f5;
  --bg-hover: #f5f5f5;
  --bg-disabled: #f8f9fa;
  --text-disabled: #999999;

  /* Category Colors */
  --website-color: #28a745;
  --personal-color: #fd7e14;
  --academic-color: #6f42c1;

  /* Action Colors */
  --warning-color: #ffc107;
  --warning-hover: #e0a800;
  --danger-color: #dc3545;
  --danger-hover: #c82333;

  /* Shadow */
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  
  /* Enhanced hover shadow for light theme */
  --shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.15);

  /* Fonts */
  --font-primary: 'Libre Baskerville', serif;
  --font-display: 'Playfair Display SC', serif;
  --font-system: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-mono: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  --font-icons: 'Material Icons';
}

/* Dark Theme */
[data-theme="dark"] {
  /* Background Colors */
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d3748;
  --bg-color: #1a1a1a;
  --card-bg: #2d3748;
  --card-bg-alt: #242a38;

  /* Text Colors */
  --text-primary: #ffffff;
  --text-secondary: #a0a0a0;
  --text-color: #ffffff;

  /* Border Colors */
  --border-color: #4a5568;
  --border-light: #4a5568;

  /* Interactive States */
  --tab-hover: #4a5568;
  --bg-hover: #3a4755;
  --bg-disabled: #374151;
  --text-disabled: #6b7280;

  /* Shadow */
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  
  /* Enhanced hover shadow for dark theme */
  --shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.4);

  /* Accent colors remain the same for consistency */
  --accent-color: #0078d4;
  --accent-hover: #106ebe;
  --primary: #0078d4;
}

/* Base Font Setup */
body {
  font-family: var(--font-primary);
  color: var(--text-primary);
  background-color: var(--bg-primary);
}

/* Typography Utilities */
.font-primary {
  font-family: var(--font-primary);
}

.font-display {
  font-family: var(--font-display);
}

.font-system {
  font-family: var(--font-system);
}

.font-mono {
  font-family: var(--font-mono);
}

/* Material Icons Setup */
.material-icons {
  font-family: var(--font-icons);
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}