:root {
    --primary: #0095FF;
    --primary-dark: #0066CC;
    --primary-darker: #0f4780;
    --background: #050607;
    --surface: #0A0C0E;
    --surface-dark: #070809;
    --text: #FFFFFF;
    --text-secondary: #7788AA;
    --text-secondary-alt: #a7b4cf;
    --accent: #111518;
    --danger: #FF4655;
    --gradient: linear-gradient(135deg, #0095FF 0%, #0066CC 100%);
    --shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
    --card-hover: 0 8px 32px rgba(0, 0, 0, 0.8);
    --team-a: #0095FF;
    --team-b: #00FF95;
    --team-both: #FFD700;
    --third-phase: #00d4ff;
    --fourth-phase: #b084ff;
    --ban-overlay: rgba(0, 0, 0, 0.7);
    --team-a-gradient: linear-gradient(transparent, rgba(255, 0, 0, 0.5));
    --team-b-gradient: linear-gradient(transparent, rgba(255, 0, 0, 0.5));
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--background);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -0.02em;
    line-height: 1.5;
}

body::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    z-index: -1;
    /*background-image: url('/assets/how-to-draft.png');*/
}