:root {
  --color-primary: #ff9633;
  --color-secondary: #4b5563;
  --color-success: #16a34a;
  --color-danger: #dc2626;
  --color-warning: #facc15;
  --color-info: #3b82f6;
  --color-bg: #ffffff;
  --color-text: #111827;
}

.dark {
  --color-primary: #ffb366;
  --color-secondary: #9ca3af;
  --color-success: #22c55e;
  --color-danger: #ef4444;
  --color-warning: #fcd34d;
  --color-info: #60a5fa;
  --color-bg: #111827;
  --color-text: #f9fafb;
}


body {
    font-family: 'Catamaran', sans-serif;
    background: var(--color-secondary);
    color: var(--color-primary);
}

.button-primary {
    background: var(--color-primary);
    color: white;
}

.button-danger {
    background: var(--color-danger);
    color: white;
}

.hero-bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/images/banner/bg-home.webp');
    background-size: cover;
    background-position: center;
}

.hero-about-bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/images/ajl-logistik.webp');
    background-size: cover;
    background-position: center;
}