/* =========================================
CSS Variables for Theming
=========================================
- These variables control the color scheme for both light and dark modes.
- They are applied to the :root (light mode default) and .dark selectors.
- Using variables makes it easy to update the entire site's theme from one place.
*/

:root {
    --color-bg: #f8fafc; /* Light gray background */
    --color-text-primary: #1e293b; /* Dark blue for main text */
    --color-text-secondary: #475569; /* Medium gray for secondary text */
    --color-surface: #ffffff; /* White for card backgrounds */
    --color-border: #e2e8f0; /* Light gray for borders */
    --color-card-hover: -2px; /* Vertical lift for cards on hover */
}

.dark {
    --color-bg: #0f172a; /* Very dark blue background */
    --color-text-primary: #f1f5f9; /* Off-white for main text */
    --color-text-secondary: #94a3b8; /* Lighter gray for secondary text */
    --color-surface: #1e293b; /* Darker blue for card backgrounds */
    --color-border: #334155; /* Dark gray for borders */
    --color-card-hover: 0px; /* No lift effect in dark mode */
}

/* =========================================
Global Styles
=========================================
- Sets the base font and applies theme colors.
- Enables smooth transitions for color changes.
*/

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    transition: background-color 0.3s, color 0.3s;
}

/* =========================================
Component Styles
=========================================
- These classes use the CSS variables to style components consistently.
- This ensures that all components automatically adapt to the current theme (light/dark).
*/

.card {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    transition: background-color 0.3s, border-color 0.3s, transform 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(var(--color-card-hover));
}

.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.border-color { border-color: var(--color-border); }

.comment-card {
    transition: transform 0.2s ease-in-out, background-color 0.3s;
}
.comment-card:hover {
    transform: translateY(-2px);
}

/* =========================================
Utilities
=========================================
- Ensures smooth scrolling when navigating via anchor links (e.g., from the header).
*/

html {
    scroll-behavior: smooth;
}