:root {
    --fluent-primary: #0078d4;
    --fluent-primary-dark: #106ebe;
    --fluent-primary-light: #deecf9;
    --fluent-success: #107c10;
    --fluent-warning: #ffb900;
    --fluent-error: #d13438;
    --fluent-neutral-dark: #201f1e;
    --fluent-neutral-primary: #323130;
    --fluent-neutral-secondary: #605e5c;
    --fluent-neutral-tertiary: #a19f9d;
    --fluent-neutral-light: #edebe9;
    --fluent-neutral-lighter: #f3f2f1;
    --fluent-white: #ffffff;
    --fluent-shadow-4: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
    --fluent-shadow-8: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
    --fluent-shadow-16: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
    --fluent-shadow-64: 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18);
    --fluent-radius: 4px;
    --fluent-radius-lg: 8px;
}

body {
    font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
    font-size: 14px;
    color: var(--fluent-neutral-primary);
    background-color: var(--fluent-neutral-lighter);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
    font-weight: 600;
    color: var(--fluent-neutral-dark);
}

.btn-primary {
    background-color: var(--fluent-primary);
    border-color: var(--fluent-primary);
    border-radius: var(--fluent-radius);
    font-weight: 600;
    padding: 8px 20px;
    transition: all 0.1s ease;
}

.btn-primary:hover {
    background-color: var(--fluent-primary-dark);
    border-color: var(--fluent-primary-dark);
}

.btn-outline-primary {
    color: var(--fluent-primary);
    border-color: var(--fluent-primary);
    border-radius: var(--fluent-radius);
    font-weight: 600;
}

.btn-outline-primary:hover {
    background-color: var(--fluent-primary);
    border-color: var(--fluent-primary);
}

.form-control,
.form-select {
    border-radius: var(--fluent-radius);
    border-color: var(--fluent-neutral-tertiary);
    padding: 8px 12px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--fluent-primary);
    box-shadow: none;
    border-bottom: 2px solid var(--fluent-primary);
}

.card {
    border: none;
    border-radius: var(--fluent-radius-lg);
    box-shadow: var(--fluent-shadow-4);
    background: var(--fluent-white);
}

.card:hover {
    box-shadow: var(--fluent-shadow-8);
}