/* Shared design tokens ported from the Vue theme (dark theme). */
:root {
    --color-darkester: #0e0f10;
    --color-darkest: #151617;
    --color-darkerer: #1c1d1f;
    --color-darker: #242629;
    --color-darkerthandark: #33353a;
    --color-dark: #393b40;

    --color-dark-tab: #323633;
    --color-darker-tab: #262927;
    --color-dark-tab-hover: #3a3d3a;
    --color-darker-tab-hover: #2e312e;
    --color-dark-tab-border: #111211;

    --color-text: #d1d5db;
    --color-text-muted: #9ca3af;
    --color-text-dim: #6b7280;
    --color-text-faint: #4b5563;
    --color-border: #4b5563;
    --color-border-soft: #374151;

    --color-accent-blue: #276ec8;
    --color-se: #a855f7;
    --color-pe: #eab308;
    --color-te: #c831ff;
    --color-danger: #820808;
    --color-url-link: #6ab6ff;

    --color-error: #ef4444;
    --color-success: #22c55e;
    --color-warn: #fb923c;

    --color-goldenstar: rgb(255, 215, 0);
    --color-duration-0: rgb(69, 159, 246);
    --color-duration-1: rgb(139, 93, 246);
    --color-duration-2: rgb(246, 168, 35);
    --color-duration-3: rgb(115, 128, 140);
    --color-dubcap: rgb(173, 10, 198);
    --color-buggedcap: rgb(198, 10, 10);
    --color-selectedmission: rgb(10, 173, 82);

    --font-stack: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    background-color: var(--color-darker);
    color: var(--color-text);
    font-family: var(--font-stack);
}

#app {
    height: 100%;
}

a.url-link {
    color: var(--color-url-link);
    text-decoration: none;
}

a.url-link:hover {
    text-decoration: underline;
}

/* Shared mission text colors (used across Mission Data components + filter
   options; recur 3+ times so they live here rather than in scoped CSS). */
.text-duration-0 { color: var(--color-duration-0); }
.text-duration-1 { color: var(--color-duration-1); }
.text-duration-2 { color: var(--color-duration-2); }
.text-duration-3 { color: var(--color-duration-3); }
.text-goldenstar { color: var(--color-goldenstar); }
.text-dubcap { color: var(--color-dubcap); }
.text-buggedcap { color: var(--color-buggedcap); }
.text-selectedmission { color: var(--color-selectedmission); }

/* Placeholder tab pages (filled in by later C3.x tasks). */
.tab-page h1 {
    margin: 0 0 var(--space-2);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
}

.tab-page .coming-soon {
    color: var(--color-text-muted);
    font-style: italic;
}