/*
 * SquarePixel index page styles (desktop-first, no responsiveness yet).
 *
 * Modify spacing, colors, and typography values as needed. Every block has
 * dedicated selectors to simplify future adjustments.
 */

:root {
    color-scheme: light only;
    --background-color: #111318;
    /* Responsive sidebar width - Mode 1: Large screen (>= 1440px) */
    --sidebar-width: 280px;
    --sidebar-bg: #161a22;
    --sidebar-text: #f0f4ff;
    --sidebar-accent: #7aa6ff;
    --content-bg: #0c0f14;
    --heading-color: #f5f7fb;
    --body-text: #c9ced9;
    --tile-bg: #1b1f2a;
    --tile-title-bg: rgba(0, 0, 0, 0.65);
    --tile-title-color: #ffffff;
    --footer-bg: #141821;
    --footer-text: #e1e6f2;
    --button-bg: #2b64ff;
    --button-text: #ffffff;
    --button-bg-alt: #2b2f3a;
    --button-text-alt: #f5f7fb;
    --blur-amount: 6px;
    
    /* Responsive text sizes - Mode 1: Large screen (>= 1440px) */
    --base-font-size: 1rem;
    --heading-font-size: 1.8rem;
    --sidebar-brand-font-size: 1.45rem;
    --sidebar-label-font-size: 0.8rem;
    --preview-title-font-size: 1rem;
}

/* Mode 1.5: Narrower large screen (1440px - 1606px) */
@media (max-width: 1606px) {
    :root {
        --sidebar-width: 250px;
        --sidebar-brand-font-size: 1.4rem;
        --sidebar-label-font-size: 0.75rem;
    }
}

/* Mode 2: Medium size screen (1024px - 1439px) */
@media (max-width: 1439px) {
    :root {
        --sidebar-width: 240px;
        --base-font-size: 0.95rem;
        --heading-font-size: 1.7rem;
        --sidebar-brand-font-size: 1.35rem;
        --sidebar-label-font-size: 0.7rem;
        --preview-title-font-size: 0.9rem;
    }
}

/* Mode 3 & 4: Small screen and Mobile (<= 1023px) */
@media (max-width: 1023px) {
    :root {
        --sidebar-width: 0;
        --base-font-size: 0.9rem;
        --heading-font-size: 1.4rem;
        --sidebar-brand-font-size: 1.2rem;
        --sidebar-label-font-size: 0.7rem;
        --preview-title-font-size: 0.85rem;
    }
}

/* Mode 4: Mobile phone screen (<= 767px) */
@media (max-width: 767px) {
    :root {
        --base-font-size: 0.85rem;
        --heading-font-size: 1.2rem;
        --sidebar-brand-font-size: 1.1rem;
        --sidebar-label-font-size: 0.65rem;
        --preview-title-font-size: 0.85rem;
    }
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--body-text);
}

.page-wrapper {
    display: flex;
    min-height: calc(100vh - 64px);
}