:root {
    --font-sans: 'Lato', 'Segoe UI', sans-serif;
    --font-display: 'Fira Sans', sans-serif;
    --font-mono: 'Courier New', monospace;

    --color-page-bg: #e6e2d8;
    --color-text: #333;
    --color-text-strong: #2d241d;
    --color-text-muted: #555;
    --color-text-input: #222;

    --color-header-link: #4a3f35;
    --color-heading: #c7793c;
    --color-subtle: #a5a096;

    --color-input-bg: #dcd8cf;
    --color-neutral-border: #b0aca5;
    --color-neutral-text: #444;
    --color-neutral-bg-start: #f0ece3;
    --color-neutral-bg-end: #d1cdc5;
    --color-neutral-hover-start: #fff;
    --color-neutral-hover-end: #e6e2d8;
    --color-error: #991b1b;
    --color-error-bg: rgba(254, 226, 226, 0.6);
    --color-error-border: rgba(239, 68, 68, 0.2);

    --color-primary: #2f9e57;
    --color-primary-light: #46b868;
    --color-primary-hover: #3aac61;
    --color-primary-hover-dark: #2b8f50;
    --color-primary-dark: #237845;
    --color-primary-border: #1f6c3d;
    --color-primary-disabled: #7ea98d;
    --color-primary-disabled-text: #d2e4d8;

    --color-danger: #c4532c;
    --color-danger-light: #e07a5a;
    --color-danger-dark: #a03f22;
    --color-danger-text: #4a1f14;

    --color-success: #46b868;
    --color-success-text: #1d4b2a;

    --color-gold: #b49c5f;
}

body {
    font-family: var(--font-sans);
    color: var(--color-text);
}

h1,
h2 {
    font-family: var(--font-display);
}

nav a {
    color: var(--color-header-link);
}

nav a:hover,
nav a:focus-visible {
    color: var(--color-text-strong);
}

nav a::after {
    background: var(--color-gold);
}

.app-page header,
.app-page .card,
.login-page body,
.login-page .card {
    background: var(--color-page-bg);
}

.app-page h2 {
    color: var(--color-heading);
}

.app-page th {
    color: var(--color-subtle);
}

.app-page td,
.app-page .pie-chart-label {
    color: var(--color-text);
}

.app-page label,
.app-page .usage-title,
.app-page details > summary {
    color: var(--color-text-muted);
}

.app-page .header-load-stats {
    color: #f2f0eb;
}

.app-page .header-load-stats .load-value,
.app-page .button {
    color: #fff;
}

.app-page .button {
    background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    border-color: var(--color-primary-border);
    font-family: var(--font-sans);
}

.app-page .button:hover {
    background: linear-gradient(180deg, var(--color-primary-hover) 0%, var(--color-primary-hover-dark) 100%);
}

.app-page .button:active {
    background: var(--color-primary-dark);
}

.app-page .button:disabled {
    background: var(--color-primary-disabled);
    color: var(--color-primary-disabled-text);
}

.app-page button.button[style*="background-color: #ef4444"],
.app-page .button.delete-btn {
    background: linear-gradient(180deg, var(--color-danger-light) 0%, var(--color-danger) 100%) !important;
    color: #fff !important;
    border-color: var(--color-danger-dark) !important;
}

.app-page button.button[style*="background-color: #ef4444"]:active,
.app-page .button.delete-btn:active {
    background: var(--color-danger-dark) !important;
}

.app-page .error {
    color: var(--color-danger-text);
}

.app-page .success {
    color: var(--color-success-text);
}

.app-page .status-queued {
    background: #dba94a;
    color: #5a4a1a;
}

.app-page .status-completed {
    background: var(--color-success);
    color: var(--color-success-text);
}

.app-page .status-failed {
    background: var(--color-danger);
    color: var(--color-danger-text);
}

.app-page .mono,
.app-page .log-block,
.app-page .header-load-stats .load-value,
.app-page .pie-chart-label {
    font-family: var(--font-mono);
}

.app-page input[type="text"],
.app-page input[type="password"],
.app-page select {
    background: var(--color-input-bg);
    color: var(--color-text-input);
    font-family: var(--font-sans);
}

.app-page .os-meta {
    color: var(--color-header-link);
}

.app-page .os-meta strong {
    color: var(--color-text-strong);
}

.login-page {
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-page-bg);
}

.login-page h1 {
    color: var(--color-text-input);
}

.login-page label {
    color: var(--color-text-muted);
}

.login-page input {
    background: var(--color-input-bg);
    color: var(--color-text-input);
}

.login-page button {
    color: var(--color-neutral-text);
    border-color: var(--color-neutral-border);
    background: linear-gradient(180deg, var(--color-neutral-bg-start) 0%, var(--color-neutral-bg-end) 100%);
    font-family: var(--font-sans);
}

.login-page button:hover {
    background: linear-gradient(180deg, var(--color-neutral-hover-start) 0%, var(--color-neutral-hover-end) 100%);
    color: var(--color-text-input);
}

.login-page .error {
    color: var(--color-error);
    background: var(--color-error-bg);
    border-color: var(--color-error-border);
}