:root {
    --color-primary: #F26522;
    --color-blue: #0077BB;
    --color-secondary: #33BBEE;
    --color-accent: #009988;
    --color-warning: #F26522;
    --color-error: #CC3311;
    --color-info: #EE3377;
    --color-neutral: #BBBBBB;
}

body {
    font-family: Arial, sans-serif;
}

.pixel-art {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
}

.border-primary { border-color: var(--color-primary); }
.border-blue { border-color: var(--color-blue); }
.border-secondary { border-color: var(--color-secondary); }
.border-accent { border-color: var(--color-accent); }
.border-warning { border-color: var(--color-warning); }

.text-primary { color: var(--color-primary); }
.text-blue { color: var(--color-blue); }
.text-secondary { color: var(--color-secondary); }
.text-accent { color: var(--color-accent); }
.text-warning { color: var(--color-warning); }

.bg-primary { background-color: var(--color-primary); }
.bg-blue { background-color: var(--color-blue); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-accent { background-color: var(--color-accent); }
.bg-warning { background-color: var(--color-warning); }
.bg-error { background-color: var(--color-error); }

.bg-primary-soft { background-color: color-mix(in srgb, var(--color-primary) 6%, white); }
.bg-blue-soft { background-color: color-mix(in srgb, var(--color-blue) 6%, white); }
.bg-secondary-soft { background-color: color-mix(in srgb, var(--color-secondary) 6%, white); }
.bg-accent-soft { background-color: color-mix(in srgb, var(--color-accent) 6%, white); }
.bg-warning-soft { background-color: color-mix(in srgb, var(--color-warning) 6%, white); }

.app-nav { border-bottom: 4px solid; position: relative; z-index: 1000; }
.app-nav-home { border-bottom-color: var(--color-primary); }
.app-nav-maps { border-bottom-color: var(--color-blue); }
.app-nav-lightcurves { border-bottom-color: var(--color-secondary); }
.app-nav-hippo { border-bottom-color: var(--color-accent); }
.app-nav-depth-1 { border-bottom-color: var(--color-warning); }
.tab { 
    padding: 0.75rem 1.5rem; 
    transition: all 0.2s ease;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    border: 2px solid;
    border-bottom: none;
    margin-bottom: 2px;
    position: relative;
    z-index: 10;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);
    background-color: #f9fafb;
}
.tab:hover { 
    background-color: #e5e7eb;
}
.tab-active { 
    color: white;
    border-bottom-color: transparent;
}
.tab-active:hover {
    color: #1f2937;
}
.tab-disabled {
    color: var(--color-neutral);
    cursor: not-allowed;
    opacity: 0.5;
    border-color: var(--color-neutral);
}
.tab-disabled:hover {
    background-color: transparent;
}
.tab-primary { color: var(--color-primary); border-color: var(--color-primary); }
.tab-blue { color: var(--color-blue); border-color: var(--color-blue); }
.tab-secondary { color: var(--color-secondary); border-color: var(--color-secondary); }
.tab-accent { color: var(--color-accent); border-color: var(--color-accent); }
.tab-warning { color: var(--color-warning); border-color: var(--color-warning); }
.tab-active-primary { background-color: var(--color-primary); border-color: var(--color-primary); }
.tab-active-blue { background-color: var(--color-blue); border-color: var(--color-blue); }
.tab-active-secondary { background-color: var(--color-secondary); border-color: var(--color-secondary); }
.tab-active-accent { background-color: var(--color-accent); border-color: var(--color-accent); }
.tab-active-warning { background-color: var(--color-warning); border-color: var(--color-warning); }

.btn { color: white; padding: 0.5rem 1rem; border-radius: 0.375rem; display: inline-block; transition: opacity 0.2s ease; border: 2px solid transparent; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.btn:hover { opacity: 0.9; }
.btn-disabled { color: var(--color-neutral); background-color: #f9fafb; cursor: not-allowed; opacity: 0.5; box-shadow: none; border-color: var(--color-neutral); }
.btn-disabled:hover { opacity: 0.5; }

.btn-outline { background-color: white; padding: 0.5rem 1rem; border-radius: 0.375rem; display: inline-block; transition: opacity 0.2s ease; border: 2px solid; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.btn-outline:hover { opacity: 0.8; }
.btn-outline.bg-primary { color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline.bg-blue { color: var(--color-blue); border-color: var(--color-blue); }
.btn-outline.bg-secondary { color: var(--color-secondary); border-color: var(--color-secondary); }
.btn-outline.bg-accent { color: var(--color-accent); border-color: var(--color-accent); }
.btn-outline.bg-warning { color: var(--color-warning); border-color: var(--color-warning); }
.btn-outline.bg-error { color: var(--color-error); border-color: var(--color-error); }

.card { padding: 1.5rem; border-left-width: 4px; border-radius: 0.5rem; background-color: #f9fafb; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); }
.panel { padding: 1.5rem; border-width: 2px; border-radius: 0.5rem; }