@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --primary: #42D9C8;
    --background: #121212;
    --surface: #1E1E1E;
    --text: #FFFFFF;
    --text-muted: #B3B3B3;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--background);
    color: var(--text);
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.panel {
    height: 100vh;
    width: 100vw;
    padding: 0 10vw;
    position: relative;
}

.hero-panel {
    background: radial-gradient(circle, var(--surface) 0%, var(--background) 70%);
}

.panel-content {
    max-width: 500px;
}

.filter-teal {
    filter: brightness(0) saturate(100%) invert(75%) sepia(26%) saturate(2372%) hue-rotate(125deg) brightness(94%) contrast(84%);
}

header {
    background: linear-gradient(to bottom, rgba(18, 18, 18, 0.8) 0%, rgba(18, 18, 18, 0) 100%);
}

.qr-code-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.qr-placeholder {
    width: 12rem;
    height: 12rem;
    background-color: var(--surface);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.qr-placeholder::after {
    content: 'QR Code';
}

/* Hide scrollbar for cleaner look */
body {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

body::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, and Opera */
}