/**
 * Heitoezicht Design System
 * Gedeelde CSS custom properties en basiscomponenten
 */

:root {
    /* Colors - Primary */
    --ht-primary: #0066CC;
    --ht-primary-dark: #0052A3;
    --ht-primary-light: #e8f4fc;
    --ht-primary-hover: #0057B3;

    /* Colors - Status */
    --ht-success: #28a745;
    --ht-warning: #ffc107;
    --ht-danger: #dc3545;
    --ht-info: #17a2b8;

    /* Colors - Neutral */
    --ht-white: #ffffff;
    --ht-gray-100: #f8f9fa;
    --ht-gray-200: #e9ecef;
    --ht-gray-300: #dee2e6;
    --ht-gray-400: #ced4da;
    --ht-gray-500: #adb5bd;
    --ht-gray-600: #6c757d;
    --ht-gray-700: #495057;
    --ht-gray-800: #343a40;
    --ht-gray-900: #212529;

    /* Typography */
    --ht-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --ht-font-size-xs: 11px;
    --ht-font-size-sm: 13px;
    --ht-font-size-base: 14px;
    --ht-font-size-md: 16px;
    --ht-font-size-lg: 18px;
    --ht-font-size-xl: 20px;
    --ht-font-size-2xl: 24px;
    --ht-font-size-3xl: 28px;

    /* Spacing */
    --ht-space-xs: 4px;
    --ht-space-sm: 8px;
    --ht-space-md: 16px;
    --ht-space-lg: 24px;
    --ht-space-xl: 32px;
    --ht-space-2xl: 48px;

    /* Border */
    --ht-radius-sm: 6px;
    --ht-radius: 8px;
    --ht-radius-lg: 12px;
    --ht-radius-xl: 16px;

    /* Shadows */
    --ht-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --ht-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --ht-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.1);

    /* Transitions */
    --ht-transition: all 0.2s ease;
}

/* Base reset */
.ht-reset * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Button base */
.ht-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ht-space-sm);
    padding: 10px 20px;
    font-family: var(--ht-font-family);
    font-size: var(--ht-font-size-base);
    font-weight: 500;
    border: none;
    border-radius: var(--ht-radius);
    cursor: pointer;
    transition: var(--ht-transition);
    text-decoration: none;
}

.ht-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

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

.ht-btn-primary:hover:not(:disabled) {
    background: var(--ht-primary-dark);
}

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

.ht-btn-danger:hover:not(:disabled) {
    background: #c82333;
}

.ht-btn-secondary {
    background: var(--ht-white);
    color: var(--ht-gray-700);
    border: 1px solid var(--ht-gray-300);
}

.ht-btn-secondary:hover:not(:disabled) {
    background: var(--ht-gray-100);
    border-color: var(--ht-gray-400);
}

/* Toast notification */
.ht-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ht-toast {
    padding: 12px 20px;
    border-radius: var(--ht-radius);
    color: var(--ht-white);
    font-family: var(--ht-font-family);
    font-size: var(--ht-font-size-base);
    box-shadow: var(--ht-shadow-lg);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ht-toast-success { background: var(--ht-success); }
.ht-toast-error { background: var(--ht-danger); }
.ht-toast-warning { background: var(--ht-warning); color: var(--ht-gray-900); }
.ht-toast-info { background: var(--ht-primary); }

/* Loading spinner */
.ht-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: ht-spin 0.8s linear infinite;
}

@keyframes ht-spin {
    to { transform: rotate(360deg); }
}

/* Loading overlay */
.ht-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.ht-loading-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.ht-loading-overlay .ht-spinner {
    width: 40px;
    height: 40px;
    border-width: 3px;
    color: var(--ht-primary);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ht-btn, .ht-toast { transition: none; }
    .ht-spinner { animation-duration: 1.5s; }
}