/* Common Loon - Base Design System */

/* Import Rajdhani Google Font */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@600&display=swap');

/* Design System Variables */
:root {
    /* Colors - Updated with subtle grays */
    --page-bg: #111111;
    --form-bg: #1a1a1aCC;
    --form-border: #666666;
    --input-bg: #0f0f0fE6;
    --input-border: #777777;
    --input-text: #cccccc;
    --placeholder: #77777766;
    --accent: #aaaaaa;
    --btn-bg: #1a1a1aCC;
    --btn-text: #cccccc;

    /* Legacy color names for compatibility */
    --retro-black: var(--page-bg);
    --retro-white: var(--input-text);
    --retro-gray-dark: var(--input-bg);
    --retro-gray: var(--form-border);

    /* Typography */
    --font-retro: "Rajdhani", sans-serif;
    --font-size-welcome: 80px;  /* One size for all messages (max 30 chars) */
    --font-size-large: 24px;
    --font-size-normal: 16px;
    --font-size-small: 12px;

    /* Sprite Animation - Compact size for inside login box */
    --sprite-frame-width: 350px; /* Smaller size to fit inside login container */
    --sprite-frame-height: 350px; /* Smaller size to fit inside login container */
    --sprite-animation-speed: 0.8s; /* ~12 FPS for 7 frames */

}

/* Base Retro Styling */
body {
    font-family: var(--font-retro);
    font-weight: 600;
    background-color: var(--page-bg);
    color: var(--input-text);
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* Navigation */
.nav-bar {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    z-index: 100;
}

.nav-link {
    color: #777777;
    text-decoration: none;
    font-size: 16px;
    text-transform: lowercase;
    letter-spacing: 1px;
    padding: 5px 10px;
    transition: color 0.2s ease;
    background: none;
    border: none;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}

.nav-link:hover {
    color: #aaaaaa;
    text-decoration: underline;
}