/* Light mode variables */
:root {
    /* Flatly colors */
    --bs-info: #3498db;
    --bs-warning: #f39c12;
    --bs-danger: #e74c3c;

    --bs-info-text-emphasis: #153d58;
    --bs-warning-text-emphasis: #613e07;
    --bs-danger-text-emphasis: #5c1e18;

    --bs-info-bg-subtle: #d6eaf8;
    --bs-warning-bg-subtle: #fdebd0;
    --bs-danger-bg-subtle: #fadbd8;

    --bs-info-border-subtle: #aed6f1;
    --bs-warning-border-subtle: #fad7a0;
    --bs-danger-border-subtle: #f5b7b1;

    /* Block 1 */
    --block1-border: var(--bs-info);
    --block1-link: var(--bs-info);
    --block1-link-hover: var(--bs-warning);
    --block1-btn-bg: var(--bs-info);
    --block1-btn-border: black;
    --block1-btn-text: white;
    --block1-btn-hover-bg: var(--bs-info-text-emphasis);
    --block1-btn-hover-border: var(--bs-info);
    --block1-btn-hover-text: white;
    --block1-code-bg: var(--bs-info-bg-subtle);

    /* Block 2 */
    --block2-border: var(--bs-warning);
    --block2-link: var(--bs-warning);
    --block2-link-hover: var(--bs-danger);
    --block2-btn-bg: var(--bs-warning);
    --block2-btn-border: black;
    --block2-btn-text: white;
    --block2-btn-hover-bg: var(--bs-warning-text-emphasis);
    --block2-btn-hover-border: var(--bs-warning);
    --block2-btn-hover-text: white;
    --block2-code-bg: var(--bs-warning-bg-subtle);

    /* Block 3 */
    --block3-border: var(--bs-danger);
    --block3-link: var(--bs-danger);
    --block3-link-hover: var(--bs-info);
    --block3-btn-bg: var(--bs-danger);
    --block3-btn-border: black;
    --block3-btn-text: white;
    --block3-btn-hover-bg: var(--bs-danger-text-emphasis);
    --block3-btn-hover-border: var(--bs-danger);
    --block3-btn-hover-text: white;
    --block3-code-bg: var(--bs-danger-bg-subtle);
}

/* Dark mode overrides */
.quarto-dark {
    /* Darkly colors */
    --bs-info-text-emphasis: #85c1e9;
    --bs-warning-text-emphasis: #f8c471;
    --bs-danger-text-emphasis: #f1948a;

    --bs-info-bg-subtle: #0a1e2c;
    --bs-warning-bg-subtle: #311f04;
    --bs-danger-bg-subtle: #2e0f0c;

    --bs-info-border-subtle: #1f5b83;
    --bs-warning-border-subtle: #925e0b;
    --bs-danger-border-subtle: #8b2e24;

    /* Block 1 */
    --block1-border: var(--bs-info);
    --block1-link: var(--bs-info-text-emphasis);
    --block1-link-hover: var(--bs-warning);
    --block1-btn-border: white;
    --block1-btn-bg: var(--bs-info);
    --block1-btn-text: white;
    --block1-btn-hover-bg: var(--bs-info-text-emphasis);
    --block1-btn-hover-text: black;
    --block1-code-bg: var(--bs-info-bg-subtle);

    /* Block 2 */
    --block2-border: var(--bs-warning);
    --block2-link: var(--bs-warning-text-emphasis);
    --block2-link-hover: var(--bs-danger);
    --block2-btn-border: white;
    --block2-btn-bg: var(--bs-warning);
    --block2-btn-text: white;
    --block2-btn-hover-bg: var(--bs-warning-text-emphasis);
    --block2-btn-hover-text: black;
    --block2-code-bg: var(--bs-warning-bg-subtle);

    /* Block 3 */
    --block3-border: var(--bs-danger);
    --block3-link: var(--bs-danger-text-emphasis);
    --block3-link-hover: var(--bs-info);
    --block3-btn-border: white;
    --block3-btn-bg: var(--bs-danger);
    --block3-btn-text: white;
    --block3-btn-hover-bg: var(--bs-danger-text-emphasis);
    --block3-btn-hover-text: black;
    --block3-code-bg: var(--bs-danger-bg-subtle);
}

.block-1 {
    border: 2px dashed var(--block1-border);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.block-1 a {
    color: var(--block1-link) !important;
    text-decoration-color: var(--block1-link) !important;
    text-decoration: underline;
}
.block-1 a:hover {
    color: var(--block1-link-hover) !important;
    text-decoration: none;
}
.block-1 code {
    background-color: var(--block1-code-bg);
}
.block-1 .btn {
    background-color: var(--block1-btn-bg);
    border: 2px dashed var(--block1-btn-border);
    color: var(--block1-btn-text) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.block-1 .btn:hover {
    color: var(--block1-btn-hover-text) !important;
    background-color: var(--block1-btn-hover-bg);
}

.block-2 {
    border: 2px dashed var(--block2-border);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.block-2 a {
    color: var(--block2-link) !important;
    text-decoration-color: var(--block2-link) !important;
    transition: color 0.2s ease;
}
.block-2 a:hover {
    color: var(--block2-link-hover) !important;
    text-decoration: none;
}
.block-2 code {
    background-color: var(--block2-code-bg);
}
.block-2 .btn {
    background-color: var(--block2-btn-bg);
    border: 2px dashed var(--block2-btn-border);
    color: var(--block2-btn-text) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.block-2 .btn:hover {
    color: var(--block2-btn-hover-text) !important;
    background-color: var(--block2-btn-hover-bg);
}

.block-3 {
    border: 2px dashed var(--block3-border);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.block-3 a {
    color: var(--block3-link) !important;
    text-decoration-color: var(--block3-link) !important;;
    transition: color 0.2s ease;
}
.block-3 a:hover {
    color: var(--block3-link-hover) !important;
    text-decoration: none;
}
.block-3 code {
    background-color: var(--block3-code-bg);
}
.block-3 .btn {
    background-color: var(--block3-btn-bg);
    border: 2px dashed var(--block3-btn-border);
    color: var(--block3-btn-text) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.block-3 .btn:hover {
    color: var(--block3-btn-hover-text) !important;
    background-color: var(--block3-btn-hover-bg);
}

/* Smooth transitions for all interactive elements */
a, button, .btn {
    transition: all 0.2s ease;
}

/* Optional: Add a subtle box-shadow on hover for depth */
.block-1 .btn:hover,
.block-2 .btn:hover,
.block-3 .btn:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}