/* =====================================================
   Refined theme stylesheet (v2)
   - Introduces CSS variables for color, spacing, and radii
   - Improves a11y (focus states, skip link, reduced motion)
   - Unifies light/dark mode via variable overrides
   - Keeps your existing class names, so markup changes are minimal
   ===================================================== */

/* -------- Design Tokens (Light) -------- */
:root {
    /* Colors */
    --bg: #FFFFFF;
    --text: #121212;
    --text-muted: #424242;
    --text-strong: #0D0D0D;

    --primary: #0D47A1;      /* Deep blue */
    --primary-100: #B3E5FC;  /* Light blue */
    --primary-200: #81D4FA;
    --primary-900: #0D47A1;

    --accent: #388E3C;       /* Emerald green */
    --accent-600: #2E7D32;
    --accent-100: #A5D6A7;

    --surface: #FFFFFF;
    --surface-muted: #FAFAFA;
    --surface-alt: #E8F5E9;  /* soft green */
    --icon-bg: #E0F2F1;

    --card-border: #81D4FA;
    --field-bg: #E3F2FD;

    --focus-ring: rgba(13, 71, 161, 0.25); /* primary w/ alpha */

    /* Radii & shadow */
    --radius: 12px;
    --radius-lg: 16px;
    --shadow-1: 0 2px 6px rgba(0,0,0,0.12);
    --shadow-2: 0 6px 16px rgba(0,0,0,0.12);

    /* Durations / easing */
    --t-fast: 0.2s ease;
    --t-slow: 0.3s ease;
}

/* -------- Base -------- */
*,
*::before,
*::after { box-sizing: border-box; }

html:focus-within { scroll-behavior: smooth; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    html:focus-within { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    font-family: 'Arial', sans-serif;
    color: var(--text);
    background-color: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background-color var(--t-slow), color var(--t-slow);
}

/* Skip link for keyboard users */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    padding: 0.75rem 1rem;
    background: var(--primary);
    color: #fff;
    border-radius: 8px;
    z-index: 1000;
}
.skip-link:focus { left: 0.75rem; top: 0.75rem; }

/* a11y focus */
:focus-visible { outline: 3px solid var(--primary-200); outline-offset: 2px; }

/* -------- SVG icons -------- */
.svg-stroke {
    stroke: var(--primary-900);
    fill: none;
    stroke-width: 2.5;
}

/* Icon background */
.icon-bg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--icon-bg);
    margin-bottom: 1rem;
    box-shadow: var(--shadow-1);
    transition: background-color var(--t-slow), box-shadow var(--t-slow);
}

/* -------- Navbar -------- */
.navbar {
    background-color: var(--primary-900) !important;
    transition: background-color var(--t-slow);
}
.navbar-brand, .nav-link {
    color: #FFFFFF !important;
    font-weight: 500;
    transition: color var(--t-slow);
}
.navbar-brand:hover, .nav-link:hover { color: var(--primary-200) !important; }

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.theme-toggle {
    color: #FFFFFF !important;
    font-size: 1.25rem;
    padding: 0.5rem;
    cursor: pointer;
    transition: color var(--t-slow);
}
.theme-toggle:hover { color: var(--primary-200) !important; }

/* -------- Hero -------- */
#home {
    background: linear-gradient(135deg, var(--primary-100), var(--surface-alt));
    border-radius: var(--radius-lg);
    padding: 4rem 2rem;
    text-align: center;
    transition: background var(--t-slow);
}
.display-4 {
    color: var(--primary-900);
    font-weight: 700;
    letter-spacing: -0.5px;
    transition: color var(--t-slow);
}
.lead {
    color: var(--accent);
    font-size: 1.25rem;
    max-width: 700px;
    margin: 0 auto;
    transition: color var(--t-slow);
}

/* -------- About -------- */
#about {
    background-color: var(--surface-muted);
    padding: 3rem 1.5rem;
    text-align: center;
}
#about h2 { color: var(--primary-900); margin-bottom: 1rem; }
#about p  { color: var(--text-muted); max-width: 750px; margin: 0 auto; }

/* -------- Possibilities -------- */
#possibilities {
    background-color: var(--surface-alt) !important;
    padding: 3rem 1.5rem;
}
#possibilities h2 { color: var(--primary-900); margin-bottom: 1rem; }
#possibilities p  { color: var(--text-muted); max-width: 800px; margin: 0 auto 2rem; }

.card {
    border: 1px solid var(--card-border);
    background-color: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-2);
}
.card-title { color: var(--accent); font-weight: 600; }
.card-text  { color: #333333; }

/* -------- Contact -------- */
#contact {
    background-color: var(--surface-muted);
    padding: 3rem 1.5rem;
    text-align: center;
}
#contact h2 { color: var(--primary-900); margin-bottom: 1rem; }
#contact p  { color: var(--text-muted); margin-bottom: 2rem; }

.form-control {
    border-color: var(--card-border);
    background-color: var(--field-bg);
    color: var(--text);
    border-radius: 8px;
    transition: all var(--t-slow);
}
.form-control:focus {
    border-color: var(--primary-900);
    box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

/* -------- Buttons -------- */
.btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
    border-radius: 8px;
    font-weight: 600;
    padding: 0.6rem 1.2rem;
    transition: transform var(--t-fast), background-color var(--t-fast), border-color var(--t-fast);
}
.btn-primary:hover {
    background-color: var(--accent-600);
    border-color: var(--accent-600);
    transform: translateY(-2px);
}
.btn-primary:focus-visible {
    outline: 3px solid var(--primary-200);
    outline-offset: 2px;
}

/* -------- Footer -------- */
footer {
    background-color: var(--primary-900) !important;
    padding: 1.5rem 1rem;
    text-align: center;
}
footer p {
    color: #FFFFFF;
    margin: 0;
    font-size: 0.9rem;
}

/* -------- Responsive -------- */
@media (max-width: 768px) {
    #home { padding: 2rem 1.5rem; }
    .navbar-nav { background-color: var(--primary-900); padding: 1rem; }
}

/* -------- Dark Mode (variable overrides) -------- */
body.dark-mode {
    --bg: #121212;
    --text: #E0E0E0;
    --text-muted: #BDBDBD;

    --primary: #B3E5FC;
    --primary-100: #1E88E5;
    --primary-200: #B3E5FC;
    --primary-900: #1A237E;

    --accent: #A5D6A7;     /* Lighter green for dark backgrounds */
    --accent-600: #81C784;

    --surface: #1E1E1E;
    --surface-muted: #1E1E1E;
    --surface-alt: #263238;
    --icon-bg: #263238;

    --card-border: #B3E5FC;
    --field-bg: #263238;

    --focus-ring: rgba(30, 136, 229, 0.25);
}

/* Specific dark-mode tweaks that rely on current variables */
body.dark-mode #home {
    background: linear-gradient(135deg, var(--primary-100), var(--accent-600));
}
body.dark-mode .card-title { color: var(--accent); }
body.dark-mode .card-text  { color: var(--text); }

/* Maintain your original explicit dark-mode selectors for compatibility */
body.dark-mode .svg-stroke { stroke: var(--primary-200); }
body.dark-mode .navbar { background-color: var(--primary-900) !important; }
body.dark-mode .navbar-brand,
body.dark-mode .nav-link,
body.dark-mode .theme-toggle { color: var(--text) !important; }
body.dark-mode .navbar-brand:hover,
body.dark-mode .nav-link:hover,
body.dark-mode .theme-toggle:hover { color: var(--primary-200) !important; }
body.dark-mode #about h2,
body.dark-mode #possibilities h2,
body.dark-mode #contact h2 { color: var(--primary-200); }
body.dark-mode #possibilities { background-color: var(--surface-alt) !important; }
body.dark-mode .form-control:focus {
    border-color: var(--primary-100);
    box-shadow: 0 0 0 0.2rem var(--focus-ring);
}
body.dark-mode footer { background-color: var(--primary-900) !important; }
body.dark-mode footer p { color: var(--text); }

/* High Contrast Mode (Windows) - optional */
@media (forced-colors: active) {
    :focus-visible { outline-color: CanvasText; }
    .btn-primary { border: 1px solid ButtonText; }
}