:root {
    --color-bg-main:        #0A1628;
    --color-bg-section:     #0D1F3C;
    --color-bg-card:        #152B4E;
    --color-bg-card-hover:  #1A3560;
    --color-bg-nav:         #060E1A;

    --color-border:         #1E3A60;
    --color-border-accent:  #2A5080;

    --color-accent-cyan:    #50E6FF;
    --color-accent-purple:  #9B6DFF;
    --color-accent-blue:    #4FA3E0;

    --color-text-primary:   #E8F4FD;
    --color-text-secondary: #A0C4E8;
    --color-text-muted:     #6B9ABF;
    --color-text-date:      #4A7A9B;

    --color-focus:          #50E6FF;
    --color-gradient-hero:  linear-gradient(135deg, #060E1A 0%, #0A1628 50%, #0D1F3C 100%);
    --color-gradient-accent: linear-gradient(90deg, #0078D4, #512BD4);
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    max-width: 100%;
}

html {
    scroll-behavior: smooth;
    /* Offset anchor scroll targets so they aren't hidden under the sticky nav */
    scroll-padding-top: 4rem;
}

body {
    font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg-main);
    min-width: 320px;
    /* overflow-x: clip (not hidden) preserves position: sticky on descendants */
    overflow-x: clip;
}

/* Typography */
h1,h2,h3,h4 {
    line-height: 1.2;
    margin-bottom: 0.5em;
    color: var(--color-text-primary);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }

p {
    margin-bottom: 0.75em;
}
a {
    color: var(--color-accent-cyan);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* Accessibility: Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Container */
.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Color utilities */
.text-primary { color: var(--color-accent-cyan); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }

/* Inline icon — small SVG/img used inline with text */
.inline-icon {
    vertical-align: middle;
    margin-right: 0.3em;
}