/**
 * HytLabs Design System CSS
 * Basé sur hytale-hosting-redesign
 * Applique le design system moderne au thème WordPress
 */

:root {
  /* Couleurs HytLabs - Design System */
  --hytlabs-bg: oklch(0.12 0.005 260);
  --hytlabs-bg-card: oklch(0.15 0.005 260);
  --hytlabs-bg-secondary: oklch(0.18 0.005 260);
  --hytlabs-border: oklch(0.22 0.01 260);
  --hytlabs-text: oklch(0.93 0 0);
  --hytlabs-text-muted: oklch(0.55 0 0);
  --hytlabs-primary: oklch(0.70 0.12 210);
  --hytlabs-primary-hover: oklch(0.65 0.12 210);
  --hytlabs-accent: oklch(0.65 0.10 175);
  --hytlabs-success: oklch(0.70 0.15 150);
  --hytlabs-warning: oklch(0.75 0.15 85);
  --hytlabs-error: oklch(0.55 0.18 25);
  
  --hytlabs-radius: 0.5rem;
  --hytlabs-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
  --hytlabs-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
}

/* Base */
body {
  background: var(--hytlabs-bg);
  color: var(--hytlabs-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* Cards */
.hytlabs-card,
.card {
  background: var(--hytlabs-bg-card);
  border: 1px solid var(--hytlabs-border);
  border-radius: var(--hytlabs-radius);
  padding: 1.5rem;
  box-shadow: var(--hytlabs-shadow);
  transition: all 0.2s ease;
}

.hytlabs-card:hover,
.card:hover {
  box-shadow: var(--hytlabs-shadow-lg);
  border-color: var(--hytlabs-primary);
}

/* Buttons */
.hytlabs-button,
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: var(--hytlabs-primary);
  color: var(--hytlabs-bg);
  border: none;
  border-radius: calc(var(--hytlabs-radius) - 2px);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.hytlabs-button:hover,
.btn-primary:hover {
  background: var(--hytlabs-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--hytlabs-shadow);
}

.btn-secondary {
  background: var(--hytlabs-bg-secondary);
  color: var(--hytlabs-text);
  border: 1px solid var(--hytlabs-border);
}

.btn-secondary:hover {
  background: var(--hytlabs-bg-card);
  border-color: var(--hytlabs-primary);
}

/* Inputs */
.hytlabs-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: 0.625rem 0.875rem;
  background: var(--hytlabs-bg-secondary);
  border: 1px solid var(--hytlabs-border);
  border-radius: calc(var(--hytlabs-radius) - 2px);
  color: var(--hytlabs-text);
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.hytlabs-input:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--hytlabs-primary);
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.1);
}

/* Badges */
.hytlabs-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
}

.hytlabs-badge-success {
  background: rgba(34, 197, 94, 0.15);
  color: var(--hytlabs-success);
}

.hytlabs-badge-warning {
  background: rgba(245, 158, 11, 0.15);
  color: var(--hytlabs-warning);
}

.hytlabs-badge-error {
  background: rgba(239, 68, 68, 0.15);
  color: var(--hytlabs-error);
}

.hytlabs-badge-primary {
  background: rgba(74, 158, 255, 0.15);
  color: var(--hytlabs-primary);
}

/* Grid */
.hytlabs-grid {
  display: grid;
  gap: 1.5rem;
}

.hytlabs-grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.hytlabs-grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Responsive */
@media (max-width: 782px) {
  .hytlabs-grid-2,
  .hytlabs-grid-3 {
    grid-template-columns: 1fr;
  }
}