/* ===== BASE STYLES ===== */
/* Reset, typography, and base element styles */

/* ===== RESET ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Prevent text and image selection globally */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Allow text selection in input fields and textareas */
input,
textarea,
.dev-menu-input {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
}

/* Prevent image dragging and selection */
img {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    pointer-events: auto;
}

/* ===== TYPOGRAPHY ===== */
body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--color-background-primary);
    color: var(--color-text-primary);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    font-size: var(--font-size-md); /* Base 16px */
}

/* Mobile text size improvements */
@media (max-width: 400px) {
    body {
        font-size: var(--font-size-md); /* Keep 16px base */
    }
    
    /* Increase text sizes for better readability */
    p, span, div, li {
        font-size: var(--font-size-md); /* 16px minimum */
    }
}

@media (max-width: 375px) {
    body {
        font-size: var(--font-size-md); /* Keep 16px base */
    }
}

/* ===== FONT FACE ===== */
@font-face {
    font-family: 'Nunito';
    src: url('../assets/fonts/Nunito-VariableFont_wght.woff2') format('woff2');
    font-weight: 200 1000;
    font-style: normal;
    font-display: swap;
}

/* ===== MATERIAL ICONS ===== */
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: var(--font-size-xl);
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    color: var(--color-text-icon);
}