/* ============================================
   MortalPins Base
   Global variables, reset, typography, body, common helpers
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    --mp-bg: #070712;
    --mp-surface: rgba(255, 255, 255, .075);
    --mp-surface-strong: rgba(255, 255, 255, .12);
    --mp-border: rgba(255, 255, 255, .14);
    --mp-text: #f8f7ff;
    --mp-muted: #a8a6bd;
    --mp-gold: #f6c85f;
    --mp-blue: #7c8cff;
    --mp-purple: #a855f7;
    --mp-pink: #ff5ea8;
    --mp-radius: 1.45rem;
    --mp-shadow: 0 24px 90px rgba(0, 0, 0, .38);
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

body {
    min-height: 100vh;
    color: var(--mp-text);
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at top left, rgba(124, 140, 255, .26), transparent 32rem), radial-gradient(circle at 82% 10%, rgba(168, 85, 247, .20), transparent 34rem), linear-gradient(180deg, #070712 0%, #111122 48%, #070712 100%);
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

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

    button:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: none !important;
    }

    button:hover,
    a:hover {
        color: inherit;
    }

textarea {
    min-height: 10em;
}

img {
    max-width: 100%;
}

/* Shared shell and panels */
.mp-shell {
    width: min(1180px, calc(100% - 2rem));
    margin-inline: auto;
}

.glass-panel {
    background: var(--mp-surface) !important;
    border: 1px solid var(--mp-border);
/*    box-shadow: var(--mp-shadow);
*/   
}

.index-panel {
    background: var(--mp-surface) !important;
    border: 1px solid var(--mp-border);
    box-shadow: var(--mp-shadow);
}

.text-gradient,
.text-gradient-is {
    background: linear-gradient(135deg, var(--mp-gold), var(--mp-pink), var(--mp-blue));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Chrome autofill fix */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--mp-text);
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px transparent;
}