app-v2/src/assets/theme.css

/* custom-theme.css — кастомная тема PrimeVue v4 с теплой премиальной палитрой */

:root {
    /* Основные цвета */
    --primary-color: #EFEFF3; /* mainGold */
    --primary-color-text: #ffffff;

    --primary-hover-color: #AA8F59; /* secondGold */
    --primary-active-color: #8B744B; /* ещё темнее вариант для активного */

    --secondary-color: #AA8F59;
    --secondary-color-text: #ffffff;

    /* Поверхности */
    --surface-ground: #FBF9F6; /* system02 */
    --surface-card: #ffffff; /* Белый, на фоне system02 */
    --surface-overlay: #C7BCA8; /* system01 как подложка/оверлей */

    /* Текст */
    --text-color: #393838; /* darkBrown */
    --text-color-secondary: #AA8F59; /* secondGold */
    --text-color-muted: #C7BCA8; /* system01 */

    /* Статусы */
    --success-color: #36AC54;
    --danger-color: #CC2A21;
    --warning-color: #D99721;

    /* Бордюры и тени */
    --border-color: #C7BCA8;
    --shadow-color: rgba(200, 173, 125, 0.3); /* мягкая тень mainGold */

    /* PrimeVue-specific */
    --button-text-color: var(--primary-color-text);
    --button-bg-color: var(--color-green-300);
    --button-hover-bg-color: var(--primary-hover-color);
    --button-active-bg-color: var(--primary-active-color);

    --input-bg-color: var(--surface-ground);
    --input-border-color: var(--secondary-color);
    --input-focus-border-color: var(--primary-color);

    --menu-bg-color: var(--surface-card);
    --menu-item-hover-bg-color: var(--surface-overlay);
    --menu-item-hover-color: var(--primary-color-text);
}

/* Кнопки */
.p-button {
    background-color: var(--button-bg-color) !important;
    color: var(--button-text-color) !important;
    border: none !important;
    box-shadow: 0 2px 6px var(--shadow-color);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    padding: 8px 12px !important;
    min-width: fit-content;
    /*font-weight: 500;*/
}

.p-button:hover {
    background-color: var(--button-hover-bg-color) !important;
    box-shadow: 0 4px 10px var(--shadow-color);
}

.p-button:active {
    background-color: var(--button-active-bg-color) !important;
}

.p-button-secondary {
    background-color: var(--surface-ground) !important;
    color: var(--button-active-bg-color) !important;
    border: 1px solid var(--button-bg-color) !important;
    /*font-size: 1rem !important;*/
    padding: 8px 12px !important;
    min-width: fit-content;
}

.p-button-secondary:hover {
    background-color: var(--button-bg-color) !important;
    box-shadow: 0 4px 10px var(--shadow-color);
    color: var(--primary-color-text) !important;
}
.p-togglebutton {
    background-color: var(--primary-color) !important;
    border: none !important;
}

.p-togglebutton-content {

    color: var(--primary-color) !important;
    padding: 0.5rem 2rem !important;
    /*background-color: var(--input-bg-color) !important;*/
    /*border: 1px solid var(--button-bg-color) !important;*/
    box-shadow: inset 0.3px   rgba(0, 0, 0, 0.5);;
}
.p-togglebutton-checked {
    box-shadow:  1px   rgba(0, 0, 0, 0.5);;
}
.p-selectbutton {
    border: 1px solid var(--button-bg-color) !important;
}

/* InputText */
.p-inputtext, textarea {
    width: 100% !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    /*justify-items: center;*/
    font-weight: bold;
    background-color: var(--primary-color) !important;
    border: none !important;
    box-shadow: none !important;
    /*color: var(--text-color) !important;*/
    /*padding: 0.5rem 0.75rem;*/
    font-size: inherit !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.p-inputnumber-input {

}
.p-inputgroupaddon {
    background-color: var(--input-bg-color) !important;
    border: 1px solid var(--button-bg-color) !important;
    border-right: 0 !important  ;
}
.p-inputtext:focus, textarea:focus {
    border-color: var(--input-focus-border-color) !important;
    outline: none !important;
    box-shadow: 0 0 8px var(--primary-color);
}


/* Select */
.p-select {
    background-color: var(--input-bg-color) !important;
    border: 1px solid var(--button-bg-color) !important;
    color: var(--text-color) !important;
    /*padding: 0.5rem 0.75rem;*/
    border-radius: 0.5rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.p-select:focus {
    border-color: var(--input-focus-border-color) !important;
    outline: none !important;
    box-shadow: 0 0 8px var(--primary-color);
}

.p-select-option-selected {
    background-color: var(--input-bg-color) !important;
}

.p-select-option-label {
    color: #000 !important;
}

.p-panel-header {
    border-radius: 1rem 1rem 1rem 1rem !important;
}

/* Общий фон */
body {
    width: 100% !important;
    background-color: var(--surface-ground);
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
}

/* Checkbox */
.p-checkbox-checked .p-checkbox-box {
    background: var(--button-bg-color) !important;
    /*color: var(--button-text-color) !important;*/
    border-color: var(--button-bg-color) !important;

}

/* Прочее */
.p-card {
    background-color: var(--surface-card) !important;
    box-shadow: 0 2px 8px var(--shadow-color);
    border-radius: 1rem;
}
.p-button-rounded{
    background-color: white !important;
}
.p-button-rounded:hover{
    background-color: lightgray !important;
}

.p-menu .p-menuitem:hover {
    background-color: var(--menu-item-hover-bg-color) !important;
    color: var(--menu-item-hover-color) !important;
}

/* Индикаторы статуса */
.status-success {
    color: var(--success-color);
}

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

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