:root {
    --px-navy: #14233f;
    --px-red: #e43b3f;
    --px-yellow: #fbbd23;

    --px-black: #18181b;
    --px-gray-900: #27272a;
    --px-gray-700: #3f3f46;
    --px-gray-500: #71717a;
    --px-gray-300: #d4d4d8;
    --px-gray-200: #e4e4e7;
    --px-gray-100: #f4f4f5;
    --px-white: #ffffff;

    --px-success: #18864b;
    --px-danger: #b91c1c;
    --px-warning: #a16207;

    --px-radius-sm: 8px;
    --px-radius-md: 12px;
    --px-radius-lg: 18px;

    --px-shadow-card: 0 18px 50px rgba(20, 35, 63, 0.08);
    --px-focus: 0 0 0 4px rgba(20, 35, 63, 0.12);
}

.pixeel-logo {
    display: block;
    max-width: 190px;
    height: auto;
}

.pixeel-symbol {
    display: block;
    width: 34px;
    height: 34px;
    object-fit: contain;
}

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

.btn-primary:hover {
    background: #1d3156;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--px-navy);
    box-shadow: var(--px-focus);
}

.brand-accent {
    color: var(--px-navy);
}

.status-success {
    color: var(--px-success);
}

.status-error {
    color: var(--px-danger);
}

.status-warning {
    color: var(--px-warning);
}