/* =============================================
   BASE STYLES
   Core variables, resets, and foundational styles
   ============================================= */

/* --- CSS Custom Properties (Design Tokens) --- */
:root {
    /* Accent (shared across themes) */
    --accent-color: #8B5CF6;
    --accent-color-dark: #7C3AED;

    /* Typography */
    --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-heading: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', Courier, monospace;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    
    /* Animation */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.4s ease;
    --transition-smooth: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;
    
    /* Z-index layers */
    --z-background: -1;
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-modal: 1000;
    --z-hamburger: 1001;
}

/* --- Dark Theme (default) --- */
:root,
[data-theme="dark"] {
    --bg-color: #111827;
    --bg-soft-accent: #1F2937;
    --primary-text-color: #F9FAFB;
    --secondary-text-color: #9CA3AF;
    --card-bg-color: #1F2937;
    --border-color: #374151;
    --navbar-bg: rgba(17, 24, 39, 0.8);
    --modal-overlay-bg: rgba(17, 24, 39, 0.5);
    --card-hover-bg: rgba(55, 65, 81, 0.6);
    --constellation-particle: rgba(139, 92, 246, 0.8);
    --constellation-line: 139, 92, 246;
}

/* --- Light Theme --- */
[data-theme="light"] {
    --bg-color: #F9FAFB;
    --bg-soft-accent: #F3F4F6;
    --primary-text-color: #111827;
    --secondary-text-color: #6B7280;
    --card-bg-color: #FFFFFF;
    --border-color: #E5E7EB;
    --navbar-bg: rgba(249, 250, 251, 0.85);
    --modal-overlay-bg: rgba(249, 250, 251, 0.6);
    --card-hover-bg: rgba(243, 244, 246, 0.8);
    --constellation-particle: rgba(139, 92, 246, 0.5);
    --constellation-line: 139, 92, 246;
}

/* --- Canvas Background --- */
#constellation-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-background);
}

/* --- Base Body Styles --- */
body {
    background-color: var(--bg-color);
    color: var(--primary-text-color);
    font-family: var(--font-main);
    line-height: 1.6;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.modal-open {
    overflow: hidden;
}

/* --- Heading Typography --- */
h1, h2 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.2;
}

h3, h4, h5, h6 {
    font-family: var(--font-main);
    font-weight: 600;
    line-height: 1.3;
}

/* --- Utility Classes --- */
.hidden {
    display: none;
}

/* --- Scroll Reveal --- */
.reveal {
    opacity: 0;
    transform: translateY(20px);
}

.reveal.revealed {
    animation: fade-in-up 0.5s ease forwards;
}

/* --- Animations & Keyframes --- */
@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: var(--primary-text-color); }
}

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scroll-timeline {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-50%)); }
}

/* --- Transitions --- */
main {
    transition: opacity var(--transition-normal);
}

main.is-leaving {
    opacity: 0;
}