:root {
    --soft: #f0f7fa;
}

/* Add hover effects to regular buttons */
.btn:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow);
}

/* Ensure primary button stays visible and prominent on hover */
.btn.primary:hover {
    background: var(--accent-light);
    color: white;
}

/* Ghost buttons get a soft brand tint on hover */
.btn.ghost:hover {
    background: var(--soft);
    color: var(--accent);
}

/* Update badge styling with brand colors */
.badge {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--accent);
}

/* Add accent color to links in navigation */
nav.primary a:hover {
    color: var(--primary);
    text-decoration: none;
}

/* Update header with subtle brand tint */
header.site {
    background: rgba(248, 251, 252, .95);
}

/* Update anchorbar with brand colors */
.anchorbar {
    background: rgba(248, 251, 252, .95);
}

.anchorbar a:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--accent);
}

/* Add brand accent to section eyebrows */
.lp-eyebrow {
    color: var(--primary);
    font-weight: 600;
}

/* Update card hover effects */
.card {
    transition: box-shadow 0.2s ease;
}

.card:hover {
    box-shadow: var(--shadow-hover);
}

/* Progress bar with brand color */
.progress>div {
    background: var(--primary);
}

/* Form focus states with brand color */
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(109, 186, 219, 0.1);
}

/* Table header with brand color */
.table th {
    background: var(--soft);
    color: var(--accent);
}

/* Number badges with brand styling */
.number {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--accent);
    font-weight: 700;
}