:root {
    /* Brand red */
    --color-red: #EF4130;
    --color-red-hover: #C14243;
    --color-red-light: #FF5A4B;
    --color-red-rgb: 239, 65, 48;
    --color-red-subtle: rgba(var(--color-red-rgb), 0.12);
    --color-red-subtle-hover: rgba(var(--color-red-rgb), 0.18);
    --color-red-subtle-border: rgba(var(--color-red-rgb), 0.22);
    --color-red-subtle-border-hover: rgba(var(--color-red-rgb), 0.32);
    --color-red-row-hover: rgba(var(--color-red-rgb), 0.1);

    /* Backgrounds */
    --color-bg-page: #f9f8f5;
    --color-bg-surface: #ffffff;
    --color-bg-muted: #f3f4f6;
    --color-bg-subtle: #f5f4f2;
    --color-bg-header: #ffffff;
    --color-bg-input: #f9fafb;

    /* Borders */
    --color-border: #ebebeb;
    --color-border-muted: #e5e7eb;
    --color-border-strong: #d1d5db;
    --color-border-input: #dee2e6;
    --card-border-color: var(--color-border-muted);
    --radius-card: 0.75rem;

    /* Text */
    --color-text: #111827;
    --color-text-strong: #1a1a1a;
    --color-text-body: #374151;
    --color-text-secondary: #4b5563;
    --color-text-muted: #6b7280;
    --color-text-placeholder: #9ca3af;
    --color-text-disabled: #999999;
    --color-text-inverse: #ffffff;
    --color-text-black: #000000;

    /* Semantic */
    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-danger: var(--color-red);
    --color-info: #059669;
    --color-neutral: #6c757d;

    /* Validation */
    --color-valid: #26b050;
    --color-error-bg: #fee;
    --color-error-border: #fcc;
    --color-error-text: #c33;

    /* Gradients */
    --gradient-primary: linear-gradient(to bottom, var(--color-red), var(--color-red-hover));
    --gradient-avatar: linear-gradient(135deg, var(--color-red), var(--color-red-light));
    --gradient-epic: linear-gradient(100deg, rgb(90, 200, 196), rgb(138, 217, 158));

    /* Shadows */
    --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-sm: var(--shadow-card);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --shadow-avatar: 0 4px 12px rgba(0, 0, 0, 0.1);

    /* Scrollbar */
    --color-scrollbar: #d1d5db;
    --color-scrollbar-hover: #9ca3af;

    /* Legacy aliases */
    --primary-color: var(--color-red);
    --dark-color: var(--color-red-hover);
    --secondary-color: var(--color-red);
    --highlight-color: var(--color-red);
    --gradient-primary-legacy: var(--gradient-primary);

    /* Shared component tokens */
    --border-color: var(--color-border);
    --requests-border-color: var(--card-border-color);
    --requests-muted: var(--color-text-muted);
    --newcomers-border-color: var(--color-border);

    /* Layout */
    --font-family: "Baloo 2", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}

.bg-page {
    background-color: var(--color-bg-page) !important;
}

.bg-surface {
    background-color: var(--color-bg-surface) !important;
}

html,
body {
    background-color: var(--color-bg-page);
    min-height: 100%;
}


.app-shell {
    min-height: 100vh;
}

.app-main {
    min-height: 100vh;
    background-color: var(--color-bg-page);
}

.card:not(.border-0),
.surface-card,
.requests-card,
.requests-empty,
.employee-grid-card,
.newcomers-grid-card,
.overview-card {
    border: 1px solid var(--card-border-color) !important;
    border-radius: var(--radius-card) !important;
    background-color: var(--color-bg-surface) !important;
    box-shadow: var(--shadow-card) !important;
    overflow: hidden;
}

.card-header {
    background-color: var(--color-bg-header) !important;
    border-bottom-color: var(--card-border-color) !important;
}

.card-body {
    padding: 1rem 1.25rem;
}

.card-title {
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-strong);
}