/* =========================================================
   TERVIXA VAULT
   COLOR SYSTEM
   ========================================================= */

:root {

    /* Text */
    --color-text: #222;
    --color-text-strong: #111;
    --color-text-secondary: #555;
    --color-text-muted: #777;

    /* Backgrounds */
    --color-page: #f4f6f8;
    --color-surface: #ffffff;
    --color-surface-soft: #f7f9fc;

    /* Borders */
    --color-border: #e0e0e0;
    --color-border-soft: #d9e1ea;
    --color-border-input: #c9d2dc;

    /* Primary Action */
    --color-primary: #5b9bd5;
    --color-primary-hover: #4a8ac4;

    /* Secondary Action */
    --color-secondary: #e5e5e5;
    --color-secondary-hover: #d5d5d5;
    --color-secondary-text: #333;

    /* modal */
    --color-overlay: rgba(0, 0, 0, 0.35);
}

/* =========================================================
   Account Actions
   ========================================================= */

.account-action {
    color: var(--color-text-secondary);
    background-color: transparent;
    border-color: transparent;
}

.account-action:hover {
    color: var(--color-text-strong);
    background-color: var(--color-surface-soft);
    border-color: var(--color-border);
}

.account-action:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* =========================================================
   Expenses Actions
   ========================================================= */

.spending-action {
    color: var(--color-text-secondary);
    background-color: transparent;
    border-color: transparent;
}

.spending-action:hover {
    color: var(--color-text-strong);
    background-color: var(--color-surface-soft);
    border-color: var(--color-border);
}

.spending-action:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* =========================================================
   GLOBAL
   ========================================================= */

body {
    color: var(--color-text);
    background-color: var(--color-page);
}

.site-header {
    color: var(--color-text);
    background-color: var(--color-page);
}

.site-logo {
    color: var(--color-text);
}


/* =========================================================
   WELCOME
   ========================================================= */

#welcome-screen p {
    color: var(--color-text-secondary);
}

/* =========================================================
   NAVIGATION LINKS
   ========================================================= */

.nav-link {
    color: var(--color-text-secondary);
}

.nav-link:hover {
    color: var(--color-text-strong);
    background-color: var(--color-surface);
}

.nav-link:focus-visible {
    color: var(--color-text-strong);
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* =========================================================
   SURFACES
   ========================================================= */

.dashboard-section,
.faq-accordion,
.faq-item summary,
.form-group input,
.form-group select,
.account-row,
.income-column,
.spending-column,
.modal-content {
    background-color: var(--color-surface);
}


/* Soft dashboard surfaces */

.faq-item[open] summary,
.faq-item summary:hover,
.faq-answer,
.account-form,
.account-name,
.account-balance,
.income-name,
.spending-name,
.empty-message {
    background-color: var(--color-surface-soft);
}


/* =========================================================
   TEXT
   ========================================================= */

.faq-answer {
    color: var(--color-text-secondary);
}

.faq-item summary {
    color: var(--color-text);
}

.faq-item summary:hover {
    color: var(--color-text-strong);
}


/* Muted text */

.account-label,
.account-income-empty,
.account-expense-empty,
.empty-message,
.account-type,
.faq-item summary::after,
.totals-account,
.totals-empty {
    color: var(--color-text-muted);
}


/* =========================================================
   BORDERS
   ========================================================= */

/*
 * Important:
 * Only set border COLOR here.
 *
 * Width/style belong in main.css.
 */

.faq-accordion,
.account-row,
.income-column,
.spending-column {
    border-color: var(--color-border);
}


.account-form {
    border-color: var(--color-border-soft);
}


.form-group input,
.form-group select,
.income-input input,
.spending-input input,
.modal-content select {
    border-color: var(--color-border-input);
}

/* =========================================================
   MODAL
   ========================================================= */

.modal {
    background-color: var(--color-overlay);
}

.modal-content {
    background-color: var(--color-surface);
    color: var(--color-text);
}

.modal-content select {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border-input);
}

.modal-content select:focus {
    outline: none;
    border-color: var(--color-primary);
}


/* Horizontal separators */

.faq-item,
.account-financials,
.account-name,
.income-name,
.spending-name,
.totals-entry {
    border-bottom-color: var(--color-border);
}


/* Account balance separator */

.account-balance {
    border-top-color: var(--color-border);
}


/* Income / Expense divider */

.account-entry + .account-entry {
    border-left-color: var(--color-border);
}


/* Older/general rows */

.account-row,
.spending-row,
.total-row {
    border-bottom-color: #eeeeee;
}


/* =========================================================
   FORM FOCUS
   ========================================================= */

.form-group input:focus,
.form-group select:focus,
.income-input input:focus,
.spending-input input:focus,
.modal-content select:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* =========================================================
   PRIMARY BUTTONS
   ========================================================= */

.add-button,
.primary-button {
    background-color: var(--color-primary);
    color: #ffffff;
}

.add-button:hover,
.primary-button:hover {
    background-color: var(--color-primary-hover);
}


/* =========================================================
   SECONDARY BUTTONS
   ========================================================= */

.secondary-button {
    background-color: var(--color-secondary);
    color: var(--color-secondary-text);
}

.secondary-button:hover {
    background-color: var(--color-secondary-hover);
}