/* ============================================================================
   REM-BASED VIEWPORT SYSTEM
   ============================================================================
   
   Mobile:  32rem canvas  = 320-639px viewport  (10px base at 320px)
   Tablet:  64rem canvas  = 640-1279px viewport (10px base at 640px)
   Desktop: 128rem canvas = 1280px+ viewport    (10px base at 1280px)
   
   Everything scales proportionally to viewport.
   Write once (e.g., width: 10rem), works perfectly everywhere.
   
   ============================================================================ */

/* Mobile: 32rem canvas — 320–639px */
@media (max-width: 639px) {
    html {
        font-size: 3.125vw; /* 10px at 320px, 20px at 640px */
    }
}

/* Tablet: 64rem canvas — 640–1279px */
@media (min-width: 640px) and (max-width: 1279px) {
    html {
        font-size: 1.5625vw; /* 10px at 640px, 20px at 1280px */
    }
}

/* Desktop: 128rem canvas — 1280px+ */
@media (min-width: 1280px) {
    html {
        font-size: 0.78125vw; /* 10px at 1280px */
    }
    html[data-ui-scale="medium"]   { font-size: 0.703125vw; } /* ~90% */
    html[data-ui-scale="small"]    { font-size: 0.61vw; }     /* ~78% — similar to 67% browser zoom */
    html[data-ui-scale="smallest"] { font-size: 0.5vw; }      /* ~64% */
}

/* Cap: 2K */
@media (min-width: 2560px) {
    html {
        font-size: 20px;
    }
}

/* Cap: 4K */
@media (min-width: 3840px) {
    html {
        font-size: 30px;
    }
}