body {
    background-color: lightgrey;
}

:root {
    /* Step 1: Tell the browser to support both modes */
    color-scheme: light dark;

    /* Step 2: Define responsive color variables */
    --primary-color: light-dark(#0d6efd, #0d6efd);
    --primary-hover: light-dark(#0b5ed7, #0a58ca);

    --bg-card: light-dark(#ffffff, #1e1e1e);
    --bg-muted: light-dark(#f8f9fa, #2a2a2a);
    --border-color: light-dark(#dee2e6, #3a3a3a);

    --text-main: light-dark(#212529, #f8f9fa);
    --text-muted: light-dark(#6c757d, #a0a0a0);
    --text-on-primary: #ffffff;

    /* Spacing and Layout (remain constant) */
    --card-padding: 1.25rem;
    --card-radius: 0.37rem;
    --card-shadow: light-dark(0 4px 6px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.3));

}

/* Body Typography */
.card-title {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-main);
}

.card-text {
    margin: 0;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.5;
}

/* Card Footer */
.card-footer {
    padding: var(--card-padding);
    background-color: var(--bg-muted);
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Global Button Style using Variables */
.btn-primary {
    display: inline-block;
    width: max-content;
    padding: 0.5rem 1rem;
    background-color: var(--primary-color);
    color: var(--text-on-primary);
    text-decoration: none;
    border-radius: var(--card-radius);
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
}