/* ===========================================
   BASE STYLES - Shared across all pages
   =========================================== */

/* Font declarations */
@font-face {
    font-family: 'Oxygen Mono';
    src: url('../fonts/OxygenMono-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: optional;
}

@font-face {
    font-family: 'Oxygen';
    src: url('../fonts/Oxygen-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: optional;
}

@font-face {
    font-family: 'Oxygen';
    src: url('../fonts/Oxygen-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: optional;
}

/* CSS Custom Properties - Design tokens */
:root {
    /* Color tokens */
    --black: #0D0D0D;
    --dkblue: #1a1f35;
    --plum: #2d3561;
    --hotmag: #00d9ff;
    --magenta: #8599dd;
    --aqua: #00d9ff;
    --white: #f7f8fa;

    /* Typography tokens */
    --font-size: 1.3rem;
    --mono: "Oxygen mono", monospace;
    --sans: "Oxygen", sans-serif;

    /* Star system tokens */
    --star-color-bright: rgba(255, 255, 255, 0.75);
    --star-color-medium: rgba(255, 255, 255, 0.7);
    --star-color-dim: rgba(255, 255, 255, 0.5);
    --star-color-faint: rgba(255, 255, 255, 0.3);

    /* Z-index scale - Centraliserad z-index management */
    --z-stars: 0;
    --z-content: 1;
    --z-project-overlay: 10;
    --z-header: 1000;
    --z-nav-menu: 1000;
    --z-hamburger: 1001;
    --z-skip-link: 9999;
}

/* Global resets */
html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    padding: 0;
    margin: 0;
    font-family: var(--mono);
    font-weight: 400;
    font-style: normal;
    background-color: var(--black);
    color: var(--white);
    font-size: var(--font-size);
}

html, body {
    max-width: 100%;
    overflow-x: clip;
}

h1, h2, h3 {
    margin: 0;
}

a {
    color: var(--magenta);
}

a:hover {
    color: var(--hotmag);
    text-decoration: none;
}

/* Accessibility - Skip to content link (WCAG 2.1) */
.skip-to-content {
    position: fixed;
    top: -100px;
    left: 0;
    background: var(--aqua);
    color: var(--black);
    padding: 0.75rem 1rem;
    text-decoration: none;
    font-weight: bold;
    z-index: var(--z-skip-link);
    border-radius: 0 0 5px 0;
    transition: top 0.3s ease;
}

.skip-to-content:focus {
    top: 0;
    outline: 2px solid var(--white);
    outline-offset: 2px;
}

/* Accessibility - Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Responsive breakpoints */
/* Small mobile: max-width: 480px */
/* Mobile: max-width: 600px */
/* Tablet: 600px - 849px */
/* Desktop: min-width: 850px */