/* site.css */
/* IMPORTANT: Import the theme variables file containing all colors */
@import url('theme-variables.css');

/* Normalize and base styles */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.7;
    min-height: 100vh;
    background: var(--background);
    color: var(--text);
    transition: background 0.3s, color 0.3s; /* Fine for theme switching */
    overflow-y: scroll;
}

/* Layout */
.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 2rem 1.2rem;
}

.navbar {
    top: 0;
    z-index: 1000;
    position: sticky;
    box-shadow: var(--card-shadow);
    background: var(--background);
}

/* Links */
a {
    color: var(--link);
    text-decoration: none;
    /* transition: color var(--transition); <--- REMOVED for instantaneous change on hover */
    outline: none;
}

    a:hover,
    a:focus-visible {
        color: var(--link-hover);
        text-decoration: underline;
    }

/* Buttons */
.btn-primary {
    background: var(--link);
    color: #fff;
    border: none;
    padding: 0.55rem 1.25rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 500;
    transition: background var(--transition); /* Kept: Simple background transition is generally non-distracting */
    outline: none;
}

    .btn-primary:hover,
    .btn-primary:focus-visible {
        background: var(--link-hover);
    }

/* Forms and inputs (optional, modern touch) */
input,
select,
textarea {
    background: var(--input-bg);
    color: var(--text);
    border: 1px solid var(--text);
    border-radius: var(--border-radius);
    padding: 0.5rem 1rem;
    transition: border-color var(--transition); /* Kept: Simple border transition is generally non-distracting */
}

    input:focus,
    select:focus,
    textarea:focus {
        outline: var(--focus-outline);
        border-color: var(--link);
    }

/* Remove outline on click but preserve for keyboard nav */
:focus:not(:focus-visible) {
    outline: none;
}
