:root {
    --ip-brand-900: #5f1717;
    --ip-brand-800: #7a1f1f;
    --ip-brand-700: #982525;
    --ip-accent-700: #b95309;
    --ip-accent-600: #d96c12;
    /* Lightened accent for text on dark brand backgrounds (e.g. sidebar) — passes WCAG AA 4.5:1 on --ip-brand-900 */
    --ip-accent-on-dark: #e2904d;
    --ip-canvas: #f8fafc;
    --ip-surface: #ffffff;
    --ip-text: #0f172a;
    --ip-muted: #475569;
    --ip-border: #e2e8f0;
    --ip-info: #2563eb;
    --ip-success: #15803d;
    --ip-warning: #b45309;
    --ip-danger: #b91c1c;
    --ip-focus: #2563eb;
    --ip-radius-sm: 0.5rem;
    --ip-radius-md: 0.75rem;
    --ip-radius-lg: 1rem;
    --ip-shadow-card: 0 1px 3px rgb(15 23 42 / 0.08), 0 1px 2px rgb(15 23 42 / 0.04);
}

html {
    background: var(--ip-canvas);
}

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

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ip-focus) 45%, transparent);
    outline-offset: 2px;
}

.ip-card {
    background: var(--ip-surface);
    border: 1px solid var(--ip-border);
    border-radius: var(--ip-radius-lg);
    box-shadow: var(--ip-shadow-card);
}

.ip-page-title {
    color: var(--ip-text);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.ip-section-title {
    color: var(--ip-text);
    font-size: 1rem;
    font-weight: 700;
}

.ip-btn {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: var(--ip-radius-sm);
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 700;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.ip-btn-primary {
    color: #fff;
    background: var(--ip-brand-800);
}

.ip-btn-primary:hover {
    background: var(--ip-brand-900);
}

.ip-btn-secondary {
    color: var(--ip-text);
    background: var(--ip-surface);
    border: 1px solid var(--ip-border);
}

.ip-btn-secondary:hover {
    background: #f1f5f9;
}

.ip-btn-danger {
    color: #fff;
    background: var(--ip-danger);
}

.ip-btn-danger:hover {
    background: #991b1b;
}

.ip-btn-success {
    color: #fff;
    background: var(--ip-success);
}

.ip-btn-success:hover {
    background: #166534;
}

.ip-btn-warning {
    color: #fff;
    background: var(--ip-warning);
}

.ip-btn-warning:hover {
    background: #92400e;
}

.ip-btn-info {
    color: #fff;
    background: var(--ip-info);
}

.ip-btn-info:hover {
    background: #1d4ed8;
}

.ip-btn:disabled,
.ip-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.ip-stat {
    min-width: 0;
    border-radius: var(--ip-radius-md);
    padding: 0.5rem 1rem;
    text-align: center;
    border: 1px solid var(--ip-border);
    background: var(--ip-surface);
}

.ip-stat-value {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.5rem;
}

.ip-stat-label {
    font-size: 0.75rem;
    font-weight: 600;
}

@media (min-width: 640px) {
    .ip-stat-value {
        font-size: 1.5rem;
    }
}

.ip-stat-brand { border-color: color-mix(in srgb, var(--ip-brand-800) 30%, var(--ip-border)); background: color-mix(in srgb, var(--ip-brand-800) 6%, var(--ip-surface)); }
.ip-stat-brand .ip-stat-value { color: var(--ip-brand-800); }
.ip-stat-brand .ip-stat-label { color: var(--ip-brand-700); }

.ip-stat-info { border-color: color-mix(in srgb, var(--ip-info) 30%, var(--ip-border)); background: color-mix(in srgb, var(--ip-info) 6%, var(--ip-surface)); }
.ip-stat-info .ip-stat-value { color: var(--ip-info); }
.ip-stat-info .ip-stat-label { color: var(--ip-info); }

.ip-stat-accent { border-color: color-mix(in srgb, var(--ip-accent-600) 35%, var(--ip-border)); background: color-mix(in srgb, var(--ip-accent-600) 8%, var(--ip-surface)); }
.ip-stat-accent .ip-stat-value { color: var(--ip-accent-700); }
.ip-stat-accent .ip-stat-label { color: var(--ip-accent-700); }

.ip-stat-warning { border-color: #fde68a; background: #fffbeb; }
.ip-stat-warning .ip-stat-value { color: #92400e; }
.ip-stat-warning .ip-stat-label { color: #92400e; }

.ip-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 999px;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25rem;
}

.ip-status-success { color: #166534; background: #dcfce7; }
.ip-status-warning { color: #92400e; background: #fef3c7; }
.ip-status-danger { color: #991b1b; background: #fee2e2; }
.ip-status-info { color: #1d4ed8; background: #dbeafe; }

@media (max-width: 639px) {
    .ip-page-title {
        font-size: 1.25rem;
    }
}