/*
|--------------------------------------------------------------------------
| MRL Core Design System
|--------------------------------------------------------------------------
*/

:root {
    --mrl-bg: #050608;
    --mrl-bg-secondary: #090b0f;
    --mrl-panel: #0d0f13;
    --mrl-panel-secondary: #151820;
    --mrl-panel-soft: #1a1e27;

    --mrl-text: #ffffff;
    --mrl-muted: #a9b0bc;
    --mrl-muted-dark: #707887;

    --mrl-border: rgba(255, 255, 255, 0.11);
    --mrl-border-strong: rgba(255, 255, 255, 0.20);

    --mrl-accent: #ff6a00;
    --mrl-accent-secondary: #ff4e00;

    --mrl-success: #60d765;
    --mrl-danger: #ff5555;
    --mrl-warning: #ffd54a;

    --mrl-radius-sm: 5px;
    --mrl-radius-md: 8px;
    --mrl-radius-lg: 12px;
    --mrl-radius-xl: 18px;

    --mrl-content-width: 1280px;
    --mrl-content-narrow: 900px;

    --mrl-space-1: 8px;
    --mrl-space-2: 14px;
    --mrl-space-3: 20px;
    --mrl-space-4: 28px;
    --mrl-space-5: 40px;
    --mrl-space-6: 56px;
    --mrl-space-7: 80px;
    --mrl-space-8: 110px;

    --mrl-shadow:
        0 22px 70px rgba(0, 0, 0, 0.34);

    --mrl-transition: 180ms ease;
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
}

img {
    display: block;
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
}

.mrl-body {
    min-width: 320px;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--mrl-text);
    background:
        radial-gradient(
            circle at 85% 5%,
            rgba(22, 140, 255, 0.06),
            transparent 28rem
        ),
        var(--mrl-bg);
    font-family:
        Arial,
        Helvetica,
        sans-serif;
    line-height: 1.5;
}

.mrl-body--series {
    background:
        radial-gradient(
            circle at 82% 10%,
            rgba(255, 255, 255, 0.03),
            transparent 34rem
        ),
        var(--mrl-bg);
}

.mrl-container {
    width: calc(100% - 48px);
    max-width: var(--mrl-content-width);
    margin-right: auto;
    margin-left: auto;
}

.mrl-container--narrow {
    max-width: var(--mrl-content-narrow);
}

.mrl-section {
    position: relative;
    padding-top: var(--mrl-space-7);
    padding-bottom: var(--mrl-space-7);
}

.mrl-section--tight-top {
    padding-top: var(--mrl-space-5);
}

.mrl-section--surface {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.018),
            rgba(255, 255, 255, 0.006)
        ),
        var(--mrl-bg-secondary);
    border-top: 1px solid rgba(255, 255, 255, 0.045);
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

.mrl-card {
    color: var(--mrl-text);
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.035),
            transparent 50%
        ),
        linear-gradient(
            135deg,
            var(--mrl-panel),
            var(--mrl-panel-secondary)
        );
    border: 1px solid var(--mrl-border);
    border-radius: var(--mrl-radius-lg);
    box-shadow: var(--mrl-shadow);
}

.mrl-eyebrow {
    display: block;
    color: var(--mrl-accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.3;
    text-transform: uppercase;
}

.mrl-button {
    display: inline-flex;
    min-height: 46px;
    padding: 0 22px;
    align-items: center;
    justify-content: center;
    color: var(--mrl-text);
    border: 1px solid transparent;
    border-radius: var(--mrl-radius-sm);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        transform var(--mrl-transition),
        border-color var(--mrl-transition),
        background var(--mrl-transition),
        box-shadow var(--mrl-transition);
}

.mrl-button:hover,
.mrl-button:focus-visible {
    transform: translateY(-2px);
}

.mrl-button--primary {
    background:
        linear-gradient(
            110deg,
            var(--mrl-accent),
            var(--mrl-accent-secondary)
        );
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.28);
}

.mrl-button--primary:hover,
.mrl-button--primary:focus-visible {
    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.38);
}

.mrl-button--ghost {
    background: rgba(255, 255, 255, 0.025);
    border-color: var(--mrl-border-strong);
}

.mrl-button--ghost:hover,
.mrl-button--ghost:focus-visible {
    border-color: var(--mrl-accent);
    background: rgba(255, 255, 255, 0.06);
}

.mrl-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--mrl-text);
    font-size: 0.70rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-decoration: none;
    text-transform: uppercase;
}

.mrl-text-link::after {
    content: "→";
    color: var(--mrl-accent);
    transition: transform var(--mrl-transition);
}

.mrl-text-link:hover::after,
.mrl-text-link:focus-visible::after {
    transform: translateX(4px);
}

.mrl-section-action {
    display: flex;
    margin-top: var(--mrl-space-5);
    justify-content: center;
}

.mrl-prose {
    max-width: 760px;
    color: var(--mrl-muted);
    font-size: 1.02rem;
}

.mrl-prose p {
    margin-top: 0;
    margin-bottom: 1.4em;
}

.mrl-two-column {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.75fr);
    gap: var(--mrl-space-6);
    align-items: start;
}

.mrl-two-column--legacy {
    grid-template-columns: minmax(0, 0.85fr) minmax(360px, 0.65fr);
    align-items: center;
}

.mrl-empty-state {
    padding: 34px;
    color: var(--mrl-muted);
    text-align: center;
}

.mrl-status-pill {
    display: inline-flex;
    min-height: 28px;
    padding: 0 10px;
    align-items: center;
    justify-content: center;
    color: var(--mrl-text);
    background: rgba(255, 255, 255, 0.065);
    border: 1px solid var(--mrl-border);
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.mrl-status-pill.is-open {
    color: #caffcc;
    background: rgba(96, 215, 101, 0.12);
    border-color: rgba(96, 215, 101, 0.34);
}

.mrl-status-pill.is-closed {
    color: #ffd2d2;
    background: rgba(255, 85, 85, 0.12);
    border-color: rgba(255, 85, 85, 0.34);
}

.mrl-skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 9999;
    padding: 10px 14px;
    color: #000000;
    background: #ffffff;
    border-radius: var(--mrl-radius-sm);
    font-weight: 700;
    transform: translateY(-150%);
}

.mrl-skip-link:focus {
    transform: translateY(0);
}

@media (max-width: 900px) {
    .mrl-two-column,
    .mrl-two-column--legacy {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .mrl-container {
        width: calc(100% - 32px);
    }

    .mrl-section {
        padding-top: var(--mrl-space-6);
        padding-bottom: var(--mrl-space-6);
    }

    .mrl-section--tight-top {
        padding-top: var(--mrl-space-4);
    }

    .mrl-button {
        min-height: 48px;
    }
}

@media (max-width: 480px) {
    .mrl-container {
        width: calc(100% - 24px);
    }
}