body {
    background-color: var(--ivory-white);
    color: var(--steel-gray);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--deep-blue);
}

a {
    color: var(--deep-blue);
    text-decoration: none;
}

a:hover {
    color: var(--emerald-green);
}

.button, button, input[type="submit"] {
    background-color: var(--emerald-green);
    color: var(--ivory-white);
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button:hover, button:hover, input[type="submit"]:hover {
    background-color: var(--sky-navy);
}

.ai-agent-item {
    background-color: var(--ivory-white);
    border: 1px solid var(--soft-silver);
}

.ai-agent-summary {
    color: var(--steel-gray);
}

/* Success/Error indicators */
.success {
    color: var(--emerald-green);
}

.error {
    color: var(--ruby-red);
}

/* Form inputs */
input[type="text"], input[type="email"], input[type="password"], textarea {
    border: 1px solid var(--soft-silver);
    background-color: var(--ivory-white);
    color: var(--steel-gray);
    padding: 8px;
    border-radius: 4px;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus {
    border-color: var(--emerald-green);
    outline: none;
}

/* Tags */
.tag {
    background-color: var(--soft-silver);
    color: var(--deep-blue);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.9em;
}

.tag:hover {
    background-color: var(--sky-navy);
    color: var(--ivory-white);
}