/* QA Course Platform - Dark Theme Foundation */
/* REFINED: Minor improvements for perfect consistency */

/* ============================================ */
/* CSS VARIABLES - REFINED TYPE SCALE */
/* ============================================ */
:root {
    /* Dark Theme Base Colors */
    --color-bg-primary: #1f1f1f;
    --color-bg-secondary: #2a2a2a;
    --color-bg-tertiary: #3a3a3a;

    /* Text Colors (Light on Dark) */
    --color-text-primary: #f8f8f2;
    --color-text-secondary: #e6e6e1;
    --color-text-muted: #bfbfb3;
    --color-text-subtle: #8a8a8a;

    /* Sophisticated Muted Accents (Main UI) */
    --color-accent-purple: #8a7ca8;
    --color-accent-purple-light: #a094c7;
    --color-accent-purple-dark: #6d648a;
    --color-accent-blue: #7a8fa8;

    /* Bright Details (Micro-accents Only) */
    --color-bright-purple: #bd93f9;
    --color-bright-cyan: #8be9fd;
    --color-bright-green: #50fa7b;
    --color-bright-pink: #ff79c6;
    --color-bright-orange: #ffb86c;
    --color-bright-yellow: #f1fa8c;

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-signature: 'Caveat', cursive;

    /* Type Scale - REFINED HIERARCHY */
    --text-xs: 0.75rem;   /* 12px - Primary content text */
    --text-sm: 0.875rem;  /* 14px - Secondary elements */
    --text-base: 1rem;    /* 16px - Buttons, card titles */
    --text-lg: 1.125rem;  /* 18px - Pricing titles */
    --text-xl: 1.25rem;   /* 20px - Section headers, nav title */
    --text-2xl: 1.5rem;   /* 24px - Mobile heroes */
    --text-3xl: 1.875rem; /* 30px - About/dashboard heroes */
    --text-4xl: 2.25rem;  /* 36px - Landing hero only */

    /* Spacing */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */

    /* Container Sizes */
    --container-tight: 768px;
    --container-standard: 1024px;
    --container-wide: 1280px;
}

/* ============================================ */
/* BASE STYLES - UNIVERSAL RESET */
/* ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    color: var(--color-text-secondary);
    background: var(--color-bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================ */
/* CONTAINER SYSTEM - IDENTICAL ACROSS PAGES */
/* ============================================ */
.container {
    max-width: var(--container-standard);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.container-tight {
    max-width: var(--container-tight);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

/* ============================================ */
/* NAVIGATION - REFINED CONSISTENCY */
/* ============================================ */
.nav {
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-bg-tertiary);
    padding: var(--space-4) 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-title {
    font-weight: 700;
    font-size: var(--text-xl);          /* CONSISTENT: 20px - matches section headers */
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
}

.nav-signature {
    font-family: var(--font-signature);
    color: var(--color-accent-purple);
    font-weight: 600;
    font-style: italic;
}

.nav-links {
    display: flex;
    gap: var(--space-6);
}

.nav-links a {
    text-decoration: none;
    color: var(--color-text-muted);
    font-size: var(--text-sm);          /* CONSISTENT: 14px */
    font-weight: 500;
    transition: color 0.2s ease;
}

.nav-links a:hover {
    color: var(--color-accent-purple);
}

.nav-links span {
    color: var(--color-text-muted);
    font-size: var(--text-sm);          /* CONSISTENT: 14px */
    font-weight: 500;
    white-space: nowrap;                 /* IMPROVED: prevent username wrapping */
    overflow: hidden;                    /* IMPROVED: handle long usernames */
    text-overflow: ellipsis;             /* IMPROVED: show ... for long names */
    max-width: 120px;                    /* IMPROVED: limit username width */
}

/* ============================================ */
/* LOGOUT FORM - REFINED NAVIGATION INTEGRATION */
/* ============================================ */
.logout-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.logout-btn {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: var(--text-sm);          /* CONSISTENT: 14px */
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease;
    font-family: inherit;
    padding: 0;
    margin: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.logout-btn:hover {
    color: var(--color-accent-purple);
}

/* ============================================ */
/* MICRO-ACCENTS - CONSISTENT BRAND ELEMENTS */
/* ============================================ */
.micro-accent {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-left: var(--space-2);
}

.micro-accent-purple { background: var(--color-bright-purple); }
.micro-accent-cyan { background: var(--color-bright-cyan); }
.micro-accent-green { background: var(--color-bright-green); }
.micro-accent-pink { background: var(--color-bright-pink); }
.micro-accent-orange { background: var(--color-bright-orange); }
.micro-accent-yellow { background: var(--color-bright-yellow); }

/* ============================================ */
/* BUTTON SYSTEM - REFINED CORE STYLES */
/* ============================================ */
.btn {
    display: inline-block;
    padding: var(--space-3) var(--space-6);
    font-weight: 600;
    font-size: var(--text-base);        /* CONSISTENT: 16px */
    text-decoration: none;
    border-radius: 8px;
    border: 2px solid;
    transition: all 0.2s ease;
    cursor: pointer;
    margin: var(--space-1);              /* REFINED: smaller default margin */
}

.btn-primary {
    background: var(--color-accent-purple);
    color: var(--color-text-primary);
    border-color: var(--color-accent-purple);
}

.btn-primary:hover {
    background: var(--color-accent-purple-dark);
    border-color: var(--color-accent-purple-dark);
    transform: translateY(-1px);
    color: var(--color-text-primary);
}

.btn-secondary {
    background: transparent;
    color: var(--color-accent-blue);
    border-color: var(--color-accent-blue);
}

.btn-secondary:hover {
    background: var(--color-accent-blue);
    color: var(--color-text-primary);
}

/* ============================================ */
/* MOBILE NAVIGATION - LOGICAL BEHAVIOR */
/* ============================================ */
@media (max-width: 768px) {
    .nav-links {
        display: flex;
        gap: var(--space-3);
    }

    /* Hide ALL navigation links by default on mobile */
    .nav-links a {
        display: none;
    }

    /* ALWAYS show essential auth links */
    .nav-links a[href*="login"],
    .nav-links a[href*="dashboard"] {
        display: inline-flex;
        font-size: var(--text-sm);
    }

    /* Show links back to homepage (from other pages like /about) */
    .nav-links a[href="/"],
    .nav-links a[href=""] {
        display: inline-flex;
        font-size: var(--text-sm);
    }

    /* HIDE anchor links within the same page (like #course-topics, #pricing) */
    /* These are not needed since user can scroll on the same page */
    .nav-links a[href^="#"] {
        display: none !important;
    }

    /* Keep logout form visible for authenticated users */
    .logout-form {
        display: inline-flex;
    }

    .logout-btn {
        font-size: var(--text-sm);
    }

    .nav-title {
        font-size: var(--text-lg);
    }

    .nav-signature {
        font-size: var(--text-base);
    }

    .btn {
        display: block;
        text-align: center;
        margin: var(--space-2) 0;
        font-size: var(--text-sm);
    }

    .container, .container-tight {
        padding: 0 var(--space-3);
    }
}

/* ============================================ */
/* ADDITIONAL MOBILE IMPROVEMENTS */
/* ============================================ */
@media (max-width: 480px) {
    .nav {
        padding: var(--space-3) 0;      /* TIGHTER: reduce nav height on small screens */
    }

    .nav-title {
        font-size: var(--text-base);    /* FURTHER REFINED: 16px on very small screens */
    }

    .nav-signature {
        font-size: var(--text-sm);      /* FURTHER REFINED: 14px on very small screens */
    }

    .container, .container-tight {
        padding: 0 var(--space-2);      /* VERY TIGHT: 8px on very small screens */
    }
}

/* ============================================ */
/* FORM ELEMENTS - BASE CONSISTENCY */
/* ============================================ */
input, textarea, select {
    font-family: var(--font-primary);   /* CONSISTENT: same font as body */
    font-size: var(--text-base);        /* CONSISTENT: 16px prevents zoom on iOS */
}

/* ============================================ */
/* ACCESSIBILITY IMPROVEMENTS */
/* ============================================ */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus states for better accessibility */
.btn:focus,
.nav-links a:focus,
.logout-btn:focus {
    outline: 2px solid var(--color-accent-purple);
    outline-offset: 2px;
}

/* ============================================ */
/* PRINT STYLES - BONUS REFINEMENT */
/* ============================================ */
@media print {
    .nav,
    .btn,
    .micro-accent {
        display: none;                   /* CLEAN: hide interactive elements when printing */
    }

    body {
        background: white;
        color: black;
    }
}