/* ============ FoxHelper BASE STYLES ============ */

/* CSS Variables */
:root {
  /* Light theme colors */
  --fh-bg: #f8f9fa;
  --fh-elev: #ffffff;
  --fh-line: #dee2e6;
  --fh-text: #212529;
  --fh-muted: #6c757d;
  --fh-card: #e9ecef;
  --fh-border: #fd7e14;

  --fh-accent: #fd7e14;
  --fh-accent-hover: #e55a00;
  --fh-accent-light: #ffb347;
  --fh-danger: #dc3545;
  --fh-success: #28a745;
  --fh-warning: #ffc107;
  --fh-info: #17a2b8;

  --fh-radius: 8px;
  --fh-radius-sm: 4px;
  --fh-shadow: 0 2px 4px rgba(0,0,0,0.1);
  --fh-shadow-hover: 0 4px 8px rgba(0,0,0,0.15);

  /* Theme variables for compatibility */
  --theme-bg: var(--fh-bg);
  --theme-text: var(--fh-text);
  --theme-accent: var(--fh-accent);
  --theme-accent-hover: var(--fh-accent-hover);
  --theme-card: var(--fh-card);
  --theme-border: var(--fh-border);
}

/* Dark theme */
[data-theme="dark"] {
  --fh-bg: #0d1117;
  --fh-elev: #161b22;
  --fh-line: #30363d;
  --fh-text: #f0f6fc;
  --fh-muted: #8b949e;
  --fh-card: #161b22;
  --fh-border: #ff6b35;

  --fh-accent: #ff6b35;
  --fh-accent-hover: #ff8c42;
  --fh-accent-light: #ffb347;
  --fh-danger: #ef4444;
  --fh-success: #34d399;
  --fh-warning: #f59e0b;
  --fh-info: #3b82f6;

  /* Theme variables for compatibility */
  --theme-bg: var(--fh-bg);
  --theme-text: var(--fh-text);
  --theme-accent: var(--fh-accent);
  --theme-accent-hover: var(--fh-accent-hover);
  --theme-card: var(--fh-card);
  --theme-border: var(--fh-border);
}

/* Base styles */
body {
  background: var(--fh-bg);
  color: var(--fh-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
}

/* Reset */
* {
  box-sizing: border-box;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--fh-text);
  font-weight: 600;
  margin: 0 0 1rem;
}

p {
  margin: 0 0 1rem;
}

/* Links */
a {
  color: var(--fh-accent);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--fh-accent-hover);
}

/* Utility classes */
.text-muted {
  color: var(--fh-muted);
}

.text-center {
  text-align: center;
}

.text-end {
  text-align: right;
}

.d-flex {
  display: flex;
}

.justify-content-between {
  justify-content: space-between;
}

.align-items-center {
  align-items: center;
}

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-3 { margin-top: 1rem; }

.p-0 { padding: 0; }
.p-3 { padding: 1rem; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }