/**
 * KohakuHub Admin Portal - Color System
 * Consistent colors for light and dark modes
 */

:root {
  /* === Background Colors (Light Mode) === */
  --bg-base: #f5f5f5;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --bg-hover: #f8f9fa;
  --bg-active: #e9ecef;

  /* === Text Colors (Light Mode) === */
  --text-primary: #1a1a1a;
  --text-secondary: #6c757d;
  --text-tertiary: #adb5bd;
  --text-inverse: #ffffff;

  /* === Border Colors (Light Mode) === */
  --border-default: #dee2e6;
  --border-light: #e9ecef;
  --border-strong: #ced4da;

  /* === Entity Type Colors === */
  --color-user: #3b82f6;
  --color-repo: #10b981;
  --color-commit: #f59e0b;
  --color-org: #8b5cf6;
  --color-lfs: #ef4444;

  /* === Status Colors === */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* === Interactive States === */
  --hover-opacity: 0.8;
  --active-opacity: 0.9;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

html.dark {
  /* === Background Colors (Dark Mode) === */
  --bg-base: #0a0a0a;
  --bg-elevated: #1a1a1a;
  --bg-card: #1f1f1f;
  --bg-hover: #2a2a2a;
  --bg-active: #333333;

  /* === Text Colors (Dark Mode) === */
  --text-primary: #f5f5f5;
  --text-secondary: #a1a1aa;
  --text-tertiary: #71717a;
  --text-inverse: #1a1a1a;

  /* === Border Colors (Dark Mode) === */
  --border-default: #374151;
  --border-light: #2a2a2a;
  --border-strong: #4b5563;

  /* === Entity Type Colors (Slightly adjusted for dark mode) === */
  --color-user: #60a5fa;
  --color-repo: #34d399;
  --color-commit: #fbbf24;
  --color-org: #a78bfa;
  --color-lfs: #f87171;

  /* === Status Colors (Slightly adjusted for dark mode) === */
  --color-success: #4ade80;
  --color-warning: #fbbf24;
  --color-error: #f87171;
  --color-info: #60a5fa;

  /* === Interactive States === */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

/* === Utility Classes === */
.bg-base {
  background-color: var(--bg-base);
}

.bg-elevated {
  background-color: var(--bg-elevated);
}

.bg-card {
  background-color: var(--bg-card);
}

.text-primary {
  color: var(--text-primary);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-tertiary {
  color: var(--text-tertiary);
}

.border-default {
  border-color: var(--border-default);
}
