/* Base Styles: Variables, Resets, Utilities */

:root {
    /* Core surfaces */
    --surface-bg: #ffffff;
    --surface-1: #ffffff;
    --surface-2: #f1f5f9;
    --surface-3: #e5e7eb;

    /* Text */
    --text-color: #222222;
    --text-muted: #64748b;

    /* Brand / Accent */
    --accent-primary: #2563eb;
    --accent-primary-hover: #1d4ed8;

    /* Semantic accents */
    --accent-success-bg: #ecfdf5;
    --accent-success-text: #065f46;
    --accent-success-border: #a7f3d0;

    --accent-error-bg: #fef2f2;
    --accent-error-text: #991b1b;
    --accent-error-border: #fecaca;

    /* Navbar */
    --navbar-bg: #ffffff;
    --navbar-border: #e2e8f0;
    --navbar-link: var(--accent-primary);
    --navbar-toggle-bar: var(--accent-primary);
    --navbar-mobile-bg: #ffffff;

    /* Tables */
    --table-bg: #ffffff;
    --table-header-bg: #f1f5f9;
    --table-header-text: #222222;
    --table-border: #e5e7eb;
    --table-text: #222222;

    /* Badges */
    --badge-primary-bg: #2563eb;
    --badge-primary-text: #ffffff;

    --badge-success-bg: #22c55e;
    --badge-success-text: #ffffff;

    --badge-error-bg: #ef4444;
    --badge-error-text: #ffffff;

    /* Buttons */
    --btn-primary-bg: var(--accent-primary);
    --btn-primary-text: #ffffff;
    --btn-primary-hover-bg: var(--accent-primary-hover);

    --btn-secondary-bg: #e5e7eb;
    --btn-secondary-text: #222222;
    --btn-secondary-hover-bg: #cbd5e1;

    --btn-danger-bg: #ef4444;
    --btn-danger-text: #ffffff;
    --btn-danger-hover-bg: #b91c1c;

    /* Modals */
    --modal-surface: var(--surface-bg);
    --modal-backdrop: rgba(0, 0, 0, 0.35);

    /* Account page */
    --surface-account: var(--surface-bg);

    /* User info box */
    --surface-info: #f1f5f9;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;

    /* Shadows */
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.18);
}

/* Base body */
body {
    background: var(--surface-bg);
    color: var(--text-color);
}

/* Utility classes */
.text-center {
    text-align: center;
}

.form-control-static {
    color: var(--text-muted);
}

.required-asterisk {
    color: red;
}