:root {
    /* Brand Palette */
    --tri-red: #c41e3a;
    --tri-blue: #003870;
    --tri-silver: #a8adb3;
    /* Light Theme (Default) */
    --color-bg: #f0f0f0;
    --color-text: #212529; /* Standard dark grey/black */
    --color-primary: var(--tri-blue);
    --color-border: #d6d5d5;
    --nav-bg: #e5e5e5;
    --nav-link: var(--tri-blue);
    --section-alt-bg: #e9e9e9; /* Light grey for "Meet the Team" */
}

[data-theme="dark"] {
    /* Dark Theme */
    --color-bg: #0d1117;
    --color-text: #f0f6fc;
    --color-primary: #3399ff;
    --color-border: #30363d;
    --nav-bg: #161b22;
    --nav-link: #f0f6fc;
    --section-alt-bg: #161b22;
}

/* Base Styles - FORCING variables */
html, body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--color-bg) !important;
    color: var(--color-text) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
    scroll-behavior: smooth;
}

/* Ensure all headings and paragraphs use the variable */
h1, h2, h3, h4, h5, p, span, div {
    color: inherit; /* Forces them to take the color from the parent/body */
}

/* Updated Nav Links to use variables */
.nav-link {
    color: var(--nav-link) !important;
}

    .nav-link:hover {
        color: var(--tri-red) !important;
    }



/* Apply this to any element that serves as a scroll target */
section[id], div[id] {
    scroll-margin-top: 90px; /* Adjust this value to match your header height + some breathing room */
    scroll-behavior: smooth; /* Optional: makes the jump a smooth glide */
}

/* Inside AboutSection.razor.css */
#about {
    scroll-margin-top: 100px;
}

div:focus,
h1:focus {
    outline: none !important;
}