/* ========================================================
   🌐 GLOBAL FLUID FONT SCALING (Rem Base Control)
   Controls entire application typography proportionally
   ======================================================== */
:root,
html {
    /* Compact phones (< 390px, e.g., iPhone SE): standard 16px baseline */
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    position: relative;
    min-height: 100%;
}

/* Mid-to-Large Flagship Mobiles (390px - 639px, e.g., Pixel 10, Galaxy S, iPhone Pro Max) */
@media screen and (min-width: 390px) {
    :root,
    html {
        /* Bumps all rems proportionally (~12.5% increase) */
        font-size: 18px;
    }
}

/* Tablets, Foldables & Small Laptops (640px - 1023px, e.g., iPad portrait/landscape) */
@media screen and (min-width: 640px) {
    :root,
    html {
        font-size: 17.5px;
    }
}

/* Standard & Large Desktop Displays (>= 1024px) */
@media screen and (min-width: 1024px) {
    :root,
    html {
        /* Returns to comfortable desktop proportion */
        font-size: 16px;
    }
}