/* MythikSpace Studios — "Synty chassis / Meridian HUD" theme (Option B)
   Orange frames + cyan trim on deep navy. Shared token source of truth:
   docs/14-visual-identity.md (also for MythikSpace's Meridian Exchange). */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Inter:wght@400;500;600&family=Share+Tech+Mono&display=swap');

:root {
    /* Core tokens — keep in sync with docs/14-visual-identity.md */
    --ms-bg: #0b1424;
    --ms-bg-panel: #121c30;
    --ms-accent: #f4a424;          /* primary: frames, CTAs, brand emphasis */
    --ms-accent-hover: #ffb84a;
    --ms-accent-dim: #b87712;
    --ms-cyan: #54b8d1;            /* secondary: trim, links, HUD labels */
    --ms-cyan-hover: #7ad0e4;
    --ms-border: #f4a424;          /* framed chassis edges */
    --ms-border-subtle: #2a3a55;   /* inner/hairline dividers */
    --ms-text: #ffffff;
    --ms-text-secondary: #9aa8bd;
    --ms-danger: #e74c3c;          /* rare: badges / alerts only */

    --bs-body-bg: var(--ms-bg);
    --bs-body-color: var(--ms-text);
    --bs-body-font-family: 'Inter', system-ui, sans-serif;
    --bs-link-color: var(--ms-cyan);
    --bs-link-hover-color: var(--ms-cyan-hover);
}

body {
    background:
        radial-gradient(ellipse at top center, rgba(84, 184, 209, 0.08), transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(244, 164, 36, 0.06), transparent 45%),
        linear-gradient(180deg, #0e1a30 0%, var(--ms-bg) 40%, #080f1c 100%);
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand {
    font-family: 'Chakra Petch', 'Inter', sans-serif;
    letter-spacing: 0.02em;
}

.text-accent { color: var(--ms-accent) !important; }
.text-cyan { color: var(--ms-cyan) !important; }
.border-accent { border-color: var(--ms-border) !important; }
.bg-body-tertiary { background-color: var(--ms-bg-panel) !important; }
.text-secondary { color: var(--ms-text-secondary) !important; }
.link-secondary { color: var(--ms-text-secondary) !important; text-decoration: none; }
.link-secondary:hover { color: var(--ms-cyan) !important; }

.navbar-brand span.text-accent { color: var(--ms-accent) !important; }

.navbar.border-bottom {
    border-bottom-width: 2px !important;
}

.navbar .nav-link {
    font-family: 'Share Tech Mono', monospace;
    color: var(--ms-text-secondary);
    letter-spacing: 0.06em;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--ms-accent);
}

.callsign {
    font-family: 'Share Tech Mono', monospace;
    letter-spacing: 0.08em;
    color: var(--ms-cyan);
    font-size: 0.85rem;
    text-transform: uppercase;
}

.btn-accent {
    background-color: var(--ms-accent);
    border-color: var(--ms-accent);
    color: #0b1424;
    font-weight: 600;
}
.btn-accent:hover,
.btn-accent:focus {
    background-color: var(--ms-accent-hover);
    border-color: var(--ms-accent-hover);
    color: #0b1424;
}

.btn-outline-accent {
    color: var(--ms-cyan);
    border-color: var(--ms-cyan);
}
.btn-outline-accent:hover,
.btn-outline-accent:focus {
    background-color: var(--ms-cyan);
    border-color: var(--ms-cyan);
    color: #0b1424;
}

/* Synty-style chassis panels: thicker orange frame */
.card,
.ms-frame {
    background-color: var(--ms-bg-panel);
    border: 3px solid var(--ms-border);
    border-radius: 0.15rem;
    box-shadow:
        inset 0 0 0 1px rgba(84, 184, 209, 0.15),
        0 0 0 1px rgba(0, 0, 0, 0.35);
}

.hero {
    padding: 5rem 0 4rem;
    border-bottom: 2px solid var(--ms-border);
    background:
        linear-gradient(180deg, rgba(244, 164, 36, 0.07), transparent 55%),
        linear-gradient(90deg, rgba(84, 184, 209, 0.04), transparent 40%);
}

.hero h1 {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
}

.section-heading {
    font-family: 'Chakra Petch', sans-serif;
    text-transform: uppercase;
    color: var(--ms-accent);
    font-size: 1.1rem;
    letter-spacing: 0.08em;
}

.timeline-entry { border-color: var(--ms-border-subtle) !important; }

footer.border-top {
    border-top-width: 2px !important;
}

footer a { text-decoration: none; }

.form-control, .form-select {
    background-color: var(--ms-bg);
    border-color: var(--ms-border-subtle);
    color: var(--ms-text);
}
.form-control:focus, .form-select:focus {
    background-color: var(--ms-bg);
    color: var(--ms-text);
    border-color: var(--ms-cyan);
    box-shadow: 0 0 0 0.25rem rgba(84, 184, 209, 0.2);
}

hr.border-accent {
    border-color: var(--ms-border-subtle) !important;
    opacity: 1;
}